目录
一、概述
二、扩展: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