Table of Contents
Advantages of es6 (off topic):
Development environment construction for es6 (es6 transcoding to es5)
Babel usage rules
1. Install babel
2. Configuration file .babelrc
3. Usage
After reading it 10,000 times, it’s better to practice it yourself
Home Web Front-end Front-end Q&A How to build the es6 running environment

How to build the es6 running environment

Oct 17, 2022 pm 03:56 PM
es6 environment construction

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.

How to build the es6 running environment

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环境执行了。
Copy after login

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
Copy after login

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": []
}
Copy after login

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
Copy after login

Then, add these rules to .babelrc.

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

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
Copy after login

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
Copy after login

Then, rewrite package.json.

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

When transcoding, execute the following command.

npm run build
Copy after login

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

How to build the es6 running environment

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
Copy after login

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.

How to build the es6 running environment

npm is too slow, first install cnpm

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

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

cnpm install -g babel-cli
Copy after login

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
Copy after login

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

How to build the es6 running environment

Then install two dependent packages locally

cnpm install --save-dev babel-preset-es2015 babel-cli
Copy after login

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

How to build the es6 running environment

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

How to build the es6 running environment

第四步:(package.json中修改scripts命令执行项)

How to build the es6 running environment

第五步:(验收成果,哈哈!)

cnpm run build
Copy after login

How to build the es6 running environment

你也可以在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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is useEffect? How do you use it to perform side effects? What is useEffect? How do you use it to perform side effects? Mar 19, 2025 pm 03:58 PM

The article discusses useEffect in React, a hook for managing side effects like data fetching and DOM manipulation in functional components. It explains usage, common side effects, and cleanup to prevent issues like memory leaks.

Explain the concept of lazy loading. Explain the concept of lazy loading. Mar 13, 2025 pm 07:47 PM

Lazy loading delays loading of content until needed, improving web performance and user experience by reducing initial load times and server load.

What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code? What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code? Mar 18, 2025 pm 01:44 PM

Higher-order functions in JavaScript enhance code conciseness, reusability, modularity, and performance through abstraction, common patterns, and optimization techniques.

How does currying work in JavaScript, and what are its benefits? How does currying work in JavaScript, and what are its benefits? Mar 18, 2025 pm 01:45 PM

The article discusses currying in JavaScript, a technique transforming multi-argument functions into single-argument function sequences. It explores currying's implementation, benefits like partial application, and practical uses, enhancing code read

How does the React reconciliation algorithm work? How does the React reconciliation algorithm work? Mar 18, 2025 pm 01:58 PM

The article explains React's reconciliation algorithm, which efficiently updates the DOM by comparing Virtual DOM trees. It discusses performance benefits, optimization techniques, and impacts on user experience.Character count: 159

What is useContext? How do you use it to share state between components? What is useContext? How do you use it to share state between components? Mar 19, 2025 pm 03:59 PM

The article explains useContext in React, which simplifies state management by avoiding prop drilling. It discusses benefits like centralized state and performance improvements through reduced re-renders.

How do you prevent default behavior in event handlers? How do you prevent default behavior in event handlers? Mar 19, 2025 pm 04:10 PM

Article discusses preventing default behavior in event handlers using preventDefault() method, its benefits like enhanced user experience, and potential issues like accessibility concerns.

What are the advantages and disadvantages of controlled and uncontrolled components? What are the advantages and disadvantages of controlled and uncontrolled components? Mar 19, 2025 pm 04:16 PM

The article discusses the advantages and disadvantages of controlled and uncontrolled components in React, focusing on aspects like predictability, performance, and use cases. It advises on factors to consider when choosing between them.

See all articles