???? ???? ??. JS? ??? ???? ES6?? ??? ??? API? ?? ???????. ??? ?? ????? ES6? ??? ??? ? ???? ???? ES6 ??? ES5 ??? ???? ???. WeChat ? ??? ????? ???? ES6 ?? ??? ? ??? ???? ? ???? ES5 ??? ???? ? ????? babel? ?????. ?? ???? ??? ???? ?? ???? ?? ??? ???? ? ??? ???. ???? ????? ?? ???. ES6 ~ ES5" ??.

? ????? ?? ??: Windows 7 ???, ECMAScript ?? 6, Dell G3 ???.

???? es6? es5? ???? ??

??: ???? ???? node.js ???? ??????? ???? ???? ??.

ES6? JS? ??? ???? ??? ??? API? ?? ????? ?? ????? ES6? ??? ??? ? ???? ???? ES6? ??? ??? ????? ????? ?? ??? ???? ???. ES6 ??? ES5 ??? ????? ????? Babel ??? ???? ????? ?? ???.

node.js ????? ES6? ?? node? ??? ??? ?????. ?? 13 ???? ?? ??? ???????(package.json? "type": "module" ?? ??). ??? ?? ?????? ??? ES6 ??? ???? ????. ??? node.js ????? ES6 ??? ???? ??? ?? Babel? ???? ??????? ??? ??? ? ????.

????? es6? es5? ??

0.10.101000 ? ?? ??? ?? ????? ????? babel? ???? ???? ES6 ?? ??? ? ?? ???? ? ???? ES5? ?????. ???? ??? ???? ?? ???? ?? ??? ???? ? ??? ?? ?????.

?????? ES6?? ES5?? ?? ??? ?????

?? ??? ?????.

?? ??? ????? ?? ES6 ?? ??? ?? javasctipt strict ??? ?????. ????? ????? ????. "??? ??"? ?????

Babel?? ??????

Babel? ES6 ??? ES5 ??? ??? ? ?? ES6 ???????? ?? ES6? ???? ?? ?? ????? ES6 ??? ??? ? ????. ?: ES6 ??? ?? ?? ?:

//?轉碼前：使用了ES6箭頭函數(shù)
items.map(item?=>?item?+?1);

//?轉碼后：轉為了普通函數(shù)
items.map(function?(item)?{
??return?item?+?1;
});

es6? es5? ???? ??? ??????

Babel? ???? es6? es5? ?????. ????? ?? ?? ??? ??? ? ??? ????? Babel? ???? ??? ?????.

1. ????? Babel? ??? ??? ?????

$?npm?install?-D?babel-cli

2. ES6 ?? ??

??? ?? ???? ES6 ??? ??? ?? ??? src ????? ????. src? ????.

//?src/example.js

class?Hello?{

??static?world()?{

????console.log('Hello,?World!');

??}

}

Hello.world();

3. Babel ??

Babel? ????? ?? ??? ?? ??? ????????(ES6?? ??? ??? ?????). ES6? ES5? ????? env ???? ???? ? ????? ????? ?? ???:

$?npm?install?-D?babel-preset-env

?? ?? ??? ???? ???? ?? ????? ??? ?????:

.babelrc.

????? ??? ????? ???? ? ???? ?????. ?? ??? ??? ????.

//?.babelrc

{

??"presets":?[],

??"plugins":?[]

}

.babelrc.?? ????? ??? ? ??? ?? ???? ????.

presets ??????? ??? ?? ??? ?????. ???? ??? ?? ??? ? ????.

?? ????? ??

$?npm?install?--save-dev?@babel/preset-env

react ????? ??

$?npm?install?--save-dev?@babel/preset-react

?? ?? ? ??? .babelrc? ?????.

?? ?:

??{

????"presets":?[

??????"@babel/env",

??????"@babel/preset-react"

????],

????"plugins":?[]

??}

?? Babel ?? ? ??? ?? ???? ?? .babelrc? ?? ???? ???.

??? ????? ? ????? ??Babel? ??? ?????? ?? ??? ?? @babel/cli? ?????.

?? ???? ??? ????.

$?npm?install?--save-dev?@babel/cli

?? ???? ??? ????.

#?轉碼結果輸出到標準輸出
$?babel?test.js
?
#?轉碼結果寫入一個文件
#?--out-file?或?-o?參數(shù)指定輸出文件
$?babel?a.js?--out-file?b.js
#?或者
$?babel?a.js?-o?b.js
?
#?整個目錄轉碼
#?--out-dir?或?-d?參數(shù)指定輸出目錄
$?babel?src?--out-dir?lib
#?或者
$?babel?src?-d?lib
?
#?-s?參數(shù)生成source?map文件
$?babel?src?-d?lib?-s

babel-node ??? ???? REPL ?? ?????? ?????

@babel/node ??? babel-node ??? ES6? ???? REPL ??? ?????. Node REPL ??? ?? ??? ???? ES6 ??? ?? ??? ? ????.

?? ? ??? ?????.

$?npm?install?--save-dev?@babel/node

?? ?? babel-node? ???? REPL ???? ?????.

@babel/register ??

$?npx?balel-node

@babel/register ??? require ??? ?? ???? ?? ??? ?????. ???? require? ???? .js, .jsx, .es ? .es6 ???? ?? ??? ??? ??? ?? ?? ??? ??????? ? Babel? ?????.

$?npm?install?--save-dev?@babel/register

使用時，必須首先加載@babel/register。

//?index.js

require('@babel/register');

require('./es6.js');

然后，就不需要手動對index.js轉碼了。

$?node?index.js

需要注意的是，@babel/register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。另外，由于它是實時轉碼，所以只適合在開發(fā)環(huán)境使用。

瀏覽器環(huán)境

Babel 也可以用于瀏覽器環(huán)境，使用@babel/standalone模塊提供的瀏覽器版本，將其插入網(wǎng)頁。

<script></script>

<script>

// Your ES6 code

</script>

注意，網(wǎng)頁實時將 ES6 代碼轉為 ES5，對性能會有影響。生產(chǎn)環(huán)境需要加載已經(jīng)轉碼完成的腳本。

【推薦學習：javascript視頻教程】

? ??? ?? ????? es6? es5? ???? ?? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!