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