參考文檔：http://es6.ruanyifeng.com/#docs/intro
https://www.w3cschool.cn/ecmascript/

創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元平安做網(wǎng)站,已為上家服務(wù),為平安各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18982081108

ECMAScript是一種定義腳本語(yǔ)言的規(guī)范，Javascript正是基于這種規(guī)范的一種實(shí)現(xiàn)。JavaScript是一種弱類(lèi)型定義、動(dòng)態(tài)編程腳本語(yǔ)言，通過(guò)解釋器運(yùn)行而非編譯機(jī)器碼運(yùn)行。

ECMAScript6調(diào)試環(huán)境配置，最新版本的nodejs對(duì)ES6能夠大部分支持，并非全部。可以用ES-Checker對(duì)安裝的nodejs檢測(cè)支持es6的程度:
(1)安裝：npm install -g es-checker
(2)windows下cmd運(yùn)行es-checker，如下：

Passes 38 feature Detections
Your runtime supports 90% of ECMAScript 6

Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，對(duì)ES6代碼轉(zhuǎn)碼為ES5。配置方法如下：
（1）在調(diào)試項(xiàng)目的根目錄下，用npm(最新的nodejs自帶npm模塊管理工具)安裝對(duì)應(yīng)的規(guī)則模塊（根目錄下會(huì)生成一個(gè)node_modules文件夾），如下：

//最新的轉(zhuǎn)碼規(guī)則
npm install --save-dev babel-preset-latest

//react轉(zhuǎn)碼規(guī)則
npm install --save-dev babel-preset-react

//選2階段的語(yǔ)法提案
$ npm install --save-dev babel-preset-stage-2

babel 官方推薦將 Babel 安裝在本地，因?yàn)?Babel 的不同版本以及不同轉(zhuǎn)碼規(guī)則會(huì)起到不同的效果，全局安裝會(huì)帶來(lái)不必要的麻煩，所以沒(méi)有加 -g 參數(shù)。

（2）在調(diào)試項(xiàng)目的根目錄下新建.babelrc文件，內(nèi)容配置如下：

{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}

（3）在項(xiàng)目調(diào)試根目錄下建立src(源文件)，dist(轉(zhuǎn)碼后生成文件)。Babel 提供babel-cli工具，用于命令行轉(zhuǎn)碼。

npm install --global babel-cli

命令格式如格式如下：

babel example.js
//轉(zhuǎn)碼結(jié)果寫(xiě)入compiled.js --out-file或-o
babel example.js --out-file compiled.js

babel example.js -o compiled.js

//整個(gè)目錄轉(zhuǎn)碼，src目錄下指定輸出dist下，--out-dir 或 -d參數(shù)
babel src --out-dir dist
babel src -d dist

//-s 生成source map文件
babel src -d dist -s

---

babel因?yàn)椴皇侨职惭b，所以在當(dāng)前目錄下使用命令需要再二次配置，兩個(gè)方案：
a、在項(xiàng)目的根目錄下自行添加一個(gè) babel.cmd 文件，并寫(xiě)入以下內(nèi)容，就能使用項(xiàng)目里的 babel 命令

node .\node_modules\babel-cli\bin\babel.js %*

同樣使用 babel-node 命令，在項(xiàng)目的根目錄下自行添加一個(gè) babel-node.cmd 文件，并寫(xiě)入以下內(nèi)容：

node .\node_modules\babel-cli\bin\babel-node.js %*

b、babel-cli 模塊已經(jīng)安裝就緒，然后改寫(xiě)當(dāng)前目錄下的：package.json（如果沒(méi)有該文件，用npm init生成）

{
"name": "es6",
"version": "1.0.0",
"description": "es6",
"main": "index.js",
"scripts": {
"build": "babel src -d lib"
},
"author": "",
"license": "ISC",
"keywords": [],
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1"
}
}

轉(zhuǎn)碼的時(shí)候直接運(yùn)行以下命令：

npm run build

該命令將目錄src中源文件轉(zhuǎn)碼到指定目錄dist。

(3)以上是對(duì)命令行支持，下面配置到VScode中直接轉(zhuǎn)碼然后編譯：
a、VScode打開(kāi)項(xiàng)目文件夾，調(diào)試->添加配置，選擇node.js配置launch.json

{

"version": "0.2.0",
"configurations": [

    {
        "type": "node",
        "request": "launch",
        "name": "啟動(dòng)程序",
        "program": "${workspaceFolder}\\index.js"
    }
]

}

修改解釋的程序目錄：

{
"version": "0.2.0",
"configurations": [

{
        "type": "node",
        "request": "launch",
        "name": "啟動(dòng)程序",

        // 程序的絕對(duì)路徑

        // 調(diào)試之前要做的任務(wù)名
        "preLaunchTask": "build",   

        // 如果存在SourceMap就使用
        "sourceMaps": true,  

        // 是否啟動(dòng)后自動(dòng)停止程序
        "stopOnEntry": false,  

        // 生成的代碼中，如果無(wú)法映射回源代碼，就自動(dòng)單步執(zhí)行
        "smartStep": true,  

        // 指出編譯后的文件地址
        "outFiles": [
            "${workspaceRoot}\\dist\\**"
        ],
        "program": "${workspaceFolder}\\dist\\index.js",

    }
]

}

調(diào)試前要做的任務(wù)為：npm build run，點(diǎn)擊工具欄：任務(wù) -> 配置任務(wù)，選擇要配置的任務(wù)：npm: build，會(huì)自動(dòng)新建文件./.vscode/tasks.json，文件如下：

{

"version": "2.0.0",
"tasks": [
    {
        "label": "build",
        "type": "npm",
        "script": "build",
        "problemMatcher": []
    }
]

}
其中，tasks.json中的label屬性對(duì)應(yīng)于launch.json中preLaunchTask值。

b、配置項(xiàng)目根目錄下的package.json

{
"name": "es6",
"version": "1.0.0",
"description": "es6",
"main": "index.js",
"scripts": {
"build": "babel src -d dist", (注意這個(gè)地方的npm run build)
},
"author": "",
"license": "ISC",
"keywords": [],
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1"
}
}

（4）最后做一個(gè)測(cè)試，在src中建如下文件：
hello.js

export default () => console.log('Hello');

index.js

import hello from './hello';
hello();

運(yùn)行后，dist中會(huì)生成轉(zhuǎn)碼的es5文件，控制臺(tái)顯示hello

2018年5月19日修復(fù)錯(cuò)誤，菜鳥(niǎo)自我學(xué)習(xí)，歡迎交流指正。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：ECMAScript學(xué)習(xí)筆記（1）--編譯環(huán)境搭建（VScode）-創(chuàng)新互聯(lián)
新聞來(lái)源：http://weahome.cn/article/hdhsj.html