webpack之配置es6转换成es5

webpack之配置es6转换成es5

为什么要将代码中的es6语法转换成es5语法呢？这是因为有些浏览器无法识别es6语法。而webpack在不借助babel的情况下，只能对js进行打包处理，无法将es6语法转换成es5语法，这就需要我们借助bable-loader去实现es6语法转换成es5语法

1. 下载需要的包

// 下载需要的babel-loader
yarn add babel-loader @babel/core @bable/preset-env

// babel-loader：在webpack里应用babel解析es6的桥梁
// @babel/core babel的核心模块
// @bable/preset-env babel预设，一组babel插件的集合

2. webpack.config.js 的配置

module: {
    rules: [
        {
            test: '/\.js$/',
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }
    ]
}

3. 如果js模块代码中拥有await、async 语法

如果js中有await、async语法，我们需要额外下载两个包用来兼容该写法

// 需要下载的包
yarn add @babel/runtime @babel/plugin-transform-runtime
// @babel/runtime 该包用来兼容es6中的await和async写法，babel会生成一个regeneratorRuntime函数，该函数是webpack打包生产的全局辅助函数，用来兼容await和async写法
// @babel/plugin-transform-runtime 是个插件，该插件会在需要regeneratorRuntime函数的时候自动导入包

// webpack.config.js 配置
module: {
    rules: [
        {
            test: '/\.js$/',
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: [
                        [           // 这里再定义数组的原因是因为可以在数组中配置插件的一些信息
                            '@babel/plugin-transform-runtime'
                        ]
                    ]
                }
            }
        }
    ]
}