目录
引言
作为一个JavaScript使用者和开发者 想必每天都在和不同的JavaScript版本和工具打交道 例如:
ES5 / ES6 / ES7 / babel ...
那么这些到底是什么意思呢? 本文打算用最简单的描述理清这些关系
ECMAScript
ECMAScript是由ECMA国际(前身为 欧洲计算机制造商协会 European Computer Manufacturers Association)制定的标准化脚本语言
JavaScript是按照ECMAScript标准实现的编程语言
即: ECMAScript是标准 JavaScript是实现 但是日常两种可以互换
ES5 / ES6 / ES7
- ES5 / ES6 是指ECMAScript版本的缩写
ECMAScript标准发布的版本和年份的对应关系如下
| 年份 | 版本 | 缩写 |
|---|---|---|
| 2011 | ECMAScript 5.1 | ES5 |
| 2015 | ECMAScript 6.0 | ES6/ES2015 |
- ES7 是指ECMAScript的最新版本
由于标准还没有正式确定所以分为4个stage
功能 stage 0 > stage 1 > stage 2 > stage 3
babel
babel['beibəl] 即 巴别塔
从名字不难看出babel的作用: 解决JavaScript不同版本兼容性问题
ES6 / ES7标准也很多有用的特性
例如: async / await就包含在stage 3
但是由于
- 兼容性 尤其是浏览器的兼容性 + 国内用户各种盗版系统不升级 所以不得不将ES6 / ES7实现的JavaScript代码转码成ES5执行
浏览器对ES6的兼容性 可以参考ECMAScript 6 compatibility table
- 扩展性 JavaScript的超集TypeScript以及JSX 也需要转码成JavaScript才能执行
babel-cli
Babel提供了babel-cli工具 用于命令行转码 安装命令如下
npm i -g babel-cli
babel -V
关于npm的安装和使用可以参考这里
- 首先 创建一个使用ES6"箭头函数"语法的script.js文件
var a = [1, 2];
console.log('before: ' + a);
a = a.map(i => i + 1);
console.log('after: ' + a);
关于"箭头函数"的更多介绍 可以参考这里
- 接着 在script.js文件的同级目录添加babel的配置文件.babelrc
{
"presets": [
"es2015"
],
}
- 同时 我们需要添加babel presets "es2015"的依赖 安装命令如下
npm i --save-dev babel-preset-es2015
安装成功后 在同级目录下会生成package.json文件和node_modules文件夹
- 最后 我们就可以使用babel来将ES6文件转码成ES5文件了 命令如下
babel script.js -o script-compiled.js
转码成功后 可以看到生成的script-compiled.js文件内容如下
'use strict';
var a = [1, 2];
console.log('before: ' + a);
a = a.map(function (i) {
return i + 1;
});
console.log('after: ' + a);
除了在本机安装babel-cli工具 还可以使用babel在线转码工具
babel-node
在安装babel-cli的时候 除了安装上述babel命令 还安装了babel-node命令
babel-node可以直接运行ES6文件 例如: script.js文件
babel-node script.js
打印如下
before: 1,2
after: 2,3
babel-node当然也可以运行转码后的文件 例如: script-compiled.js
babel-node script-compiled.js
打印如下
before: 1,2
after: 2,3
如果读者有node.js开发经验 那么可以直接使用babel-node代替node来启动node.js应用
其他
除了上述babel babel-node工具外 还有babel-register babel-core babel-polyfill等工具
这里就不一一详细介绍了 感兴趣的读者可以参考这里
小结
本文作为鄙人Javacript学习和经验总结的开篇 �希望通过本文的介绍 读者再次遇到ES2015 / ES6 / stage3 / babel工具集时不再迷茫
参考
更多文章, 请支持我的个人博客
