阅读 423

webpack 中引入 babel7

babel7 开始核心带了@,话不多说,走一波,试试看

1.起步

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

npm install --save @babel/polyfill -S (已经作废)

2.babel.config.js

image.png

  • @babel/core babel核心包
  • @babel/cli babel工具包
  • @babel/preset-env 包含了 es 转换的所有 plugin。预设就是一个plugin集合。*
  • @babel/polyfill 就是 es 方法的垫片,比如 es6 里面的数组有 map() 方法,但是不支持 es 的浏览器就不支持这个方法,那就用 polyfill 垫片铺平这个差异,当前,polyfill已经作废了。因为 他会将所有的东西一次性全部导入。当前有很多浏览器的新版本都开始支持 es6 里面的新特性了,如果你依旧全量导入垫片,就显得很啰嗦。此时就出来了 runtime。
  • 在配置里面 "useBuiltIns": "usage", "corejs": 3,就表示引入了 @babel/polyfill

最终配置

npm i @babel/core -D

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

npm i @babel/preset-env -D

npm i @babel/runtime -D

npm i @babel/runtime-corejs3 -D

npm i babel-loader -D

npm i core-js -D

image.png

image.png

上面这个才是最终解法。

@babel/plugin-transform-runtime比@babel/polyfill的优势如下:

  • 可以结合配置 corejs: 3 来实现按需加载,来减少打包数量。
  • 不会污染全局变量。
  • 实现了对辅助函数的服用,来解决转义语法出现的代码冗余。

@babel/runtime-corejs3 和 core-js 一定要安装的,他是配合(@babel/plugin-transform-runtime 和 @babel/polyfill)发挥作用的。而且如果没有core-js的话,MiniCssExtractPlugin.loader解析css会报错。

切记: @babel/plugin-transform-runtime 和 @babel/polyfill 不要重复使用,在很多博客上面都有重复使用的现象,一定切记。

文章分类
前端
文章标签