如何让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 <= 5的环境中运行的代码.

关于来自Babel 5的API变化的说明

在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预设.

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

安装它:

npm install @babel/preset-env

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

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

注意:如果您使用的是Babel 7.x,您可能更喜欢使用"项目范围的配置"(babel.config.js)(" 文档"),"广泛适用,甚至允许插件和预设轻松应用于node_modules或符号链接包中的文件".

______

3.跑 babel

现在运行babel示例中的命令应该工作:

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

或者,使用如捆绑的WebPack,汇总,或者browserify,与它们各自的巴贝尔插件.

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