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