Babel转译ES2020标准的特性

背景

在使用PhotoSwipe的图片浏览组件时，发现在新版本的浏览器中可以正常运行，在旧版本的浏览器中就报错。通过不断的二分法版本测试，发现Chrome 80及以上版本的浏览器是没问题的，比它旧的Chrome浏览器会报错。查看了PhotoSwipe引用到的源码，并且翻查了Chrome浏览器的更新说明和v8引擎的发布说明后，发现需要背锅的是Optional chaining和Nullish coalescing这两个ES2020的新特性，需要用Babel将这些源码转译为旧版本浏览器支持的源码。

环境

# 操作系统
CentOS Linux release 8.1.1911 (Core)

# 已经安装的node版本
node -v
v18.16.1

创建transpile的node项目

mkdir transpile
cd transpile
npm init

全局安装Babel

npm install @babel/cli -g
npm install @babel/core -g

# 查看Babel版本
[root@cloud ~]# babel -V
7.22.5 (@babel/core 7.22.5)

安装所需的babel插件

# Optional chaining转译插件
# https://babeljs.io/docs/babel-plugin-transform-optional-chaining
npm install --save-dev @babel/plugin-transform-optional-chaining

# Nullish coalescing转译插件
# https://babeljs.io/docs/babel-plugin-transform-nullish-coalescing-operator
npm install --save-dev @babel/plugin-transform-nullish-coalescing-operator

编辑babel.config.json文件，内容如下

{
  "plugins": [
    "@babel/plugin-transform-nullish-coalescing-operator", 
    "@babel/plugin-transform-optional-chaining"
  ]
}

这个babel.config.json也是处于transpile目录下

转译

# 新建src目录，将待转译的js文件放在这个目录里面
mkdir src

# 对src目录中的js文件进行转译，输出到dist目录
babel src --out-dir dist

压缩

# 安装babel压缩插件
npm install babel-minify --save-dev

# 压缩文件，需要使用--mangle.keepClassName选项
# 以input.js为例，--out-file选项指定压缩后的文件为input.min.js
./node_modules/.bin/minify input.js --out-file input.min.js --mangle.keepClassName