第一步:

全局安装babel-cli

npm i -g babel-cli

第二步:

安装bel-preset-env、babel-runtime、babel-plugin-transform-runtime

npm i bel-preset-env babel-runtime babel-plugin-transform-runtime --save-dev

每年每个 preset 只编译当年批准的内容。 而 babel-preset-env 相当于 es2015 ,es2016 ,es2017 及最新版本。(官方说明)

babel 几乎可以编译所有时新的 js 语法,但对于 APIs 来说却并非如此。例如: Promise、Set、Map 等新增对象,Object.assign、Object.entries等静态方法。因此社区出现了两种方案 :一种是babel-polyfill ,另外一种是babel-runtime+babel-plugin-transform-runtime

babel-polyfill 的做法是将全局对象通通污染一遍。
babel-runtime 的做法是自己手动引入 helper 函数

也许有人会奇怪,为什么会有两个runtime插件,其实是有历史原因的:刚开始开始只有babel-runtime插件,但是用起来很不方便,在代码中直接引入helper函数,意味着不能共享,造成最终打包出来的文件里有很多重复的helper代码。所以,Babel又开发了babel-plugin-transform-runtime,这个模块会将我们的代码重写,如将Promise重写成_Promise(只是打比方),然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

在使用@babel/plugin-transform-runtime之前需要安装@babel/runtime,因为前者依赖后者。

第三步:

配置.babelrc

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

第四步:

执行babel脚本

babel xxx.js -o xxx.js

记得要微笑
1.9k 声望4.5k 粉丝

知不足而奋进,望远山而前行,卯足劲,不减热爱。