如何让Babel 6编译为ES5 JavaScript？

Question

我已经安装了最新版本的babel，目前是6.4.0。 我创建了一个名为myclass.js的文件，其中包含以下代码。

class MyClass {
    constructor(name) {
        console.log("I am a MyClass object .. ", name);
    }
}

var myclass = new MyClass('1234');

创建完类之后，我会在命令行中执行以下操作。

$> babel ./src/myclass.js --out-file ./out/app.js

我希望我的 app.js 文件包含经过 es5 编译的 JavaScript 代码，但它实际上和 myclass.js 文件中的代码完全相同。有什么可能会导致这种情况发生？

- mattwallace

---

适用于我，你的.babelrc看起来怎么样？ - madox2

可能是重复的问题：Babel文件在复制时没有被转换。 - CodingIntrigue

Answer 1

你不需要告诉Babel目标要编译到ES5，而是选择必要的预设和插件来为你完成。例如，如果你使用es2015预设，它将把ES6代码编译成兼容ES5的代码，你无需指定“目标”。

下面的指南将带领您使用Babel将ES6代码转换为可以在支持ES <= 5的环境中运行的代码。

---

0. Babel 5版本以后的API变化说明

在 Babel 6文档 中：

 

babel包不再存在。之前，它是整个编译器和所有转换加上一堆CLI工具，但这导致下载过大且有点令人困惑。现在我们将其拆分为两个单独的包：babel-cli和babel-core。

还有：

 

Babel 6没有任何默认转换，所以当您在文件上运行Babel时，它将只是将其打印回给您而没有任何更改。

______

1. 安装babel-cli

首先，按照文档中的步骤，您需要安装babel-cli：

$ npm install babel-cli

2. 在.babelrc文件中定义预设

第二步，您需要在.babelrc (文档) 中明确定义您想要Babel使用的 预设(presets)。例如，对于ES6+特性，请使用env预设。

...一个智能预设，允许您使用最新的JavaScript而不需要微观管理目标环境所需的语法转换（以及可选的浏览器polyfills）。

安装它：

npm install @babel/preset-env

然后在你的.babelrc中声明它：

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

注意: 如果您使用的是 Babel 7.x，建议使用“项目范围配置” (babel.config.js) (文档)，它可以“广泛应用，甚至允许插件和预设轻松地应用于 node_modules 中的文件或符号链接包中的文件”。

现在按照您的示例运行 babel 命令即可：

$> babel ./src/myclass.js --out-file ./out/app.js

或者，使用像webpack、rollup或browserify这样的打包工具，配合它们各自的Babel插件。

- sdgluck

---

这个回答包含有用的信息，但并没有回答问题：它没有解释如何编译到 ES5。 - Koert van Kleef

我改口了。显然，es2015预设是Babel生成兼容es5输出的方法。我在摸索时回复了你。是我自己太困惑还是这个命名方式有问题？ES2015 = ES6，所以他们创建了一个目标为ES5的预设为什么叫做“ES2015”？ - Koert van Kleef

预设是定义可用语言特性的内容，因此这些名称都指向它们。如果说“预设：ES5”，那么你/Babel怎么知道应用程序使用的是ES6呢？所以 es2015 意味着您可以使用 ES6 特性，并且它们将被转译。 - sdgluck

@KoertvanKleef 不需要明确指定目标为ES5；预设本质上是一组要使用的插件列表，它们都会自动针对ES5环境进行目标设置。 :-) - sdgluck

为什么这个答案没有被接受？它比文档更清晰。文档从未提到过 .babelrc 和预设步骤。在这里查看：https://babeljs.io/docs/usage/cli/ +1。 - HalfWebDev

Answer 2

使用babel和nodejs（并使用CLI）的确切答案：

安装Babel和预设

npm install babel-cli babel-preset-es2015

使用npx执行

npx babel  ./src/myclass.js --out-file ./out/app.js --presets babel-preset-es2015

注意

当babel-cli被全局安装时，可能会出现无法工作的情况。因此，这是我的最终解决方案。

- Francesco Capodanno

Answer 3

Babel通常不会针对特定标准进行目标设置（或者你通常不希望它这样做），而是以某种方式针对你传递的具体浏览器版本进行目标设置 - 明确地如"targets": { "chrome": 70}，或者通过不同的隐式方式，例如"targets": ">0.25%"（市场份额）- 在配置文件（package.json、.babelrc或babel.config.js）中。为了实现这一点，Babel从许多其他项目（如browserlist）获取有关浏览器使用和功能支持的信息。

然后，它将你的代码转换成尽可能低的ECMA功能集，并需要预设（一组插件，比如preset-env）定义的模拟实现。最终，它将变成在你想要运行你的代码的浏览器中可以运行的代码。

例如，如果您的目标浏览器市场份额>15％，那么此代码 - let a = 5; - 将保持不变，因为这些流行的浏览器很可能是最新版本的 Chrome，完美支持let。另一方面，如果您指示您还想支持IE8，则let a = 5; 变成 var a = 5;，因为现在Babel试图使您的代码适用于不知道let的IE8。好吧，你明白了。

还要重要的是要理解，Babel并不是万能药-它不会添加除ECMAScript规范以外的任何内容。例如，它不提供浏览器API的polyfill（fetch等）。

如果您没有给出任何指示，那么根据documentation中所述：

顺便说一下，如果没有指定目标，则@babel/preset-env将默认转换所有ECMAScript 2015+代码。我们不建议以这种方式使用preset-env，因为它没有利用其针对特定浏览器的能力。

- curveball