ES6 development environment to build

Before building the es6 development environment, let's briefly introduce es6.

ECMAScript 6.0 (hereinafter referred to as ES6) is the next-generation standard of the JavaScript language, which was officially released in June 2015. Its goal is to make the JavaScript language can be used to write complex large-scale applications and become an enterprise-level development language.

Why should we use es6? What are the advantages of es6? ......, I will write an es6 topic series later to introduce the use of es6. The content shared this time is the construction of the es6 development environment.

Then, you must ask again, why do you want to build an es development environment, doesn't it all say that es6 is the next generation standard of the JavaScript language, we usually write js without building an environment, you can do it directly in the browser run.

Because the JavaScript engines developed by major browser manufacturers have not yet completed the perfect support for all the features in ES2015, if they are used directly, an error will be reported.

So we not only want to use the new syntax and new features brought by es6, but also want the current browser to support the es6 syntax, so compilers such as babel and Traceur appear. They can convert ES2015 features that are not yet supported into ES5 standard code so that they can be supported by browsers.

Here we use Babel to compile ES6 to ES5.

Create project directory

First create a project directory of the project, and create two folders under the directory: src and dist

src: The folder where ES6 code is written, and the js programs written are placed here.
dist: The folder of ES5 code compiled by Babel, the js file here when the HTML page needs to be imported.

write index.html

After the folder is established, we create a new index.html file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        Hello ECMA Script 6
    </body>
</html>

It should be noted that when importing js files, the files in the dist directory are imported.

<script src="./dist/index.js"></script>

write index.js

In the src directory, create a new index.js file. This file is very simple, we just make a declaration of a variable and print it out with console.log().

let a=1;
console.log(a);

We used the let declaration, where let is a declaration method of ES6. Next, we need to automatically program this ES6 grammar file into an ES5 grammar file.

Initialize the project

Before installing Babel, we need to initialize our project with npm init. Open the terminal or open the command line tool through cmd, enter the project directory, and enter the following command:

npm init -y

-y means agree to all by default, so there is no need to press Enter again and again. After the command is executed, the package.json file will be produced in the project root directory.

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以根据自己的需要进行修改，比如我们修改name的值。

全局安装Babel-cli

在终端中输入以下命令,如果你安装很慢的话，可以使用淘宝镜像的cnpm来进行安装。安装cnpm的方法，大家自己百度吧。

cnpm install -g babel-cli

虽然已经安装了babel-cli，只是这样还不能成功进行转换，如果你不相信可以输入下边的命令试一下。

babel src/index.js -o dist/index.js

你会发现，在dist目录下确实生产了index.js文件，但是文件并没有变化，还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换，继续往下看吧。

本地安装babel-preset-es2015 和 babel-cli

cnpm install --save-dev babel-preset-es2015 babel-cli

安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。

"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

新建.babelrc

在根目录下新建.babelrc文件(注意，以点开头的文件是隐藏文件，需要在linux环境通过命令创建)，并打开录入下面的代码

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。

babel src/index.js -o dist/index.js

简化转化命令

在学习vue 的时候，可以使用npm run build 直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

修改好后，以后我们就可以使用 npm run build 来进行转换了。

这样，一个简单的基本的编译环境就OK了。