如何将Babel 6编译为ES5 JavaScript? [英] How do I get Babel 6 to compile to ES5 javascript?

问题描述

我已经安装了最新版本的babel.目前是6.4.0.我创建了一个名为myclass.js的文件，其中包含以下代码.

I've installed the latest version of babel. Currently 6.4.0. I create a file called myclass.js that has the following code.

class MyClass {
    constructor(name) {
        console.log("I am a MyClass object .. ", name);
    }
}

var myclass = new MyClass('1234');

在创建我的类后，我在命令行中执行以下操作.

after creating my class I do the following in the command line.

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

我希望我的app.js文件具有es5编译的javascript，但其中具有与myclass.js文件相同的确切代码.我想念这可能是什么原因造成的?

I would expect my app.js file to have es5 compiled javascript but it has the same exact code in it that the myclass.js file has. What am I missing that may be causing this?

推荐答案

您不会告诉Babel以ES5为目标，而是选择必要的预设/插件来实现.例如，如果使用es2015预设，这会将ES6代码编译为与ES5兼容的代码.您没有指定目标".

You don't tell Babel to target ES5, you choose the necessary presets/plugins that do that for you. For example, if you use the es2015 preset, this will compile ES6 code to ES5-compatible code. You don't specify a "target".

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

The guide below will take you through using Babel to transform ES6 code into code that can run in an environment that supports ES <= 5.

在 Babel 6文档中:

babel包不再存在.以前，它是整个编译器，所有转换以及大量CLI工具，但是这导致不必要的大量下载，并且有些混乱.现在，我们将其分为两个单独的程序包:babel-cli和babel-core.

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出厂时没有任何默认转换，因此当您在文件上运行Babel时，它将只打印回给您，而无需进行任何更改.

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.

______

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

First, as in the docs, you need to install babel-cli:

$ npm install babel-cli

______

第二，您需要在文件本地使用.babelrc( docs )并明确定义您希望Babel使用的预设.例如，对于ES6 +功能，请使用 env预设.

Second, you need to use a .babelrc (docs) local to your files and explicitly define the presets that you want Babel to use. For example, for ES6+ features use the env preset.

...一个智能预设，可让您使用最新的JavaScript，而无需对目标环境所需的语法转换(以及可选的浏览器polyfill)进行微管理.

...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中声明它:

And then declare it in your .babelrc:

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

注意:如果您使用的是Babel 7.x，则可能更喜欢使用项目范围的配置"(babel.config.js)(

Note: if you are using Babel 7.x you may prefer to use a "project-wide configuration" (babel.config.js) (docs) which "applies broadly, even allowing plugins and presets to easily apply to files in node_modules or in symlinked packages".

______

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

Now running the babel command as in your example should work:

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

或者，使用捆绑器，例如 webpack ， browserify ，以及各自的babel插件.

Alternatively, use a bundler like webpack, rollup, or browserify, with their respective babel plugin.

这篇关于如何将Babel 6编译为ES5 JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！