webpack中使用babel处理es6语法

时间:2021-05-20 20:48:28
index.js
const arr = [
  new Promise(()=>{}),
  new Promise(()=>{})
]; arr.map(item => {
  console.log(item);
})
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html template</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

运行npx webpack(用dev-server打包放在了缓存里面,看不到最终的打包内容)。看到打包生成的main.js的最后几行,index里面写的js,原封不动的打包到了main.js里面。这个时候浏览器中运行,可以打印出promise对象。好像是没问题的,这是什么原因呢,这是因为chrome更新比较快,es6里面很多东西,他都做了实现,所以直接在chrome浏览器写es6语法没问题,但是比如在ie或者更新没那么快的浏览器,,,就会报错。。。

这个时候需要接住babel,https://babeljs.io/。
先安装两个包
npm install --save-dev babel-loader @babel/core
一个是帮助webpack打包用的工具,一个是babel的核心库

webpack配置babel相关

module.exports = {
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }]
  }
}
再继续安装
npm install @babel/preset-env --save-dev
为什么要安装这个模块,当我们使用babel-loader处理js文件的时候,实际上这个babel-loader只是webpack和babel做通信的一个桥梁,用了他之后,webpack和babel做了打通,但实际上,babel-loader并不会帮助我们把es6语法翻译成es5语法,还需要借助一些其它的模块才能够帮助我们把es6语法翻译成es5语法。babel/preset-env就是这样的一个模块,这里面包含了所有把es6转化成es5的规则。装好之后,还需要在webpack里面配置一下
module.exports = {
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options:{
        "presets": ["@babel/preset-env"]
      }
    }]
  }
}
再使用npx webpack,看转化后的main.js,发现es6的语法转化成了es5的语法。但是光做到这点不够。为什么呢?因为比如像Promise这样新的语法变量,包括数组里面这个map方法,在低版本的浏览器里,实际上还是不存在的。虽然了语法翻译,但只翻译了一部分。还有一些对象或者函数在一些低版本的浏览器里面还是没有的。
所以不仅要用preset-env翻译es6,还需要将缺失的语法补充到浏览器里,这个模块就是babel/polyfill。然后把polyfill引入到业务代码的最顶部
index.js
import "@babel/polyfill";

const arr = [
  new Promise(()=>{}),
  new Promise(()=>{})
]; arr.map(item => {
  console.log(item);
});
处理好后,再运行,会发现原来打包好的main是28kb,现在是534kb。这多出来的内容就是polyfill弥补的内容,所以main.js一下子就变的很大。那么我不想要这么大,我只需要你在我需要补充语法的时候出来相应处理的代码就可以。

安装

 npm install core-js --save-dev
 
module.exports = {
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options:{
        presets: [['@babel/preset-env',{
        /**
        * 当我做polyfill填充的时候,去加一些低版本特性的时候,我不是把所有特性都加进来
        * 是根据你的业务代码来决定要加什么
        */
        useBuiltIns: 'usage',
        corejs: 3
        }]]
      }
    }]
  }
}
主页打包出来的main就124kb,小了很多
当然preset也可以配置一些额外的参数
module.exports = {
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options:{
        presets: [['@babel/preset-env',{
        /**
        * 意思是我的这个项目,打包会运行在>67这个版本的chrome浏览器下
        * 比如chrome浏览器在67版本以上对es6语法支持很好了,就不需要翻译
        */
        targets: {
          chrome: "67",
        },
        /**
        * 当我做polyfill填充的时候,去加一些低版本特性的时候,我不是把所有特性都加进来
        * 是根据你的业务代码来决定要加什么
        * @babel/polyfill,放在js入口
        */
        useBuiltIns: 'usage',
        corejs: 3
        }]]
      }
    }]
  }
}
再运行npm run bundle,发现main.js重新变成了28.8kb。
这种方案不一定所有场景都适用,在开发一个第三方模块的时候,这个时候用polyfill注入是有问题的,因为这是时候注入会以全局变量的方式注入,会污染到全局环境。所以我们在打包UI组件库或者类库的时候,需要换一种打包的方式。去除index的pollfile。webpack也不做presets的配置了
首先安装
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
index.js
// import "@babel/polyfill";

const arr = [
  new Promise(()=>{}),
  new Promise(()=>{})
]; arr.map(item => {
  console.log(item);
})
module.exports = {
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options:{
        "plugins": [["@babel/plugin-transform-runtime",{
        "absoluteRuntime": false,
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
        }]]
      }
    }]
  }
}
再强调一遍,如果我们写的只是业务代码,在配置的时候只要配置presets,同时引入pollfill就可以了。如果你写的是一个库项目代码的时候,这个时候要使用babel/plugin-transform-runtime。这个时候可以有效的避免presets,或者说是pollfill的问题。pollfile会污染全局环境。但是plugin-transform-runtime会以闭包的方式注入。这样写类库的时候是更好的方式。
另外补充一个知识点,如果我们认真的去配置babel相关的配置,会发现非常的长。我们可以在根目录新建一个文件。叫.babelrc。然后把options对象拿出来放到.babelrc里面。然后删除babel配置的option
.babelrc
{
  "plugins": [["@babel/plugin-transform-runtime",{
  "absoluteRuntime": false,
  "corejs": 2,
  "helpers": true,
  "regenerator": true,
  "useESModules": false
  }]]
}
webpack.config.js
module.exports = {
  module: {
    rules:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }]
  }
}
这样执行起来 npm run bundle 不会有任何问题