Babel7 的新特性及使用教程-JavaScript中文网-JavaScript教程资源分享门户

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 文件中添加以下内容：

// javascriptcn.com 代码示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

上面的配置中，我们指定了目标环境为 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

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Tom",
  age: 18
};

转换后的代码：

"use strict";

var person = {
  name: "Tom",
  age: 18
};

4. 支持 JSX

import React from "react";

const App = () => <div>Hello, World!</div>;

转换后的代码：

// javascriptcn.com 代码示例
"use strict";

var _react = _interopRequireDefault(require("react"));

var _jsxFileName = "/path/to/component";

const App = () => _react.default.createElement("div", {
  __source: {
    fileName: _jsxFileName,
    lineNumber: 3
  },
  __self: undefined
}, "Hello, World!");

5. 支持动态导入

const loadModule = async () => {
  const module = await import("./module");
  module.init();
};

转换后的代码：

// javascriptcn.com 代码示例
"use strict";

var loadModule = function () {
  var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
    var module;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return Promise.resolve().then(function () {
              return _interopRequireWildcard(require("./module"));
            });

          case 2:
            module = _context.sent;
            module.init();

          case 4:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function loadModule() {
    return _ref.apply(this, arguments);
  };
}();

总结

Babel7 带来了很多新的特性和改进，使得我们能够更加方便地使用最新的 JavaScript 语法。本文介绍了 Babel7 的新特性及使用教程，并提供了示例代码，希望能够帮助大家更好地使用 Babel7。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657d7f3ed2f5e1655d857720