如何将 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 文件具有完全相同的代码。我错过了什么可能导致这个问题？

Answer 1

你不需要告诉 Babel 以 ES5 为目标，你可以选择必要的预设/插件来为你做到这一点。例如，如果您使用

es2015

预设，这会将 ES6 代码编译为 ES5 兼容代码。您没有指定“目标”。

下面的指南将引导您使用 Babel 将 ES6 代码转换为可以在支持的环境中运行的代码 <= ES5.

---

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

(docs) 并显式定义您希望 Babel 使用的 presets。例如，对于 ES6+ 功能，请使用

env

预设。

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

安装：

npm install @babel/preset-env

然后在你的

.babelrc

中声明它：

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

注意：如果您使用 Babel 7.x，您可能更喜欢使用“项目范围的配置”（

babel.config.js

）（docs），它“广泛应用，甚至允许插件和预设轻松应用于文件”在 node_modules 或符号链接包中”。

______

3.奔跑吧

babel

现在运行示例中的

babel

命令应该可以工作：

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

或者，使用诸如 webpack、rollup 或 browserify 之类的捆绑器及其各自的 babel 插件。

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 时可能无法工作。所以这是我最终的解决方案

Answer 3

Babel 不通常针对（或者你通常不希望它针对）特定标准，相反，它所做的是针对你以某种方式传入的具体浏览器版本 - 显式地像

"targets": { "chrome": 70}

或隐式地以不同的方式，例如，像

"targets": ">0.25%"

（市场份额） - 在配置文件（package.json、.babelrc 或 babel.config.js）中。为了实现这一点，Babel 从许多其他项目（如 browserlist）获取有关浏览器使用和功能支持的信息。

然后，它会根据一组 ECMA 功能（其模拟实现由预设（插件组，比如说

preset-env

）定义）尽可能地根据需要转换您的代码。最后谈到什么可以在您希望代码运行的浏览器中运行。

例如，如果您的目标浏览器市场份额 > 15%，则此代码 -

let a = 5;

- 将保持不变，因为这些流行的浏览器很可能是完美支持

let

的 Chrome 最新版本。另一方面，如果你表明你也想要支持 IE8，

let a = 5;

会变成

var a = 5;

，因为现在 Babel 试图让你的代码适合 IE8，而 IE8 对

let

一无所知。反正你懂这个意思。

了解 Babel 并不是灵丹妙药 - 它不会添加任何超出 ECMAScript 规范的内容，这一点也很重要。例如，它不提供浏览器 API 的 polyfill（

fetch

等）。

如果您没有给出任何指示，那么，正如文档所述：

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