webpack - babel配置

babel是一個javascript編譯器，是前端開發中的一個利器。它突破了瀏覽器實現es標準的限制，使我們在開發中可以使用最新的javascript語法。

通過構建和babel，可以使用最新js語法進行開發，最後自動編譯成用於瀏覽器或node環境的程式碼。

webpack中使用babel

配合webpack使用babel前，需要首先使用npm init初始化一個專案，npm install -g webpack安裝webpack（全域性安裝是為了在命令列使用webpack命令）。

• 安裝babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env

其中，babel-preset-env外掛是為了告訴babel只編譯批准的內容，相當於babel-preset-es2015, es2016, es2017及最新版本。通過它可以使用最新的js語法。

• 配置webpack.config.js

在webpack配置檔案中配置bable-loader

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env',{
                            targets: {
                                browsers: ['> 1%', 'last 2 versions']
                            }
                        }]
                    ]
                }
            },
            exclude: '/node_modules/'
        }
    ]
}
 

其中，exclude是定義不希望babel處理的檔案。targets是presets的一些預設選項，這裡表示將js用於瀏覽器，只確保佔比大於1%的瀏覽器的特性，主流瀏覽器的最新兩個主版本。
更多與配置有關的資訊，可以參考：
babel env preset設定,
browserlist預設定.

• 在命令列中執行相應webpack命令即可。
• 由於babel-preset配置選項較多，我們一般可以在根目錄下建立.babelrc檔案，專門用來放置babel preset配置，這是一個json檔案。可以將上述配置修改如下：

//.bablerc檔案
{
    "presets": [
        ['env',{
            "targets": {
                "browsers": ['> 1%', 'last 2 versions']
            }
        }]
    ]
}

//原webpack.config.js檔案
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'
        }
    ]
}
 

babel-polifill外掛

在上面的babel配置中，babel只是將一些es6，es7-8的語法轉換成符合目標的js程式碼，但是如果我們使用一些特性或方法，比如Generator, Set, 或者一些方法。babel並不能轉換為低版本瀏覽器識別的程式碼。這時就需要babel-polifill。

簡單的說，polifill就是一個墊片，提供了一些低版本es標準對高階特性的實現。使用polifill的方法如下：

npm install --save babel-polifill

然後在應用入口引入polifill，要確保它在任何其他程式碼/依賴宣告前被呼叫。

//CommonJS module
require('babel-polyfill');

//es module
import 'babel-polifill';

在webpack.config.js中，將babel-polifill加入entry陣列中：

entry: ["babel-polifill", "./app.js"]

相比於runtime-transform，polifill用於應用開發中。會新增相應變數到全域性，所以會汙染全域性變數。

runtime-transform外掛

runtime transform也是一個外掛，它與polifill有些類似，但它不汙染全域性變數，所以經常用於框架開發。安裝：

npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

注意安裝的環境babel-runtime需要生產環境

用法：
將下面內容新增到.bablerc檔案中

{
    "plugins": ["transform-runtime"]
}