目錄
引言
作為一個(gè)JavaScript使用者和開(kāi)發(fā)者 想必每天都在和不同的JavaScript版本和工具打交道 例如:
ES5 / ES6 / ES7 / babel ...
那么這些到底是什么意思呢? 本文打算用最簡(jiǎn)單的描述理清這些關(guān)系
ECMAScript
ECMAScript是由ECMA國(guó)際(前身為 歐洲計(jì)算機(jī)制造商協(xié)會(huì) European Computer Manufacturers Association)制定的標(biāo)準(zhǔn)化腳本語(yǔ)言
JavaScript是按照ECMAScript標(biāo)準(zhǔn)實(shí)現(xiàn)的編程語(yǔ)言
即: ECMAScript是標(biāo)準(zhǔn) JavaScript是實(shí)現(xiàn) 但是日常兩種可以互換
ES5 / ES6 / ES7
- ES5 / ES6 是指ECMAScript版本的縮寫(xiě)
ECMAScript標(biāo)準(zhǔn)發(fā)布的版本和年份的對(duì)應(yīng)關(guān)系如下
| 年份 | 版本 | 縮寫(xiě) |
|---|---|---|
| 2011 | ECMAScript 5.1 | ES5 |
| 2015 | ECMAScript 6.0 | ES6/ES2015 |
- ES7 是指ECMAScript的最新版本
由于標(biāo)準(zhǔn)還沒(méi)有正式確定所以分為4個(gè)stage
功能 stage 0 > stage 1 > stage 2 > stage 3
babel
babel['beib?l] 即 巴別塔
從名字不難看出babel的作用: 解決JavaScript不同版本兼容性問(wèn)題
ES6 / ES7標(biāo)準(zhǔn)也很多有用的特性
例如: async / await就包含在stage 3
但是由于
- 兼容性 尤其是瀏覽器的兼容性 + 國(guó)內(nèi)用戶各種盜版系統(tǒng)不升級(jí) 所以不得不將ES6 / ES7實(shí)現(xiàn)的JavaScript代碼轉(zhuǎn)碼成ES5執(zhí)行
瀏覽器對(duì)ES6的兼容性 可以參考ECMAScript 6 compatibility table
- 擴(kuò)展性 JavaScript的超集TypeScript以及JSX 也需要轉(zhuǎn)碼成JavaScript才能執(zhí)行
babel-cli
Babel提供了babel-cli工具 用于命令行轉(zhuǎn)碼 安裝命令如下
npm i -g babel-cli
babel -V
關(guān)于npm的安裝和使用可以參考這里
- 首先 創(chuàng)建一個(gè)使用ES6"箭頭函數(shù)"語(yǔ)法的script.js文件
var a = [1, 2];
console.log('before: ' + a);
a = a.map(i => i + 1);
console.log('after: ' + a);
關(guān)于"箭頭函數(shù)"的更多介紹 可以參考這里
- 接著 在script.js文件的同級(jí)目錄添加babel的配置文件.babelrc
{
"presets": [
"es2015"
],
}
- 同時(shí) 我們需要添加babel presets "es2015"的依賴 安裝命令如下
npm i --save-dev babel-preset-es2015
安裝成功后 在同級(jí)目錄下會(huì)生成package.json文件和node_modules文件夾
- 最后 我們就可以使用babel來(lái)將ES6文件轉(zhuǎn)碼成ES5文件了 命令如下
babel script.js -o script-compiled.js
轉(zhuǎn)碼成功后 可以看到生成的script-compiled.js文件內(nèi)容如下
'use strict';
var a = [1, 2];
console.log('before: ' + a);
a = a.map(function (i) {
return i + 1;
});
console.log('after: ' + a);
除了在本機(jī)安裝babel-cli工具 還可以使用babel在線轉(zhuǎn)碼工具
babel-node
在安裝babel-cli的時(shí)候 除了安裝上述babel命令 還安裝了babel-node命令
babel-node可以直接運(yùn)行ES6文件 例如: script.js文件
babel-node script.js
打印如下
before: 1,2
after: 2,3
babel-node當(dāng)然也可以運(yùn)行轉(zhuǎn)碼后的文件 例如: script-compiled.js
babel-node script-compiled.js
打印如下
before: 1,2
after: 2,3
如果讀者有node.js開(kāi)發(fā)經(jīng)驗(yàn) 那么可以直接使用babel-node代替node來(lái)啟動(dòng)node.js應(yīng)用
其他
除了上述babel babel-node工具外 還有babel-register babel-core babel-polyfill等工具
這里就不一一詳細(xì)介紹了 感興趣的讀者可以參考這里
小結(jié)
本文作為鄙人Javacript學(xué)習(xí)和經(jīng)驗(yàn)總結(jié)的開(kāi)篇 ?希望通過(guò)本文的介紹 讀者再次遇到ES2015 / ES6 / stage3 / babel工具集時(shí)不再迷茫
參考
更多文章, 請(qǐng)支持我的個(gè)人博客
