在前端开发中，使用最广泛的编译工具之一是 Babel。它可以将 ES6/ES7/ES8/ES9 的代码转换为浏览器可执行的 ES5 代码。Babel7 是 Babel 的最新版本，于 2018 年 8 月发布。本文将介绍 Babel7 的新特性和使用。
Babel7 的新特性
@babel/cli
在 Babel7 中，引入了一个新的命令行工具 @babel/cli，它可以让我们在命令行中使用 Babel 转换代码。这比之前我们需要全局安装 Babel 的方式要方便得多。通过以下命令行安装 @babel/cli：
npm install @babel/cli --save-dev
预设的改进
在 Babel7 中，@babel/preset-env 取代了之前的 babel-preset-es2015、babel-preset-es2016、babel-preset-es2017 等预设，它可以根据目标浏览器和 node 版本自动转换代码。我们只需要在 .babelrc 中配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
-
-
-类的转换
在 Babel7 中，使用了一个新的插件 @babel/plugin-proposal-class-properties。这个插件可以让我们使用最新的 class 实例语法，如 class 的属性声明：
class Person {
name = 'James';
age = 34;
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}静态属性的转换
@babel/plugin-proposal-class-properties 也使得我们能够使用静态属性。使用这个插件，我们可以传递类属性和方法等声明的属性和方法。例如：
-- -------------------- ---- -------
----- ------ -
------ ---------- - --
----------------- ---- -
--------- - -----
-------- - ----
--------------------
-
---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
------ ------------------- -
------------------ --- -------------------- ------ --- ---------
-
-Babel7 的使用
以下是在 Babel7 中使用的一些常见功能。
命令行工具使用
使用 @babel/cli 来转换一个文件：
npx babel app.js -o app-compiled.js
使用 -w 转换文件，并在文件改变时自动转换：
npx babel app.js -w -o app-compiled.js
Node.js 编译
在 Node.js 中使用 Babel 可以将 ES6 语法转换为运行在 Node.js 中的 ES5 代码。首先安装 @babel/core 和 @babel/preset-env：
npm install @babel/core @babel/preset-env --save-dev
然后，创建一个 .babelrc 文件：
{
"presets": ["@babel/preset-env"]
}最后，在 Node.js 文件中使用 @babel/register，它会在 Node.js 运行时自动编译文件：
require("@babel/register");
require("./index.js");Webpack 集成
在 Webpack 中集成 Babel，可以配置一个使用 babel-loader 的转换步骤。首先安装 babel-loader、@babel/core 和 @babel/preset-env：
npm install babel-loader @babel/core @babel/preset-env --save-dev
然后，在 webpack.config.js 文件中定义：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--总结
Babel 是前端应用程序中必不可少的工具之一。Babel7 带来了许多新功能和有用的特性，如 @babel/cli、@babel/preset-env 及 @babel/plugin-proposal-class-properties 等。我们可以通过命令行、Node.js 和 Webpack 集成来使用 Babel。通过学习这些新特性和使用方法，我们可以更好地了解 Javascript 的发展，并在我们的项目中充分利用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8fc3c5ad90b6d04153e43