Babel 是一个 JavaScript 编译器，它能够将最新的 JavaScript 语法转换成浏览器或者 Node.js 环境可识别的代码。Babel7 是 Babel 的最新版本，它带来了很多新的特性和改进，本文将为大家介绍 Babel7 的新特性及使用教程。
Babel7 的新特性
1. 零配置
Babel7 引入了一个新的工具 @babel/cli，它支持零配置，只需要在命令行中输入 npx babel src -d lib，即可将 src 目录下的代码转换成 lib 目录下的代码，无需任何配置文件。
2. 自动 polyfill
Babel7 使用了 @babel/preset-env，它能够根据目标环境自动添加必要的 polyfill，无需手动添加。
3. 支持 TypeScript
Babel7 支持直接编译 TypeScript，只需安装 @babel/preset-typescript 并在配置文件中添加即可。
4. 支持 JSX
Babel7 默认支持 JSX，只需安装 @babel/preset-react 并在配置文件中添加即可。
5. 支持动态导入
Babel7 支持动态导入，即 import()，它能够在运行时动态加载模块，提高了应用的性能。
Babel7 的使用教程
1. 安装
npm install @babel/core @babel/cli @babel/preset-env --save-dev
2. 配置
在项目根目录下创建 .babelrc 文件，并添加以下内容：
{
"presets": [
"@babel/preset-env"
]
}3. 转换代码
在命令行中输入以下命令，即可将 src 目录下的代码转换成 lib 目录下的代码：
npx babel src -d lib
4. 高级配置
如果需要更加高级的配置，可以在 .babelrc 文件中添加以下内容：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
--
----------------------
--------------------------
--
---------- -
------------------------------------------
---------------------------------
-
-上面的配置中，我们指定了目标环境为 Chrome 58 和 IE 11，同时添加了 React 和 TypeScript 的支持，还添加了两个插件：@babel/plugin-proposal-class-properties 和 @babel/plugin-transform-runtime。
示例代码
1. 转换箭头函数
const sum = (a, b) => a + b;
转换后的代码：
"use strict";
var sum = function sum(a, b) {
return a + b;
};2. 自动添加 polyfill
const arr = [1, 2, 3]; arr.includes(2);
转换后的代码：
"use strict";
require("core-js/modules/es.array.includes");
var arr = [1, 2, 3];
arr.includes(2);3. 支持 TypeScript
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - ----- ------- ------ - - ----- ------ ---- -- --
转换后的代码：
"use strict";
var person = {
name: "Tom",
age: 18
};4. 支持 JSX
import React from "react"; const App = () => <div>Hello, World!</div>;
转换后的代码：
-- -------------------- ---- -------
---- --------
--- ------ - -----------------------------------------
--- ------------ - ---------------------
----- --- - -- -- ----------------------------------- -
--------- -
--------- -------------
----------- -
--
------- ---------
-- ------- ---------5. 支持动态导入
const loadModule = async () => {
const module = await import("./module");
module.init();
};转换后的代码：
-- -------------------- ---- -------
---- --------
--- ---------- - -------- -- -
--- ---- - -------------------------------------------------- --------- -
--- -------
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ------------------------------- -- -
------ ---------------------------------------------
---
---- --
------ - --------------
--------------
---- --
---- ------
------ ----------------
-
-
-- ---------
----
------ -------- ------------ -
------ ---------------- -----------
--
----总结
Babel7 带来了很多新的特性和改进，使得我们能够更加方便地使用最新的 JavaScript 语法。本文介绍了 Babel7 的新特性及使用教程，并提供了示例代码，希望能够帮助大家更好地使用 Babel7。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657d7f3ed2f5e1655d857720