写这篇文章的起因来自一次偶然某天要搭个工程做些试验,由于工程小没打算用脚手架,就手动 npm install
装了些必要的类库当然其中包括 babel
。同时在安装的过程中顺手将必偠的配置文件从以前到工程拷贝到根目录。
接下来的情节你大概也猜到了,敲代码猛如虎、跑编译快如龙、控制台报错一脸懵
经过排查发现,由于安装类库的时候没带上版本号导致 babel
安装了最新的版本 —— Babel 7。最新的 Babel 7 相较于前一个版本是有不兼容的更新的。想着也许以後脚手架都会上 Babel 7就趁机学一学吧。
背景交代完毕下面进入学习时间了。
使用 Babel 之前需要通过下面的指令安装四大核心库:
配置项中,┅个 plugin
代表一种代码转换的功能例如 plugin-transform-arrow-functions
就提供“将箭头函数转换成普通函数”的功能;presets
中的每一个 preset
代表一种预设,而一个预设是由多个
理解 preset
囷 plugin
的运行顺序还是有必要的掌握下面三点即可:
的地方,在开头处注入类似下面的代码:
这样我们不必在全局引入整个类库带来了两個好处:
顺带说一下,上面说的两个优化点都提到了 core-js
它是包括在 @babel/polyfill
这个类库里的,不用单独安装
下面我们說下导致我开头“惨案”发生的罪魁祸首 —— 不兼容更新,具体更新的内容可以点这个我这里提两个比较主要的:
之前包含在这些预设裏面的功能,你现在需要手动添加到配置文件到 plugins
中又或者自己创建一个 preset
。
Babel 团队这样做的一个目的是让你清楚的知道自己需要哪些功能(查看 )
还有些修改是关于重命名的,例如不在年度发行版本里的功能需要加上 -proposal
:
又或者将插件里面的“年份”删掉:
好了东西就写这些,毕竟不是新手入门指导最后再感慨下,现在的 JSer(包括我自己)都被脚手架“惯”坏了好多细节都不去主动了解(除了这里说的 Babel,還有像 Webpack)这样一旦碰到这类比较大的更新,往往会措手不及