如何让 Babel6编译成 ES5 javascript？

我已经安装了最新版本的 babel，目前是6.4.0。

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 文件相同的代码。我错过了什么可能导致这个？

71076 次浏览
小开

你不告诉 Babel 目标 ES5，你选择必要的预置/插件为你做这一点。例如，如果您使用 es2015预设，这将把 ES6代码编译成与 ES5兼容的代码。你没有指定一个“目标”。

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

0. 关于 API 变化的说明

在 巴别塔6的文件:

巴别塔套餐已经不复存在了。以前，它是整个编译器和所有的转换加上一堆 CLI 工具，但这导致不必要的大量下载和有点混乱。现在我们把它分成两个独立的包: babel-cli 和 babel-core。

还有:

Babel 6没有任何默认的转换，所以当你运行 Babel 的文件时，它只会打印出来给你，而不会改变任何东西。

_ _ _ _ _ _

1. 安装 babel-cli

首先，与文档一样，您需要安装 babel-cli:

$ npm install babel-cli

_ _ _ _ _ _

2. 在 .babelrc中定义预置

其次，您需要对您的文件使用本地 .babelrc(医生) ，并显式定义您希望 Babel 使用的 预设。例如，对于 ES6 + 功能，使用 env预置。

... 一个智能预设，允许您使用最新的 JavaScript，而无需微管理您的目标环境需要哪些语法转换(以及可选的浏览器填充)。

安装:

npm install @babel/preset-env

然后在你的 .babelrc中声明:

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

注意: 如果你正在使用 Babel 7.x，你可能更喜欢使用“项目范围的配置”(babel.config.js)(医生) ，它“应用广泛，甚至允许插件和预设置轻松地应用到 node _ module 或符号链接包中的文件”。

_ _ _ _ _ _

3. 运行 babel

现在按照您的示例运行 babel命令应该可以工作:

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

或者，使用像 网络包、 集合或 浏览这样的捆绑包，以及它们各自的 babel 插件。

小开

Babel 不是针对(或者你通常不希望它针对)一个特定的标准，而是针对你以某种方式传入的具体浏览器版本——明确地像 "targets": { "chrome": 70}或者隐含地以不同的方式，例如，像 "targets": ">0.25%"(市场份额)——在配置文件(package.json，。Babelrc 或 babel.config.js)。为了使之成为可能，Babel 从许多其他项目(如 浏览器列表)获得了浏览器使用和特性支持的信息。

然后，它根据一组 ECMA 特性(其竞争性实现由预设定义)(比如说 preset-env插件组) ，尽可能地降低并转换您的代码。最后，我们来看看在您希望代码运行的浏览器中可以运行哪些内容。

例如，如果你的目标浏览器的市场份额大于15% ，这个代码-let a = 5;-将保持不变，因为这些流行的浏览器很可能是最新版本的 Chrome，完全支持 let。另一方面，如果你表示你也想要 IE8的支持，那么 let a = 5;就变成了 var a = 5;，因为现在 Babel 试图让你的代码适合 IE8，而 IE8对 let一无所知。你懂的。

同样重要的是要明白，Babel 不是一个银弹-它不会增加任何超出 ECMAScript 规范。例如，它不为浏览器 API (fetch等)提供填充。

如果你没有给出任何指示，那么，正如 文件所说:

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

小开
最佳答案

使用 babel 和 nodejs (以及使用 CLI)得到的确切答案是:

安装标签和预置

npm install babel-cli babel-preset-es2015

用 npx 执行

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

注意

当巴宝莉全球安装可能不工作。所以这是我的明确的解决方案


提交答案