如何快速设置您的ES6环境

As you may know, browsers are starting to catch up with ES6. However, not everything works as smooth as expected, and this can be a time-consuming and tedious problem to solve. If something goes wrong, trying to identify if the problem lies in the code or the browser is not an easy process.

如您所知，浏览器开始追赶ES6。 但是，并非所有工作都像预期的那样顺利，这可能是一个耗时且繁琐的问题。 如果出现问题，尝试确定问题是否出在代码中或浏览器不是一个容易的过程。

But don’t worry, I’ll show you how you can quickly install and write ES6 code, and most importantly, make it compatible to all browsers that support ES5.

但是不用担心，我将向您展示如何快速安装和编写ES6代码，最重要的是，使其与所有支持ES5的浏览器兼容。

ES5至ES6 (ES5 to ES6)

In order to write ES6 code, we need to install something that can compile it to ES5. We will be using, Rollup. It compiles small pieces of code into something larger and more complex, such as a library or application. This allows you to use OOP (object-oriented-programming) which makes your code look cleaner, structured and modular, along with other useful functionalities. To clarify, JS is object-oriented, but is not a class-based object-oriented language like Java, C++, C#, etc, until the release of ES6.

为了编写ES6代码，我们需要安装一些可以将其编译为ES5的代码。 我们将使用Rollup 。 它将小的代码片段编译为更大或更复杂的内容，例如库或应用程序。 这使您可以使用OOP(面向对象编程)，使您的代码看起来更简洁，结构化和模块化，以及其他有用的功能。 需要说明的是，在ES6发行之前，JS是面向对象的，但不是像Java，C ++，C＃等基于类的面向对象的语言。

Otherwise, the closest you can come to OOP in regards to include classes with ES5 is to use IIFE (Immediately Invoked Function Expression), or install external libraries. But why rely on external resources when you have a core-language that supports the OOP paradigm? Many of the most widely used programming languages already support it (like C++, Java, C# and PHP).

否则，就将类包含在ES5中而言，最接近OOP的是使用IIFE(立即调用函数表达式)或安装外部库。 但是，当您拥有支持OOP范例的核心语言时，为什么还要依赖外部资源呢？ 许多最广泛使用的编程语言已经支持它(例如C ++，Java，C＃和PHP)。

为什么选择ES6？ (Why ES6?)

Personally, I use it because it allows me to organize my code into separate files, which makes it easier to scale and maintain the code.

我个人使用它是因为它使我可以将代码组织到单独的文件中，这使扩展和维护代码变得更加容易。

For instance, in my HTML, I have one script that loads main.js, and inside main.js, I load multiple JS files using import and export statements. Instead of having multiple scripts in my HTML file, I only need one (less code).

例如，在我HTML中，我有一个script可以加载main.js ，而在main.js内部，可以使用import和export语句加载多个JS文件。 不需要在HTML文件中包含多个脚本，而只需要一个(较少的代码)。

先决条件 (Prerequisites)

• Linux or macOS (Debian based)
  Linux或macOS(基于Debian)
• NPM (package manager) installed
  已安装NPM(软件包管理器)
• Basic CLI knowledge
  基本的CLI知识

第一步：安装汇总 (Step one: Install Rollup)

In order to use Rollup we must install it globally. Remember to use sudo. This allows you to access Rollup commands in whatever project you work with.

为了使用Rollup我们必须在全局安装它。 记住要使用sudo 。 这样，您就可以在使用的任何项目中访问Rollup命令。

第二步：文件结构 (Step two: File structure)

After you’ve installed Rollup globally, the next step is to setup up the folder structure and create two folders src and dest inside your project. In addition, create index.html.

全局安装Rollup ，下一步是设置文件夹结构，并在项目中创建两个文件夹src和dest 。 另外，创建index.html 。

• src → ES6 files (Where you’ll write the code)

  src →ES6文件(在此处编写代码)

• dest → Generates an ES5 (Compiled versions of ES6)

  dest →生成ES5(ES6的编译版本)

Keep in mind, the bundle.js file is auto-generated when the Rollup command is executed. We will talk about this later.

请记住，执行Rollup命令时将自动生成bundle.js文件。 我们稍后再讨论。

第三步：创建配置文件 (Step three: Create a configuration file)

Create a new file and name it rollup.config.js . Then add this code:

创建一个新文件，并将其命名为rollup.config.js 。 然后添加以下代码：

Make sure that the input and output source path is correct with your folder structure, and that this file is placed in the main folder.

确保input和output源路径与您的文件夹结构正确，并且此文件位于主文件夹中。

第四步：用HTML加载脚本文件 (Step four: Load the script file in HTML)

We are almost ready, but first we need to link to the right source file in our HTML template. This will load the ES5 file which is compiled from ES6.

我们已经差不多准备好了，但是首先我们需要链接到HTML模板中正确的源文件。 这将加载从ES6编译的ES5文件。

第五步：设置JS文件 (Step five: Setup JS files)

In order to verify that the Rollup command works, we need to setup a simple OOP structure. We will create a car.js class, and default export it to main.js.

为了验证Rollup命令是否有效，我们需要设置一个简单的OOP结构。 我们将创建一个car.js类，并将其default export到main.js

Keep in mind that this file exports a new instance of the car.js class, and this allows to access the methods directly rather than writing const car = new Car() in the main.js class.

请记住，此文件导出了car.js类的新实例，这允许直接访问方法，而不是在main.js类中编写const car = new Car() 。

Since I am a lazy software engineer, dealing with a few extra characters of code is time-consuming :)

由于我是一名懒惰的软件工程师，因此处理一些额外的代码字符非常耗时:)

Next, import the car.js class to main.js in order to access the method’s type().

接下来，将car.js类main.js以访问方法的type()

第六步：将ES6编译为ES5 (Step six: Compile ES6 to ES5)

To execute the configuration file we’ve created, run this command $ rollup -c or $ rollup --config — both are the same.

要执行我们创建的配置文件，请运行以下命令$ rollup -c或$ rollup --config两者相同。

After running one of the commands, open index.html through a browser, then open inspect (ctrl + shift + I) on the browser, and go to console. If you see the text "Tesla Model S", it means everything worked successfully.

运行其中一个命令后，通过浏览器打开index.html ，然后在浏览器上打开inspect( ctrl + shift + I )，然后转到console 。 如果看到文本"Tesla Model S" ，则表示一切正常。

Keep in mind that every time you make changes with ES6 files, you must update it by running the command.

请记住，每次对ES6文件进行更改时，都必须通过运行命令来对其进行更新。

可选的 (Optional)

Since you have installed Rollup globally, you can compile ES6 without needing to have the file rollup.config.js . It does exactly the same thing:

由于已全局安装Rollup ，因此无需文件rollup.config.js即可编译ES6。 它的作用完全相同：

$ rollup src/main.js — o dest/bundle.js — f iife

$ rollup src/main.js — o dest/bundle.js — f iife

Personally, I would recommend running $ rollup -c as shown in step six since there is less code required. Remember that you must have the file rollup.config.js included when running this command.

就个人而言，我建议运行$ rollup -c ，如第六步所示，因为所需的代码较少。 请记住，运行此命令时必须包含文件rollup.config.js 。

If you found this short installation approach setup for ES6 useful, please comment and clap. It’s good karma.

如果您发现此简短的ES6安装方法设置很有用，请发表评论并鼓掌。 这是很好的业力。

翻译自: https://www.freecodecamp.org/news/how-to-install-and-run-es6-quickly-b3cb115ea3dd/