How to build the es6 running environment

Building steps: 1. Install the babel-cli tool with the syntax "npm install --save-dev babel-cli"; 2. Install dependencies with the syntax "npm install --save-dev babel-preset-es2015 babel-cli"; 3. Configure the ".babelrc" file in the root directory and set the transcoding rules; 4. Modify the scripts command execution items in package.json.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Advantages of es6 (off topic):

es6 is ECMAScript2015. es6 is a subset of js, but the js we generally talk about is the version before es6. js itself is a very imperfect language, but es6 hides many ugly parts of js through syntax sugar. It provides many features, such as javascript data processing, arrow functions, destructuring assignment, Default Parameters (default parameters), Classes (classes), Modules (modules), etc., including these asynchronous request methods for front-end and back-end separation, which can be very good Solve the problems encountered by large front-end.

Development environment construction for es6 (es6 transcoding to es5)

If you want to do your job well, you must first sharpen your tools, haha, so the first step is to build one es6 development environment. Lower version browsers do not support es6 syntax, which requires converting es6 syntax into es5 syntax in the running environment. Webpack has automatic compilation and conversion capabilities in vue. In addition to Webpack, babel can be used

Babel usage rules

Babel is a widely used transcoder that can convert ES6 code to ES5 code to execute in the existing environment.

This means that you can write programs in ES6 now without worrying about whether your existing environment supports it. Below is an example.

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});
//上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

1. Install babel

Babel provides the babel-cli tool for command line conversion code.

Its installation command is as follows:

//需要先安装babel-cli
npm install --global babel-cli

2. Configuration file .babelrc

Babel’s configuration file is .babelrc, stored in the root directory of the project. The first step in using Babel is to configure this file.

This file is used to set transcoding rules and plug-ins. The basic format is as follows. The

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

presets field sets the transcoding rules. The following official rule sets are provided. You can install them as needed.

# ES2015转码规则
npm install --save-dev babel-preset-es2015

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

Then, add these rules to .babelrc.

//例如：按需求添加
{
    "presets": [
      	"es2015",
      	"stage-2"
    ],
	"plugins": []
}

3. Usage

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

---

The above code is used for Babel transcoding in the global environment. This means that if the project is to run, the global environment must have Babel, which means that the project has a dependency on the environment. On the other hand, this also fails to support different projects using different versions of Babel.

One solution is to install babel-cli in the project.

# 安装
npm install --save-dev babel-cli

Then, rewrite package.json.

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

When transcoding, execute the following command.

npm run build

After reading it 10,000 times, it’s better to practice it yourself

Step one: (Create a local project and directory)

Create a new folder locally, rename it to es6test, open it with the vscode code editor, and create two new files under the folder, namely the project file src and the packaging file dist file, in the src folder Create a new index.html file, create a new index.js file side by side, and introduce the index.js file into index.html

Second step: ( Initialize the project and add the transcoding dependency package)

Open vscode terminal ctrl ~, initialize the project in the file root directory:

npm init -y

will generate a package.json file, The purpose of -y is to configure the default value during initialization, and then modify it in the generated file.

npm is too slow, first install cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

Install the babel-cli tool globally in the terminal for command line transfer Code

cnpm install -g babel-cli

I can’t wait to try it out to see if it works and whether it can be transcoded, so I tested it on the terminal first

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

It’s not what I expected, it definitely won’t work! An index.js file was generated under the dist file, but it was not converted into es5 syntax

Then install two dependent packages locally

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

If the following content appears in package.json, congratulations, all dependent packages have been installed

Step 3: (root .babelrc file configuration in the directory)

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

cnpm run build

你也可以在src/index.js中再写些es6的语法，测试下。

【相关推荐：javascript视频教程、编程视频】

The above is the detailed content of How to build the es6 running environment. For more information, please follow other related articles on the PHP Chinese website!