瀏覽器對(duì)于ES2015(ES6)的語(yǔ)法支持還不是很強(qiáng), 因此想要使得開(kāi)發(fā)人員編寫(xiě)出來(lái)的ES6語(yǔ)法能夠正常地在各個(gè)瀏覽器運(yùn)行的話, 還需要將編寫(xiě)的JS文件通過(guò)一些工具編譯成ES5語(yǔ)法才行, 那么這個(gè)工具就是babel. 如何使用babel來(lái)進(jìn)行語(yǔ)法的編譯在這里可以看得到
然而, Babel默認(rèn)只轉(zhuǎn)換新的JavaScript句法（syntax），而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼。而且像import和export這兩個(gè)命令現(xiàn)在在任何瀏覽器中都是不支持的, 同時(shí)babel也無(wú)法將其轉(zhuǎn)換為瀏覽器支持的ES5, 原因在于:
babel只是個(gè)翻譯，假設(shè)a.js 里 import 了 b.js, 對(duì)a.js進(jìn)行轉(zhuǎn)碼，只是翻譯了a.js，并不會(huì)把b.js的內(nèi)容給讀取合并進(jìn)來(lái), 如果想在最終的某一個(gè)js里，包含 a.js，b.js 的代碼，那就需要用到打包工具
這里說(shuō)明一下如何使用webpack工具將帶有import和export語(yǔ)法的JS文件, 通過(guò)打包工具生成所有瀏覽器都支持的單個(gè)JS文件
1. 下載node.js和webpack
Node.js是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。可以說(shuō)就是服務(wù)器端的JS. webpack是一個(gè)打包工具, 而它是依賴于node.js運(yùn)行的.
具體的安裝步驟網(wǎng)上搜索安裝. 安裝完畢后打開(kāi)node.js自帶的命令行工具
然后輸入如下命令全局安裝webpack工具
npm install -g webpack
接著通過(guò)命令行工具定位到你的工程文件的根目錄下, 再次安裝webpack到你的工程中
cnpm install webpack --save-dev
2. 編寫(xiě)webpack.config.js文件
在根目錄下創(chuàng)建webpack.config.js, 這個(gè)文件是用來(lái)描述一些要使用webpack工具進(jìn)行打包的配置信息, 文件內(nèi)容如下
通過(guò)該文件可以使用webpack打包工具, webpack會(huì)從import.js進(jìn)入, 對(duì)該文件中的內(nèi)容進(jìn)行編譯并打包, 最終會(huì)在dist目錄下生成打包好的文件bundle.js, 編譯打包過(guò)程中用到的工具在module對(duì)象的loaders中聲明, 這里使用了babel-loader來(lái)對(duì)JS文件進(jìn)行編譯(包括從ES6轉(zhuǎn)換為ES5以及打包)
3. 創(chuàng)建main.js
在該文件中通過(guò)ES6語(yǔ)法import從main.js中引入firstName和lastName變量. 并且通過(guò)console.log將引入的兩個(gè)變量打印到控制臺(tái).
4. 創(chuàng)建export.js
在該文件中通過(guò)ES6語(yǔ)法export將文件中的幾個(gè)變量作為模塊輸出給別的文件引用.
5. 創(chuàng)建HTML文件
在HTML文件中直接將webpack最終打包生成的bundle.js文件引入即可, 因?yàn)橥ㄟ^(guò)webpack工具已經(jīng)將export.js和import.js的所有內(nèi)容都打包到一個(gè)文件bundle.js中了, 因此在HTML文件中引入該文件即可以將兩個(gè)JS文件中的代碼都執(zhí)行.
6. 配置.babelrc文件
在工程文件的根目錄下創(chuàng)建一個(gè).babelrc文件(注意前面有個(gè)點(diǎn)), 這個(gè)文件是用來(lái)描述我要根據(jù)什么樣的規(guī)則、或者是將JS文件編譯成什么版本的文件(比如說(shuō)ES5). 該文件的內(nèi)容如下:
7. 下載相關(guān)依賴模塊
npm install babel
npm install babel-cli
npm install babel-core
npm install babel-loader
npm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到項(xiàng)目的根目錄下, 然后輸入如下指令
webpack
等待一會(huì)兒就會(huì)發(fā)現(xiàn)工程文件的目錄下多了一個(gè)dist文件夾, 里面放著的就是打包好了的bundle.js文件, 在HTML文件中通過(guò)下面的代碼引入js文件
然后在瀏覽器上運(yùn)行html文件, 使用F12打開(kāi)開(kāi)發(fā)者工具, 就可以看到console選項(xiàng)中輸出兩行記錄
