小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
路难行,行路难,一身汗水,满心长。脚下百里路,头顶艳阳天。坚定如磐石,信念似火烧。好男儿,人穷志不缺,天道也酬勤。四方走,走四方,一身是胆,豪气壮。前方坎坷途,千难万般阻。心若有明灯,身似般若行。好男儿,大志存高远,四海皆为家。
ECMA 的发展历史
ES6从开始制定到最后发布,整整用了15年。
- ECMAScript 1.0是1997年发布的。
- ECMAScript 2.0发布于1998年6月。
- ECMAScript 3.0 则发布于1999年12月。
- 2000年 ECMAScript 4.0开始酝酿(没有通过),但大部分内容被ES6继承。
- 2009年12月ECMAScript 5.0版正式发布。
- 2011年6月ECMAscript 5.1版发布,并且成为ISO国际标准。
- 2015年6月,ECMAScript 6正式通过,成为国际标准。
脚本语言的流程图
Babel 是什么
Babel 是一个工具链,主要用于在旧的测览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。以下是 Babel 可以为你做的主要事情:
- 转换语法
- Polyfill 实现目标环境中缺少的功能
- 源代码转换
// Babel Input: ES2015 arrow function
[1,2.3].map((n)=> n + 1);
// Babel Output: ES5 equivalent
[1,2,3].map(function(n) {
return n+1;
};
安装 Bable
使用以下命令安装 Babel packages:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
由于npm命令是从外网下载并安装,可能会导致安装过程过长或安装失败等问题。可以使用cnpm命令进行替换。
cnpm install -g @babel/core @babel/cli @babel/preset-env
cnpm install -g @babel/polyfill
onpm 命令是由淘宝 NPM 镜像提供的,这是一个完整的 npmjs.org 镜像。使用之前需要先安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
验证 npm
成功安装 Babel
配置 Babel
在工程项目的根目录下创建 package.json 配置文件,该配置文件内容如下:
{
"presets": [
"latest"
],
"plugins": [],
"devDependencies" : {
"babel-cli": "^6.0.0",
"babel-preset-latest": "^6.24.1"
},
"scripts": {
"build": "babel src -d lib"}
}
babel-cli 转码
根据 package.json 配置文件在工程的根目录下创建 src 和 lib 两个目录:
- src 目录:用于放置 ECMAScript 6的代码文件。
- lib 目录:用于放置通过 Babel 转码后的代码文件。
在src目录下编写 ECMAScript 6 的代码文件后、在命令行提示符中通过如下指令进行转码:
npm run build