webpack中babel配置 --- runtime-transform和babel-pollfill
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"]
}