Babel是一个广泛使用的JavaScript编译工具，它可以把ES6以上版本的代码编译成ES5代码，以便在老的浏览器和环境中运行。随着JavaScript生态系统的快速发展，Babel也在不断更新和升级，发布了新版本Babel 7。本文将介绍Babel 7的新特性和使用方法。
Babel 7的新特性
支持配置文件模块导入
在Babel6中，我们需要使用require引入一个配置文件，比如.babelrc文件。但是在Babel7中，我们可以使用ES6模块导入配置文件：
-- ----------- -------------- - - -------- --------------------- -
这样我们引入配置文件就可以直接使用ES6的import语法：
-- --------------- ------ ------- ---- ------------ ------ ------- - ------- -
新的文件命名规则
Babel 7中对文件命名规则进行了改进，现在可以使用babel.config.json来代替.babelrc，同时也支持babel.config.js和babel.config.cjs。
静态配置文件支持JavaScript
Babel 7现在支持使用JavaScript文件(.js)作为配置文件(babel.config.js)，这样我们就可以在配置文件中直接写JavaScript代码了。
模块转换速度更快
Babel 7针对尚未支持ES6或更高版本的平台进行了优化，转换速度更快了。同时，还提升了TypeScript的支持。
使用Babel7
安装Babel7
首先我们需要使用npm来安装Babel7：
--- ------- ----------- ---------- ----------
配置文件
新建一个babel.config.js文件，配置Babel转换的规则：
-------------- - -
-------- -
--------------------
---------------------
--
-------- -
----------------------------------
-----------------------------------------
-
-上面的配置文件中，presets指定了Babel转换代码所需要转换的规则，比如@babel/preset-env用于转换ES6代码成ES5代码；plugins则是用于特定的语法和特性的转换，比如@babel/plugin-transform-runtime用于将ES6的API转换成低版本的兼容代码，@babel/plugin-proposal-class-properties用于支持类的属性声明。
转换代码
使用Babel转换代码非常简单，我们可以在命令行中输入：
--- ----- --- --------- ----
上面的命令表示把src目录下的代码转换成ES5代码并放到dist目录下。
我们也可以在package.json文件中配置scripts命令，方便执行：
-
---------- -
-------- ------ --- --------- -----
-
-这样，我们只需要在命令行中输入npm run build就可以将代码转换成ES5代码了。
结论
Babel 7为我们提供了更加方便、快捷、高效的JavaScript编译工具。不仅支持更多的配置文件类型和静态配置，同时性能也有所提升，值得我们使用和学习。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671c547c9babaf620fb04861