0
点赞
收藏
分享

微信扫一扫

webpack5学习与实战-(六)-babel-loader解析js文件

陬者 2022-02-06 阅读 42

在之前,使用css-loader来解析过css文件。那babel-loader则是用来解析js文件的。这是因为js的版本一直在更新,不断引入新的写法,但是浏览器的更新滞后,有些浏览器还不支持。所以就需要用babel-loader来进行转化成浏览器支持的写法。

一,不使用babel-loader的时候

我们在代码中写:

function getString(){
   return new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('hello world')
    },2000)
   })
}
async function helloworld(){
    let string=await getString()
    console.log(string)
}
export default helloworld

这种es6的语法的时候。当我们直接打包编译出来,在浏览器中运行的代码是这样的(这里实际上时mapsource映射的源文件。实际上打包出来的代码也是这样):
在这里插入图片描述
可以看到,它并没有转化成es5,当浏览器不支持es5时,就会发生报错。所以,我们需要一个loader,来把es6的语法转化为es5这种浏览器通用的语法。

二,使用babel-loader

第一步:安装相关依赖

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

还需要安装处理async和await的包:

npm install -D @babel/runtime @babel/plugin-transform-runtime

第二步,配置webpack

{
  test: /\.js$/,
     use: {
       loader: 'babel-loader',
       options: {
         presets: ["@babel/preset-env"],
         plugins: [["@babel/plugin-transform-runtime"]],
         //开启缓存
         cacheDirectory:true
       },
     },
     exclude: /node_modules/
   }

这样之后,就能够把es6的代码转化为es5的代码了。

举报

相关推荐

0 条评论