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代码分离的方法。
- 学习阶段,如有不对和不足,欢迎大家交流。