npm + webpack + es6 初體驗

時間 2019-11-09

標籤 npm webpack es6 體驗欄目 JavaScript 简体版

原文原文鏈接

準備

下載Node.js和npmcss
一個命令行工具（個人是git bash）。不是必須的，用自帶的命令行也能夠。html
建立一個文件夾，做爲根目錄，好比 npm-webpack-es6前端

這時，你將看到一個空文件夾node

開始

命令行打開至根目錄webpack
鍵入 npm init,一路肯定到yes ————————建立一個package.json。git

文件夾如左es6

package.json 內部如左github

安裝webpack

安裝webpack前，先附上幾個經常使用的npm命令web

npm init      這個指令會引導你建立一個package.json，包括版本做者等信息，有助於你發包。後面安裝的包的依賴關係也會在package.json裏有體現。
npm install     直接執行這個命令，會按照當前目錄下的package.json的配置去安裝各個依賴的包。
npm install [module]    在當前目錄安裝這個模塊。會去檢測該模塊是否存在於node_module文件夾中，存在了就不安裝了。 
npm install [module] -g    在全局進行模塊安裝。全局模式下安裝的包，會自動註冊到系統變量 path裏的。
npm install [module] --save-dev    在當前目錄下安裝這個模塊，可是僅在開發時使用。在package的"devDependencies"下，表示僅在開發的時候使用。

有一些包是須要用命令行的，這些須要註冊系統變量，所以像supervisor等包，必定要安裝在全局。不然就不能用它的命令行指令。
有一些包是在js中使用的，那麼這些包安裝到當前目錄就能夠了。
webpack 通常建議全局安一個，當前目錄安一個。

咱們剛纔已經使用了npm init建立了一個package.json，接下來咱們開始安裝webpack。npm

首先在全局安裝一個webpack

執行 npm install webpack -g         （已經全局安裝webpack 的能夠跳過這一步）

而後在當前目錄下安裝一個webpack

執行 npm install webpack --save

你會發現當前目錄下新增了一個文件夾node_module，在裏頭有着webpack的包

檢驗下，webpack 安裝成功了沒

執行  webpack -v

若是webpack安裝成功了，就會在命令行打印出webpack的版本和幫助。
若是失敗了，檢測一下有沒有在全局安裝webpack。

當你執行到這步，你的文件夾長這個樣子

--npm-webpack-es6
        --package.json
        --node_module
            --webpack

package.json長這個樣子

{
  "name": "npm-webpack-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.2"
  }
}

使用webpack來組織文件

在直接介紹使用es6模塊化語言來組織文件以前，咱們先了解一下webpack的使用。
webpack會將咱們用模塊化語言語法寫成的源文件，編譯成瀏覽器可識別的文件。也就是有從源文件→線上文件的過程。

咱們來實踐一下：

首先在根目錄下建立一個文件夾src來放源文件；
再建立一個文件夾dist來放編譯後文件；
新建一個html文件來放html文件
最後建立一個webpack.config.js。（先創個空的，待會兒加內容）

這時你的目錄結構將以下：

webpack.config.js是webpack的配置文件。
要搞懂webpack其實就是要懂得怎麼來配置 webpack.config.js。
本文介紹一個基礎的配置，完整的配置教程請參照官網文檔——webpack官網文檔。

接下來：

在src中新建一個文件—— sourceFile.js

文件內容，隨意點：

//sourceFile.js
console.log('我是superman')；

配置 webpack.config.js （關鍵一步）

module.exports = {
    entry:{
        bundle : __dirname + '/src/sourceFile.js' 
    },
    output:{
        path: __dirname + '/dist',
        filename: '[name].js'
    }
}

這個文件僅有entry和output，應該是最簡單的配置文件了。

module.exports 是CommonJS的寫法，這個是Node.js的規範
__dirname 表明當前目錄,Node.js會去識別
entry中，值爲一個路徑，表明源文件的存放位置。鍵，則能夠隨便取，在個人配置中，編譯後文件的名字就是這裏的鍵。
output中，path爲編譯後的文件存放的文件夾。 filename 爲編譯後文件夾名字。其中[name]表明了entry中的鍵。也就是說上面是什麼名字，編譯後就是什麼名字。能夠本身試驗下。

使用webpack進行編譯
```
在命令行鍵入 webpack -w
```

成功編譯的話，命令行的顯示

同時在dist中會新出現一個 bundle.js, 代碼長這個樣子：

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    console.log('我是superman');

/***/ }
/******/ ]);

能夠看到編譯後的js多了不少額外的內容，因此若是項目小的話是不須要模塊化的。模塊化是用來構建中大型項目的。

來看看效果

在html文件夾下新建一個 test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看看咱們編譯後的js可不能夠用</title>
</head>
<body>
    <script src = "../dist/bundle.js"></script>
</body>
</html>

在瀏覽器打開test.html，你會看到瀏覽器的console中：

說明咱們將源文件sourceFile.js編譯後生成的bundle.js，是能夠正常使用的。

疑惑

這樣子作的話，和html中直接引用源文件效果是同樣的啊。話說爲何要編譯啊？這樣不是更麻煩嗎？

這是我剛接觸webpack的感覺。後來，我逐步理解了，編譯實際上是爲了實現模塊化。基於AMD/CMD/CommonJS/es6的語法，瀏覽器是沒法識別的。這些規範的語法，你能夠感覺一下：

//AMD
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC)
{
    alert('加載成功');
});

//CMD
seajs.use("../static/hello/src/main")

//CommonJS
module.export = {
    name:'rouwan'
}

//es6模塊
import {module1, module2} form './module.js';

這些規範使用的語法，瀏覽器是不能識別的。不信你試一下，立馬報錯。除非將來幾年，瀏覽器支持es2015的import和export。所以，須要由webpack來編譯，編譯後的文件，瀏覽器可以識別。

如今,咱們開始使用es6模塊語法來組織模塊吧

使用es6模塊語法

webpack能夠支持es6語法。這個也是爲何webpack強大的緣由。用es6a ,想一想就爽。
固然，咱們須要先下載配置babel

下載和配置babel
下載babel：

npm install --save-dev babel-loader babel-core babel-preset-es2015  //下載babel的webpack加載器

下載完了，要去webpack.config.js進行配置，配置完的文件以下：

module.exports = {
    entry:{
        bundle : __dirname + '/src/sourceFile.js'
    },
    output:{
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module:{
        loaders:[{
            test: /\.js$/,
            loader: 'babel?presets=es2015'
        }]
    }
}

能夠看到，和以前的webpack.config.js相比，增長了一個loaders的配置。
大體意思是：全部的js文件，使用babel加載器來翻譯一下
具體配置原理可查官網文檔 loader的api

怎麼看本身是否配置好呢？待會兒webpack編譯時看有沒有報錯，瀏覽器端有沒有識別es6語法就知道了。

開始使用es6模塊
在src文件夾下新建一個文件——moduleTest.js

//moduleTest.js
function say(){
    console.log('我引用了一個模塊')
}

export {say}

將sourceFile.js的內容改成：

//sourceFile.js
import {say} from './moduleTest.js';
say();

在命令行運行webpack編譯指令

webpack -w

若是沒有報錯，先開心一下。嘿嘿。
別急，先去打開test.html看看，若是你看到了命令行成功打印

那麼，恭喜你，這個demo完整地跑完了。

結語

前端工程化是大勢所趨，咱們將再也不人工去實現依賴管理，代碼壓縮混淆，測試，上線等開發流程，轉而交由工具去完成。這些工具中，npm做爲優秀的包管理工具，節省了咱們在搜索各個庫的官網下載庫的時間，方便咱們進行包的下載，更新，和依賴管理；webpack做爲優秀的模塊化構建工具，支持多種模塊化規範，並能將css/字體/圖片做爲模塊管理，編譯各種js方言，有着豐富的插件，已經超出了一個模塊加載器的範圍，成爲了一款強大的前端構建工具。

本文僅僅介紹了一個最簡單的demo，由於我也正在學習中。詳細的資料，仍是要去看文檔並實踐，這裏給出幾個傳送門以便你們詳細瞭解npm/webpack/es6模塊的知識。

npm經常使用指令
 webpack官方文檔
 阮一峯的ECMA6入門——es6模塊