如何使用 webpack 转换 ES6 语法

为了考虑浏览器兼容新我们在打包代码时，一般回把ES6、ES7、ES8等高级语法转换为普遍浏览器能识别的ES5的低级语法，具体如何配置呢？

安装插件

npm install babel-loader @babel/core @babel/preset-env -D

注解

• babel-loader: 解析并转换js的一个加载器
• @babel/core：核心模块，可调用传送方法转换源代码
• @babel/preset-env: 转换模块

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    // 将es6 转换为 es5
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

这时再去打包可以看到一些ES6的语法已经被转换为ES5语法了，nice ~~

问题：一些基本的ES6语法已经转换成ES5了，但一些高级语法还是不能转换，如下下列代码的高级语法：

class Test{
    name = '唐三'
}

等同于 在 new Test() 的实例上添加了一个 name 属性

这时还需要借助一个插件

npm install @babel/plugin-proposal-class-properties -D

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    // 将es6 转换为 es5
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            }
        ]
    }
}

问题：如若你的代码里还有装饰器，则转换时就会报不支持的错误，还需要借助另一个创插件：

npm install @babel/plugin-proposal-decorators -D

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    // 将es6 转换为 es5
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }]
                        ]
                    }
                }
            }
        ]
    }
}

这次再打包应该没问题了，nice ~~

提示：这里的presets: ['@babel/preset-env']还可以做如下优化：

presets: [
  [
    "@babel/preset-env", 
    {
      "targets": "> 0.2%, not dead"
    }
  ]
]

可以按照自己的需求进行配置哟~~~

问题：当我们使用内部API时类如async以及Promise的时候，会报出ReferenceError: regeneratorRuntime is not defined的错误，解决这类问题还需借助两个插件：

npm install @babel/plugin-transform-runtime -D
npm install @babl/runtime --save  //是个补丁模块

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    // 将es6 转换为 es5
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }],
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                }
            }
        ]
    }
}

这时运行或打包时应该就不会报错了，nice ~~

问题: 使用更高级语法打包时仍不被解析：'nihao'.includes('hao')？？

解决方案需要借助另外一个插件

npm install @babel/polyfill --save //是个补丁模块

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    // 将es6 转换为 es5
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ["@babel/preset-env", {
                                // 这么写就不用手动引入 @babel/polyfill了
                                "useBuiltIns": "usage",
                                "debug": true
                            }]
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }],
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                }
            }
        ]
    }
}

再次打包可以发现includes也没解析了，nice ~~

友情提示：各个插件的版本不同使用和配置方法有所差别，请及时查看 babel 官网 参考，避免出错。

附件：
参考文档