JavaScript学习 之 版本

目录

• 引言

• ECMAScript

• ES5-/-ES6-/-ES7

• babel

  • babel-cli

  • babel-node

  • 其他

• 小结

• 参考

引言

作为一个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工具集时不再迷茫

参考

• ECMAScript 6简介

• ECMAScript proposals

• ECMAScript 6 compatibility table

• Babel 入门教程

更多文章, 请支持我的个人博客