如何让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代码转换为可在支持ES＆lt; = 5的环境中运行的代码。

0。关于API改变的说明来自Babel 5

在documentation for Babel 6：

  

巴贝尔包裹已不复存在。以前，它是整个编译器和所有转换以及一堆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插件。

Answer 2

Babel不会通常定位（或通常不希望其定位）特定标准，而是以您以某种方式传递的具体浏览器版本为目标-明确地像{ {1}}或隐式地以不同的方式，例如"targets": { "chrome": 70}（市场份额）-配置文件（package.json，.babelrc或babel.config.js）。为了实现这一目标，Babel从browserlist之类的许多其他项目中获得了有关浏览器使用和功能支持的信息。

然后，它根据一组ECMA功能（可能是预置，即插件组，假设"targets": ">0.25%"）定义的一系列ECMA功能，尽可能地降低代码的需要，并根据需要对代码进行转换。最终，您可以在要运行代码的浏览器中运行什么。

例如，如果您定位市场份额大于15％的浏览器，则此代码preset-env-将保持不变，因为这些流行的浏览器很可能是完全支持{{1 }}。另一方面，如果您表示还希望支持IE8，则let a = 5;变成let，因为现在Babel试图使您的代码适合不了解let a = 5;的IE8。反正你懂这个意思。

另外，重要的是要了解，Babel不是万能的-它没有添加ECMAScript规范之外的任何内容。例如，它不为浏览器API（var a = 5;等）提供polyfill。

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

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

Answer 3

使用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 4

您可以将@babel/preset-env 与 Browserslist 集成。

跟随official docs。

通过这种方式，您可以根据您有兴趣支持的市场定位一系列浏览器。