babel7 开始核心带了@,话不多说,走一波,试试看
1.起步
npm install @babel/core @babel/cli @babel/preset-env -D
npm install --save @babel/polyfill -S (已经作废)
2.babel.config.js
- @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
上面这个才是最终解法。
@babel/plugin-transform-runtime比@babel/polyfill的优势如下:
- 可以结合配置 corejs: 3 来实现按需加载,来减少打包数量。
- 不会污染全局变量。
- 实现了对辅助函数的服用,来解决转义语法出现的代码冗余。