1. 程式人生 > >ECMAScript 6 學習筆記(1)--編譯環境搭建

ECMAScript 6 學習筆記(1)--編譯環境搭建

nodejs babel轉碼 es6環境安裝

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

ECMAScript是一種定義腳本語言的規範,Javascript正是基於這種規範的一種實現。JavaScript是一種弱類型定義、動態編程腳本語言,通過解釋器運行而非編譯機器碼運行。

ECMAScript6調試環境配置,最新版本的nodejs對ES6能夠大部分支持,並非全部。可以用ES-Checker對安裝的nodejs檢測支持es6的程度:
(1)安裝:npm install -g es-checker
(2)windows下cmd運行es-checker,如下:

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

Babel 是一個廣泛使用的 ES6 轉碼器,對ES6代碼轉碼為ES5。配置方法如下:
(1)在調試項目的根目錄下,用npm(最新的nodejs自帶npm模塊管理工具)安裝對應的規則模塊(根目錄下會生成一個node_modules文件夾),如下:

//最新的轉碼規則
npm install --save-dev babel-preset-latest

//react轉碼規則
npm install --save-dev babel-preset-react

//選2階段的語法提案

$ npm install --save-dev babel-preset-stage-2

babel 官方推薦將 Babel 安裝在本地,因為 Babel 的不同版本以及不同轉碼規則會起到不同的效果,全局安裝會帶來不必要的麻煩,所以沒有加 -g 參數。

(2)在調試項目的根目錄下新建.babelrc文件,內容配置如下:

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

(3)在項目調試根目錄下建立src(源文件),dist(轉碼後生成文件)。Babel 提供babel-cli工具,用於命令行轉碼。

npm install --global babel-cli

命令格式如格式如下:

babel example.js
//轉碼結果寫入compiled.js --out-file或-o
babel example.js --out-file compiled.js

babel example.js -o compiled.js

//整個目錄轉碼,src目錄下指定輸出dist下,--out-dir 或 -d參數
babel src --out-dir dist
babel src -d dist

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


babel因為不是全局安裝,所以在當前目錄下使用命令需要再二次配置,兩個方案:
a、在項目的根目錄下自行添加一個 babel.cmd 文件,並寫入以下內容,就能使用項目裏的 babel 命令

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

同樣使用 babel-node 命令,在項目的根目錄下自行添加一個 babel-node.cmd 文件,並寫入以下內容:

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

b、babel-cli 模塊已經安裝就緒,然後改寫當前目錄下的:package.json(如果沒有該文件,用npm init生成)

{
"name": "es6",
"version": "1.0.0",
"description": "es6",
"main": "index.js",
"scripts": {
"build": "webpack --progress"
},
"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"
},
"scripts": {
"build": "babel src -d dist"
}
}

轉碼的時候直接運行以下命令:

npm run build

該命令將目錄src中源文件轉碼到指定目錄dist。

ECMAScript 6 學習筆記(1)--編譯環境搭建