webpack筆記（7） babel配置：webapck轉換ES6的語法

npm 安裝

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack.config.js中配置：

module.exports = {
    module:{
　　　　rules: [
            {
                test:/\.(jsx|js)$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            "es2015","react"
                        ]
                    }
                },
                exclude:/node_modules/    //不但願babel轉換的目錄
            }
        }
    ]
}

 

 

雖然Babel能夠直接在webpack.config.js中進行配置，可是考慮到babel具備很是多的配置選項，若是寫在webapck.config.js中會很是的雍長不可閱讀，因此能夠把配置寫在.babelrc文件裏。

在根目錄建立.babelrc，並配置：

/**
 * 原webpack.config.js文件
 *    module: {
 *        rules: [
 *            {
 *                test: /\.js$/,
 *                use: {
 *                    loader: 'babel-loader'
 *                },
 *                exclude: /node_modules/
 *            }
 *        ]
 *    }
 */
 
{
    "presets":["react","es2015"]
}

 

如今網絡上已經不流行babel-preset-es2015，如今官方推薦使用的是babel-preset-env

npm安裝：

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

而後修改.babelrc裏的配置文件。其實只要把以前的es2015換成env就能夠了。

{
    "presets":["react","env"]
}

 

 

babel-polyfill 插件

因爲 Babel 只轉換語法(如箭頭函數)， 你可使用 babel-polyfill 支持新的全局變量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。 它使用了 core-js 和 regenerator。 查看 babel-polyfill 文檔獲取更多信息。

npm 安裝：

npm install --save-dev babel-polyfill

在你入口.js頂部將 polyfill 引入進來,確保它在任何其餘代碼/依賴聲明以前被調用！

//CommonJS module ： require('babel-polyfill');
//es module ： import 'babel-polifill';

require('babel-polyfill');

 

runtime-transform插件

runtime transform也是一個插件，它與polifill有些相似，但它不污染全局變量

實際開發中咱們只要配置.babelrc中的presets就能夠了,而不使用runtime，若是是用到一些es6的新方法（好比開發餓了麼element這個UI組件庫），就可使用runtime,由於咱們要開發框架給第三方的時候，不但願它去污染全局的變量。

npm安裝：

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

在.bablerc文件中添加配置：

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