目录

  • 引言

  • 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
    入门教程

双重多篇,
请支持自之私博客

相关文章

网站地图xml地图