前端开发ECMAScript 6简介

Posted 2021-05-01 小胖源码

ECMAScript 6.0（以下简称 ES6）是 javascript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

部署进度

Node 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实现了，只是默认没有打开。运行下面的命令，可以查看你正在使用的 Node 环境对 ES6 的支持程度。

---

$ npm install -g es-checker$ es-checker

---

展示部分效果：

---

Babel 转码器

---

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。

---

// 转码前input.map(item => item +1);// 转码后input.map(function(item){return item +1;});

---

说明：上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。

配置文件.babelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

---

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

---

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

---

# 最新转码规则$ npm install --save-dev babel-preset-latest# react 转码规则$ npm install --save-dev babel-preset-react# 不同阶段语法提案的转码规则（共有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

---

然后，将这些规则加入.babelrc。

---

{ "presets":[ "latest", "react", "stage-2" ], "plugins":[]}

---

注意，以下所有 Babel工具和模块的使用，都必须先写好.babelrc。

babel-cli安装在项目之中。

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

然后，改写package.json。

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

转码的时候，就执行下面的命令。

$ npm run build