webpack学习笔记04

babel-loader的学习

为什么需要babel-loader？

async function helloWorld(){
    let string = await getString()
    console.log(string)
}

function getString(){
    return new Promise((resolve, reject)=>{
        setTimeout(() => {
            resolve('hello,world!')
        }, 2000);
    })
}

export default helloWorld

如图，上述代码通过webpack打包后，不会处理以上代码。在支持es6语法的浏览器中可以正常运行。但是如果浏览器不支持es6的语法，则不能正常运行，这个时候需要通过babel-loader来把es6代码转换成浏览器能够识别的代码。

为什么需要babel-loader

//本地安装babel-loader
/*
babel-loader 在webpack解析es6  
@babel/core babel核心模块 
@babel/preset-env预设，一组babel插件集合
*/
npm install babel-loader @babel/core @babel/preset-env -D

//webpack.config.js
module.exports = {
    module:{
        rules:[
            // 引入babel-loader
            {
                test:/\.js$/,
                // 不需要通过babel-loader编译node_modules里面的js代码
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        // 预设
                        presets:['@babel/preset-env']
                    }
                }
    
            },
        ]
    }
}

regeneratorRuntime

• 安装babel-loader并配置后。打包运行后，页面不能正常显示，发现控制台报了以下错误：
  
  
  我们发现打包后的代码，原来的Promise对象被编译成了regeneratorRuntime。

regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。
regeneratorRuntime is not defined这个错误是未能正确的配置babel。

//安装regeneratorRuntime
//这个包含了regeneratorRuntime，运行时需要
npm install @babel/runtime --save
//这个插件会在需要regeneratorRuntime的地方自动require导包，编译时需要
npm install @babel/plugin-transform-runtime --save-dev

//在webpack.config.js添加@babel/plugin-transform-runtime
module.exports = {
    module:{
        rules:[
            // 引入babel-loader
            {
                test:/\.js$/,
                // 不需要通过babel-loader编译node_modules里面的js代码
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        // 预设
                        presets:['@babel/preset-env'],
                        plugins:[
                            [
                                '@babel/plugin-transform-runtime'
                            ]
                        ],
                    }
                }
    
            },
        ]
    }
}

• 关于更多babel-plugin-transform-runtime配置参考https://www.babeljs.cn/docs/babel-plugin-transform-runtime
• 安装regeneratorRuntime并添加以上代码后。再次打包运行，在不支持es6语法的浏览器中也能够正常运行了。

总结

• 本篇文章讲述了为什么要使用babel-loader以及如何使用babel-loader。
  1.webpack自带可以加载js的功能，但是只能进行js模块话打包。但是并不能转换js代码。
  2.在一些浏览器比较低的版本中，如果不支持es6的语法，这个时候就需要使用babel-loader把js代码进行转换，转换成低版本浏览器能识别的代码。还介绍了regeneratorRuntime用于代码转换后兼容es6的一些语法。
• 代码地址:点击跳转码云地址
• 后续会学习更新webpack代码分离的方法。
• 学习阶段，如有不对和不足，欢迎大家交流。