Babel 7 不再需要.babelrc 的使用方法-JavaScript中文网-JavaScript教程资源分享门户

Babel 7 不再需要.babelrc 的使用方法

Babel 是一个 JavaScript 编译器，主要用于将 ES6/ES7 代码转换成 ES5 代码，以使得现代浏览器和旧版浏览器都能够支持同一个代码库。Babel 7 是 Babel 的最新版本，它带来了很多新的特性和改进，其中一个重要的变化是不再需要使用 .babelrc 文件来配置 Babel。

在 Babel 6 中，我们需要在项目根目录下创建 .babelrc 文件，并在其中指定需要转换的代码以及转换规则。这样，Babel 才能够正确地将 ES6/ES7 代码转换成 ES5 代码。然而，在 Babel 7 中，我们可以直接在代码中使用 @babel/preset-env 来指定转换规则，而不需要再使用 .babelrc 文件。

具体来说，我们需要在项目中安装 @babel/core 和 @babel/preset-env 两个依赖：

npm i -D @babel/core @babel/preset-env

然后，在 package.json 文件中添加以下配置：

-- -------------------- ---- -------
-
  -------- -
    ---------- -
      -
        --------------------
        -
          ---------- -
            --------- -----
            ----- ----
          -
        -
      -
    -
  -
-

在这个配置中，我们使用了 @babel/preset-env 来指定转换规则，并且设置了 targets 属性来指定需要支持的浏览器版本。这样，Babel 就能够根据指定的浏览器版本，自动选择转换规则，从而生成适合所有指定浏览器的代码。

需要注意的是，虽然我们不再需要使用 .babelrc 文件来配置 Babel，但是我们仍然可以在项目中创建 .babelrc 文件来覆盖 package.json 中的配置。这样，我们可以在不同的项目中使用不同的转换规则，以适应不同的需求。

总结

Babel 7 带来了很多新的特性和改进，其中一个重要的变化是不再需要使用 .babelrc 文件来配置 Babel。现在，我们可以直接在代码中使用 @babel/preset-env 来指定转换规则，从而生成适合所有指定浏览器的代码。这样，我们可以更加方便地使用 Babel，并且在不同的项目中使用不同的转换规则，以适应不同的需求。

示例代码

// src/index.js
const sum = (a, b) => a + b;

console.log(sum(1, 2));

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

-- -------------------- ---- -------
-- ------------
-
  ------- -------------
  ---------- --------
  -------- -
    ---------- -
      -
        --------------------
        -
          ---------- -
            --------- -----
            ----- ----
          -
        -
      -
    -
  --
  ------------------ -
    -------------- -----------
    -------------------- ----------
  -
-

// dist/index.js
"use strict";

var sum = function sum(a, b) {
  return a + b;
};

console.log(sum(1, 2));

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/663d7566d3423812e4b7c61b