刚涉及es6，求高手推荐es6怎么编译为es5

Posted 2023-04-30

参考技术A 前言 如果你在使用 React， 那么肯定已经撸了好多自己的组件， 并尝试着共享出来。在 OneAPM 前端开发过程中， 我们也曾遇到了一些组件共享的问题： 例如: 是通过 git 直接发布还是通过 NPM 发布

如何让 Babel 6 编译为 ES5 javascript？

【中文标题】如何让 Babel 6 编译为 ES5 javascript？

【英文标题】：How do I get Babel 6 to compile to ES5 javascript?

【发布时间】：2016-04-17 07:20:42

【问题描述】：

我已经安装了最新版本的 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 文件完全相同的代码。我错过了什么可能导致这种情况？

【问题讨论】：

对我有用，你的.babelrc 怎么样？

Babel file is copied without being transformed的可能重复

【参考方案1】：

你没有告诉 Babel 以 ES5 为目标，你选择了必要的预设/插件来为你做这件事。例如，如果您使用 es2015 预设，这会将 ES6 代码编译为 ES5 兼容代码。您没有指定“目标”。

下面的指南将带你了解如何使用 Babel 将 ES6 代码转换为可以在支持 ES

---

0。关于 Babel 5 的 API 更改的说明

在documentation for 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 使用的 预设。例如，对于 ES6+ 功能，请使用 env preset。

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

安装它：

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 插件。

【讨论】：

虽然这个答案有有用的信息，但它没有回答问题：它没有解释如何编译到 ES5。

我的立场是正确的。显然 es2015 预设是让 Babel 产生 es5 兼容输出的方式。我在想办法的时候回答了。是我一个人还是这个命名令人困惑。 ES2015 = ES6 所以他们创建了一个针对 ES5 的预设为什么叫它“ES2015”？

@KoertvanKleef 预设定义了可用的语言功能，因此这些是名称所暗示的。 （如果它说 preset: ES5，你/Babel 怎么知道应用程序使用 ES6？）所以 es2015 意味着你可以使用 ES6 特性，它们将被转译。

@KoertvanKleef 无需指定目标 ES5；预设基本上是要使用的插件列表，这些都自动针对 ES5 环境。 :-)

为什么这不被接受为答案？它比文档更清楚。文档从未提及 .babelrc 和预设步骤。这里babeljs.io/docs/usage/cli+1。

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

【参考方案3】：

Babel通常不以（或者您通常不希望它以）特定标准为目标，而是针对您以某种方式传入的具体浏览器版本 - 明确地像 @ 987654323@ 或以不同方式隐含，例如"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 试图使您的代码适用于对 let 一无所知的 IE8。反正你懂这个意思。

另外，重要的是要理解，Babel 不是灵丹妙药 - 它不会添加任何超出 ECMAScript 规范的内容。例如，它不为浏览器 API（fetch 等）提供 polyfill。

如果你没有给出任何指示，那么，正如documentation 所说：

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