目录

一、概述

二、扩展：Babel转码器

三、拓展：编译打包

---

一、概述

概念

        ES6全称ECMAScript 6.0，是Javascript语言的下一代标准，2015年6月正式发布。

        注意，ES6既是一个历史名词，也是一个泛指，含义是5.1版本之后的下一代Javascript标准，涵盖了ES6、ES7、ES8等。

        参考：ECMAScript 6 简介 - ECMAScript 6入门 (ruanyifeng.com)

什么是ECMA

        ECMA中文名称为欧洲计算机制造商协会，该组织的目的是评估、开发和认可电信和计算机标准，1994年更名为Ecma国际。

ECMAScript和JavaScript是什么关系

        ECMAScript是JavaScript的标准，JavaScript是ECMAScript的一种具体实现。

二、扩展：Babel转码器

什么是Babel

        Babel是一个Javascript编译器，也可以称之为ES6转码器，可以将ES6代码转换为ES5代码，从而在老版本浏览器中执行。 

// 转码前
let arr = [1, 2, 3];
arr.map((item) => {return item * 2;
});// 转码后
var arr = [1, 2, 3];
arr.map(function (item) {return item * 2;
});

初始化项目

        如下命令所示，初始化项目，其中-yes可简化为-y，表示在初始化项目时省去敲回车的步骤，直接生成默认的package.json文件。

> npm init -yes

Babel编译ES6示例

        如下命令所示，安装三个依赖包，分别是@babel/cli、@babel/core、@babel/preset-env。其中@babel/cli是Babel的命令行工具，@babel/core是Babel的核心代码库，@babel/preset-env是Babel预设的规则集，能够将最新的ECMAScript特性转换为ES5语法。

> cnpm install -D @babel/core @babel/cli @babel/preset-env

         依赖安装完毕后，执行如下命令即可完成ES6代码编译。其中-d命令用于指定编译后文件的输出目录，--presets用于指定转码规则。注意，Babel若为局部安装，则需要使用npx执行Babel命令，若全局安装则去掉npx，直接使用babel即可。

> npx babel src/js -d dist/js --presets=@babel/preset-env

三、拓展：编译打包

概述

        require关键字在node.js环境下可以被识别，但在浏览器环境不能被识别。此时可以使用browserify或webpack对目标文件进行编译打包，转换成浏览器端可识别的代码。

        此处使用browserify工具，browserify是一个模块打包工具，相比webpack，使用起来更加简便。

安装browserify

        如下命令所示，安装browserify依赖包。

> cnpm install -D browserify

        如下命令所示，打包指定目录。其中dist/js/app.js为目标文件，-o用来设置输出目录。

> npx browserify dist/js/app.js -o dist/bundle.js