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"]
}