babel es2015_ES6（ES2015）和Babel入门

落日映苍穹つ 2023-02-21 14:30 1阅读 0赞

babel es2015

If you don't do much work with Node.js there's a good chance you haven't explored the new syntax additions to the JavaScript language provided by ES2015.  These language additions include [arrow functions][], [classes][], [block scoping][], and more.  These language additions have slowly made their way to Chrome and Firefox so if you haven't taken the time to learn ES2015:  now is the time!  And what better way to do that than writing your JavaScript in ES2015 and using [Babel][] to transpile it into "traditional" JavaScript for the browser?  Let me show you how to get started!

如果您对Node.js的工作不多，很有可能您还没有探索ES2015提供JavaScript语言中新增的语法。 这些语言的新增[功能][arrow functions]包括[箭头函数][arrow functions] ， [类][classes] ， [块作用域][block scoping]等。 这些语言的添加已慢慢进入Chrome和Firefox，因此，如果您还没有花时间学习ES2015，现在是时候了！ 还有什么比在ES2015中编写JavaScript并使用[Babel][]将其转换为浏览器的“传统” JavaScript更好的方法呢？ 让我告诉你如何开始！

## 步骤1：将Babel与ES2015插件安装 **(**Step 1:  Install Babel with ES2015 Addon**)** ##

Babel's CLI is available as a package from NPM so we'll start by installing it:

Babel的CLI可作为软件包从NPM获得，因此我们将首先安装它：

npm install babel-cli

Next we'll install the `babel-preset-es2015` addon so we can use the new syntax additions:

接下来，我们将安装`babel-preset-es2015`插件，以便我们使用新的语法添加：

npm install babel-preset-es2015

Babel has many addons for a variety of language modifications (like JSX) but this one addon is all we need to get started.

Babel有许多用于各种语言修改的插件(例如JSX)，但我们需要的就是这个插件。

## 步骤2：创建一个`.babelrc`文件 **(**Step 2:  Create a `.babelrc` File**)** ##

The small file allows us to create a preset for babel usage; since we only have the  `babel-preset-es2015` addon, we'll only add that to the file:

这个小文件可以让我们创建一个使用babel的预设。 因为我们只有`babel-preset-es2015`插件，所以我们只将其添加到文件中：

echo '{ "presets": ["es2015"] }' > .babelrc

At this point we have Babel installed and preferences set!

至此，我们已经安装了Babel并设置了首选项！

## 第3步：创建JavaScript文件！ **(**Step 3:  Create Your JavaScript Files!**)** ##

The fun part will be playing around with the new syntax!  Here's a very simple code snippet with arrow functions:

有趣的部分将是使用新语法！ 这是带有箭头功能的非常简单的代码段：

// Just playing around, this doesn't really do anything
    ((con) => {
      ['yes', 'no'].forEach((item) => {
        con.log(item);
      })
    })(console);

The `babel-preset-es2015` addon also supports JavaScript classes and more but let's keep our sample simple.  OK, sample is created, let's transpile it into "traditional" JavaScript for browsers that don't yet support ES2015!

`babel-preset-es2015`插件还支持JavaScript类和更多类，但让我们保持示例简单。 好的，示例已创建，让我们将其转换为尚不支持ES2015的浏览器的“传统” JavaScript！

## 步骤4：翻译JavaScript **(**Step 4:  Transpile the JavaScript**)** ##

With Babel in place and our JavaScript code ready for treatment, we'll trigger the process:

准备好Babel并准备好处理JavaScript代码后，我们将触发该过程：

./node_modules/.bin/babel src -d dest

That command transpiles every JavaScript file in the `src` directory and places it within the `dest` directory.  Our sample JavaScript file becomes:

该命令将转储`src`目录中的每个JavaScript文件并将其放在`dest`目录中。 我们的示例JavaScript文件变为：

'use strict';
    
    (function (con) {
      ['yes', 'no'].forEach(function (item) {
        con.log(item);
      });
    })(console);

You'll recognize that as something that you've been writing for years!

您会意识到这是您多年以来一直在写的东西！

*It's important to note that if you don't care about the browser you can simply run `node myFile.js` and ensure your code works properly (since current node is fitted with ES2015 syntactic sugar).  It's also important to point out that arrow functions were simply my example and that ES2015 has many, many more syntactical updates. Moreover the arrow function syntax changes the implications of binding so please study each type of [syntactic update before using][]!*

*重要的是要注意，如果您不关心浏览器，则可以简单地运行`node myFile.js`并确保代码正常运行(因为当前节点装有ES2015语法糖)。* *同样重要的是要指出箭头功能只是我的例子，ES2015还有很多很多语法更新。* *此外，箭头函数语法会改变绑定的含义，因此请[在使用前][syntactic update before using]学习每种[语法更新][syntactic update before using] ！*

Take the time to play around with ES2015 -- it will be in all major browsers soon and should be quicker to type and more compact in size.  Once you start you'll look to use the new syntax everywhere!

花点时间玩ES2015-它将很快在所有主流浏览器中使用，并且键入速度应更快，尺寸更紧凑。 一旦开始，您将期望在所有地方使用新语法！

> 翻译自: [https://davidwalsh.name/es2015-babel][https_davidwalsh.name_es2015-babel]

babel es2015

[arrow functions]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[classes]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
[block scoping]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block
[Babel]: http://babeljs.io/
[syntactic update before using]: https://babeljs.io/docs/learn-es2015/
[https_davidwalsh.name_es2015-babel]: https://davidwalsh.name/es2015-babel