目录

一、概述

二、扩展: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

js es6 es7 es8 es9 js es6 es7 es8 es9都称为es6_编译打包

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

js es6 es7 es8 es9 js es6 es7 es8 es9都称为es6_编译打包_02

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

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

js es6 es7 es8 es9 js es6 es7 es8 es9都称为es6_编译打包_03

三、拓展:编译打包

概述

        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

js es6 es7 es8 es9 js es6 es7 es8 es9都称为es6_Babel_04