手把手教你webpack3（5）babel-loader詳細使用說明

如果可以，請給本項目加【Star】和【Fork】持續關注。

這個用于将使用ES6規範的js代碼，轉為ES5。

首先安裝一大堆東西，參照下面的指令，一共是4個（包括webpack）

建立babel規則檔案<code>.babelrc</code>，内容設定為：

然後<code>app.js</code>裡添加檔案内容（這顯然是es6文法）：

運作 <code>npm run test</code> 執行腳本，等腳本執行完畢後，檢視dist檔案夾下的 <code>dist.js</code> 檔案。

會發現代碼已經被成功轉為非es6文法了（截取如下）：

但是，這個隻能轉一些普通的es6文法，像例如<code>Promise</code>、<code>Set</code>之類的，他是無法轉換的。

如果想要轉換這些，我們需要做一些額外的工作。

首先安裝插件

然後修改<code>.babelrc</code>檔案的内容為：

【注】：

<code>babel-runtime</code>（也就是上面<code>plugins</code>數組中的<code>transform-runtime</code>），解決了輔助代碼（即讓我們可以使用新特性的代碼）被預設添加到每一個需要他的檔案的問題（這會導緻檔案過大）。

具體解決方法是禁用了babel對每個檔案的runtime注入，引入 <code>babel-plugin-transform-runtime</code> 并且使所有輔助代碼從這裡引用。

<b>表現效果：</b>假如A子產品異步加載B子產品，A、B子產品裡都使用了<code>Set</code>，那麼為了使A子產品正常運作，引入了某些代碼。然後因為B子產品又是被A子產品引入的，那麼B子產品在被加載的時候，A子產品裡已經引入的代碼，就沒必要再次引入了，是以B子產品裡是不存在A子產品引入的那些相容代碼的。

【注（完）】

修改webpack設定檔案的loader内容為：

最後修改<code>app.js</code>這個檔案的内容，給裡面加一些特殊的es6文法：

以上代碼包含es6的<code>Promise</code>，<code>Set</code>，以及es7中的<code>async/await</code>。

此時我們運作一下<code>npm run test</code>試試，然後檢視<code>dist/dist.js</code>檔案，會發現我們的代碼出現在大約1040行的位置，并且原本使用es6、es7文法的代碼，都被一段很長很複雜的代碼所替換（因為太長，是以這裡略過）。

這說明我們轉義成功了！