Babel 都 7 了，还不来了解下？

写这篇文章的起因来自一次偶然。某天要搭个工程做些试验，由于工程小，没打算用脚手架，就手动 npm install 装了些必要的类库，当然其中包括 babel。同时在安装的过程中，顺手将必要的配置文件从以前到工程拷贝到根目录。

接下来的情节，你大概也猜到了，敲代码猛如虎、跑编译快如龙、控制台报错一脸懵。

经过排查发现，由于安装类库的时候没带上版本号，导致 babel 安装了最新的版本 —— Babel 7。最新的 Babel 7 相较于前一个版本，是有不兼容的更新的。想着也许以后脚手架都会上 Babel 7，就趁机学一学吧。

背景交代完毕，下面进入学习时间了。

使用 Babel 之前，需要通过下面的指令安装四大核心库：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

然后在工程根目录创建一个配置文件 babel.config.json：

{"presets": [["@babel/env",{"targets": {"edge": "17","firefox": "60","chrome": "67","safari": "11.1",},"useBuiltIns": "usage",}]],"plugins": ["plugin-transform-arrow-functions"]
}

配置项中，一个 plugin 代表一种代码转换的功能，例如 plugin-transform-arrow-functions 就提供“将箭头函数转换成普通函数”的功能；presets 中的每一个 preset 代表一种预设，而一个预设是由多个 plugin 构成。

理解 preset 和 plugin 的运行顺序还是有必要的。掌握下面三点即可：

plugins 比 presets 先运行
plugins 里面的 plugin 是顺序执行
presets 里面的 preset 是逆序执行

Babel 7 对 Polyfill 也进行了优化。第一个优化是在使用上，现在你只要在 env 这个 preset 里面设置 "useBuiltIns": "usage"，Babel 就会根据你设置的 targets，扫描所有需要转换的代码，自动找出需要 polyfill 的地方，在开头处注入类似下面的代码：

require('core-js/modules/xxxx') // xxx 代表需要的 polyfill

这样我们不必在全局引入整个类库，带来了两个好处：

不会污染全局变量
减小了整个转换后的代码体积

第二个优化，是将提案（proposal）级别的 polyfill 从 @babel/polyfill 中移除了。如果你想使用这些 polyfill，需要从 core-js 中单独引入（具体引入方法）。

顺带说一下，上面说的两个优化点都提到了 core-js，它是包括在 @babel/polyfill 这个类库里的，不用单独安装。

下面我们说下导致我开头“惨案”发生的罪魁祸首 —— 不兼容更新，具体更新的内容可以点这个链接。我这里提两个比较主要的：

Yearly Preset Deprecations
Stage Preset Deprecations

这两个 Preset Deprecations 导致以下的 presets 都失效了：

babel-preset-es201x
babel-preset-latest
babel-preset-stage-x

之前包含在这些预设里面的功能，你现在需要手动添加到配置文件到 plugins 中，又或者自己创建一个 preset。

Babel 团队这样做的一个目的是让你清楚的知道自己需要哪些功能（查看 Plugin 列表）。

还有些修改是关于重命名的，例如不在年度发行版本里的功能需要加上 -proposal：

@babel/plugin-transform-function-bind → @babel/plugin-proposal-function-bind (Stage 0)
@babel/plugin-transform-class-properties → @babel/plugin-proposal-class-properties (Stage 3)

又或者将插件里面的“年份”删掉：

@babel/plugin-transform-es2015-classes → @babel/plugin-transform-classes

好了，东西就写这些，毕竟不是新手入门指导。最后再感慨下，现在的 JSer（包括我自己）都被脚手架“惯”坏了，好多细节都不去主动了解（除了这里说的 Babel，还有像 Webpack），这样一旦碰到这类比较大的更新，往往会措手不及。

拓展阅读

Upgrade to Babel 7

Babel 都 7 了，还不来了解下？相关推荐

不逼自己一把都不知道自己还能这么优秀(小鹅通学习记录大批量队列同步)
不逼自己一把都不知道自己还能这么优秀-小鹅通学习记录大批量队列同步实战日志前言一.编程语言介绍 1.php是世界上最好的语言 2.第三方API对接的苦恼 3.为什么说好的项目进度表都是画饼二.炫 ...
听说，霸都.NET技术社区准备搞线下聚会了？
.NET Core实战项目交流群日常交流嗨,你听说了没有?霸都.NET技术社区准备搞线下聚会了! 啥时候的事情啊? 最近才知道的消息啊! 那你是从哪里知道的消息呢? .NET Core项目实战交流 ...
比淘宝还藏龙卧虎的线下手机卖场，靠什么走天下？
本文讲的是比淘宝还藏龙卧虎的线下手机卖场,靠什么走天下?,每个城市,都会有一个手机卖场,品牌专卖店.渠道商城.运营商门店.私人摊点.二手交易方.配件零售商--鱼龙混杂地挤在一起. 电商还欠发达的时候, ...
通用权限管理系统组件 (GPM - General Permissions Manager) 权限管理以前我们都是自己开发，可是到下一个系统又不适用，又改，加上人员流动大，管理很混乱...
为什么80%的码农都做不了架构师?>>> 权限管理以前我们都是自己开发,可是到下一个系统又不适用,又改,加上人员流动大,管理很混乱 Ψ吉日嘎拉采用通用权限管理系统,这些烦恼就 ...
【Windows系统相关问题记录一】在原有Win10 EFI分区还在的前提下，使用DiskGenius误删EFI文件夹
问题在原有Win10 EFI分区还在的前提下,使用DiskGenius误删EFI文件夹,导致开机无法引导. 解决办法参考这篇文章的做法,但是只用了其中一部分步骤,因为能解决我的问题在此特作记录,仅 ...
无语！你竟然连CompletableFuture都不知道，还天天说在jdk8原地踏步~
欢迎关注方志朋的博客,回复"666"获面试宝典来源:https://urlify.cn/ayaMBb 这篇文章介绍 Java 8 的 CompletionStage API和它的 ...
最近面试了一位4年的Java，什么都不知道！还自认为很牛逼...
最近看了很多简历,很多候选人年限不小,但是做的都是一些非常传统的项目,想着也不能通过简历就直接否定一个人,何况现在大环境越来越难,大家找工作也不容易,于是就打算见一见. 在沟通中发现,由于年限不小, ...
换人！这些算法都不会还搞什么操作系统
此篇文章带你梳理一下操作系统中都出现过哪些算法: 进程和线程管理中的算法进程和线程在调度时候出现过很多算法,这些算法的设计背景是:当一个计算机是多道程序设计系统时,会频繁的有很多进程或者线程来同时竞 ...
这届年轻人连穷都不怕，还会怕冷？
(图片来源于网络) 文 | 易不二来源 | 螳螂财经(ID:TanglangFin) 当代年轻人的操作骚起来,让人十分震惊. 这不,在刚刚结束的淘宝双十二里,根据数据统计,活动的前1小时,60万条打 ...

Babel 都 7 了，还不来了解下？

Babel 都 7 了，还不来了解下？相关推荐

最新文章

热门文章