第一步:
全局安装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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。