webpack 項目構(gòu)建：（二）ES6 編譯環(huán)境搭建

marser 發(fā)布于2019-08-22 15:08 / 2736人閱讀

摘要：本質(zhì)就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項目構(gòu)建三開發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng)

注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實踐過程可能會有些出入。

??在上一章 webpack 項目構(gòu)建：（一）基本架構(gòu)搭建我們搭建了一個最基本的 webpack 項目，現(xiàn)在讓我們以此為基礎(chǔ)，結(jié)合 babel，構(gòu)建一個可以運行最新 ES6 語法的 webpack 項目。

一、上期回顧

??在上一章，我們搭建了一個如下結(jié)構(gòu)的 webpack 項目：

??并通過 webpack.config.js 的 entry 和 output 屬性，配置了 webpack 的打包規(guī)則：

webpack.config.js

??即以當(dāng)前目錄下的 index.js 為打包入口，通過 webpack 打包構(gòu)建，在當(dāng)前目錄生成一個 test.js 文件。通過簡單的配置就能讓 webpack 正常工作了。
??現(xiàn)在通過在當(dāng)前目錄執(zhí)行 webpack 打包命令，我們就能得到 test.js 文件了。

二、使用打包生成的 test.js 文件

??第一章中 index.js 文件做的事情很簡單，僅僅是聲明了一個值為整型 123 的 test 變量。

index.js

??在實際的環(huán)境中，這樣一段代碼完成的功能很有限。現(xiàn)在讓我們來擴(kuò)展我們的項目，使之能完成更強大的功能。

修改 index.js 文件，完成等待 1 秒彈出問候語的功能：
index.js

webpack 打包生成 test.js 文件；

新建 index.html 文件，并引用打包生成的 test.js 文件：
index.html

??現(xiàn)在讓我們在瀏覽器里打開 index.html 文件，等待一秒就會彈出信息為 Hello word! 的彈窗。由此可見打包生成的 test.js 具有 index.js 一樣的功能。
??這是因為 webpack 打包的本質(zhì)，就是從入口文件出發(fā)，遞歸解析所有相關(guān)的依賴文件，并打包成一個或多個文件（bundle）。webpack 只是重新組織、精簡了你寫的代碼，并不會影響代碼的功能。webpack 的魅力也正是在于其強大的組織、優(yōu)化代碼的能力。現(xiàn)在讓我們一步步地深入了解 webpack 的打包配置，一點點揭開 webpack 神秘的面紗。

三、ES6 和 Babel

??ECMAScript6 實現(xiàn)了很多強大的新特性，借助 ES6 我們能用更加優(yōu)雅的方式完成許多強大的功能。只是鑒于許多老版本的瀏覽器尚未支持 ES6 語法，需要在使用之前轉(zhuǎn)換為 ES5 語法，以使其兼容更多的瀏覽器。而完成這些轉(zhuǎn)換工作的就是 Babel 了。
??Babel 本質(zhì)就是一個 JavaScript 編譯器，通過：

將 JavaScript 源代碼解析成抽象語法樹（AST）；

將源代碼的 AST 結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的 AST；

將目標(biāo)代碼的 AST 轉(zhuǎn)換成 JavaScript 代碼。

??就可以完成 ES6 代碼到 ES5 代碼的轉(zhuǎn)換，當(dāng)然轉(zhuǎn)換的過程會很復(fù)雜，我們在這里先了解一下基本的原理。想深入了解的同學(xué)可以通過開發(fā)自己的 Babel Plugin，熟悉 AST 的操作流程。

??Babel 本身的安裝使用是很簡單的，針對我們當(dāng)前的應(yīng)用，我們可以通過如下過程實現(xiàn)：

安裝 babel-core 包：cnpm i --save-dev babel-core；

新建一個 Babel 測試文件 babelTest.js 并使用 babel-core 轉(zhuǎn)換 ES6 代碼（我們使用了 ES6 的箭頭函數(shù)）：
babelTest.js

安裝上一步中使用的 babel-preset-env 和 babel-preset-stage-0 包：cnpm i --save-dev babel-preset-env babel-preset-stage-0；（babel-preset-env 是一個主流的 Babel 插件數(shù)組；Stage-X 是實驗階段的 Presets，）
TC39 將提案分為以下幾個階段:
Stage 0 - 稻草人: 只是一個想法，可能是 babel 插件。
Stage 1 - 提案: 初步嘗試。
Stage 2 - 初稿: 完成初步規(guī)范。
Stage 3 - 候選: 完成規(guī)范和瀏覽器初步實現(xiàn)。
Stage 4 - 完成: 將被添加到下一年度發(fā)布。

在當(dāng)前目錄執(zhí)行 babelTest.js 文件：node babelTest.js，控制臺輸出信息：

可以看到我們的 ES6 箭頭函數(shù)被轉(zhuǎn)換為了 ES5的 "(function() {})"。

??了解了 Babel 的基本工作原理，現(xiàn)在讓我們用 ES6 的新特性，稍微改寫一下我們的 index.js：

index.js

??在這里我們用了 ES6 的模板字符串和箭頭函數(shù)。模板字符串通過用反引號（`）標(biāo)識字符串，可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
??在沒有配置 Babel 的情況下，我們通過 webpack 命令打包，可以發(fā)現(xiàn)生成的 test.js 文件還是用的 ES6 語法：

test.js

注：截圖部分是 test.js 的最后參數(shù)部分。

??下面讓我們看一下如何將 Babel 結(jié)合到 webpack 中，來實現(xiàn) ES6 代碼到 ES5 代碼的轉(zhuǎn)換。

四、webpack + Babel 構(gòu)建 ES6 開發(fā)平臺

??既然要將 webpack 和 Babel 結(jié)合在一起，就需要在兩者之間建立一條紐帶，而通過 webpack 的 loaders 就可以生成這條紐帶，現(xiàn)在讓我們修改我們的 webpack.config.js 配置文件：

webpack.config.js

??可以看到我們在這里加了一段 module.rules 配置項，rules 數(shù)組里的每一項就是一條 loader 使用規(guī)則，loader 用于對不同類型文件的源代碼進(jìn)行轉(zhuǎn)換，可以使你在 import 或"加載"模塊時預(yù)處理文件。
??現(xiàn)在我們配置的第一條規(guī)則，就是針對以 .js 結(jié)尾的文件使用 babel-loader。由于現(xiàn)在我們的項目中還不存在 babel-loader，讓我們先通過 cnpm 安裝該模塊： cnpm i --save-dev babel-loader。

??現(xiàn)在我們已經(jīng)準(zhǔn)備好了 webpack、webpack 和 Babel 的紐帶，接下來就需要準(zhǔn)備 Babel 的相關(guān)配置了。
??在上一節(jié)已經(jīng)介紹了多帶帶使用 Babel 的實現(xiàn)方法，但是在 webpack 中一般情況下我們不會主動調(diào)用 babel-core 解析 ES6 代碼，而是通過 babel-loader 在 webpack 編譯過程中自動解析 ES6 代碼。那么現(xiàn)在的問題就是在上一節(jié)使用 babel-core 的過程中，我們使用了 env 和 stage-0 兩個 preset，現(xiàn)在不使用 babel-core 了，這兩個 preset 又應(yīng)該在哪里配置？
??這里我們有兩種方式可以實現(xiàn)上述配置：

使用 Babel 提供的方法：通過 Babel 目錄下的 .babelrc 配置文件完成配置（直接創(chuàng)建 .babelrc 文件可能會有命名規(guī)范的問題，可以通過 VS Code、Sublime 等編輯器創(chuàng)建該文件）。這里的 .babelrc 就類似于 webpack.config.js 的作用，只是 .babelrc 文件是在 babel-loader 執(zhí)行的過程中使用的。
.babelrc

使用 webpack 提供的方法：在 webpack.config.js 的 module.rules 規(guī)則中，我們還可以通過使用 loader 語法配置 Babel 的 presets：
webpack.config.js

??我們采用第一種方式配置 .babelrc 文件，項目目錄結(jié)構(gòu)如下：

??現(xiàn)在讓我們在當(dāng)前目錄下執(zhí)行 webpack 命令并查看生成的 test.js 文件，可以發(fā)現(xiàn)我們的 index.js 已經(jīng)被轉(zhuǎn)換成 ES5 代碼了：

??在瀏覽器中打開我們的 index.html，發(fā)現(xiàn)打包出來的 test.js 能正常工作：

??使用 webpack 搭建 ES6 編譯環(huán)境就講完了。下一章我們開始搭建一個 webpack 開發(fā)環(huán)境。（webpack 項目構(gòu)建：（三）開發(fā)環(huán)境——本地服務(wù)器搭建）

源碼下載地址：https://github.com/xh4722/web...

參考資料：
ECMAScript 6入門（阮一峰）
babel-handbook
webpack 中文文檔
Babel中文網(wǎng)