ecmascript-6之如何让 Babel 6 编译为 ES5 javascript

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

请您参考如下方法:

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

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

<小时 />

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

在 documentation for Babel 6 :

The babel package is no more. Previously, it was the entire compiler and all the transforms plus a bunch of CLI tools, but this lead to unnecessarily large downloads and was a bit confusing. Now we’ve split it up into two separate packages: babel-cli and babel-core.

还有:

Babel 6 ships without any default transforms, so when you run Babel on a file it will just print it back out to you without changing anything.

______

1。安装babel-cli

首先，如文档中所示，您需要安装 babel-cli :

$ npm install babel-cli 

______

2。在 .babelrc 中定义预设

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

...a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

安装它:

npm install @babel/preset-env 

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

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

注意:如果您使用 Babel 7.x，您可能更喜欢使用“项目范围的配置”( babel.config.js )( docs )，它“广泛应用，甚至允许插件并预设以轻松应用于node_modules或符号链接(symbolic link)包中的文件”。

______

3。运行babel

现在运行 babel您的示例中的命令应该有效:

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

或者，使用类似 webpack 的 bundler , rollup ，或browserify ，以及各自的 babel 插件。