讓Node.js支援ES6的語法
使用命令,全域性安裝es-checker
:
cnpm install -g es-checker
安裝好之後,執行以下命令來檢視Node.js對ES6的支援情況。
es-checker
可以從輸出中檢視當前版本的Node.js對ES6的支援情況。
ECMAScript 6 Feature Detection (v1.4.1) ========================================= Passes 38 feature Detections Your runtime supports90% of ECMAScript 6 =========================================
新增ES6支援
首先,使用cnpm init
初始化cnpm工作目錄,生成package.json
檔案。
cnpm init -y
接下來,需要安裝Babel-cli。全域性安裝和本地安裝都可以。
// 全域性安裝
cnpm install babel-cli -g
// 本地安裝
cnpm install babel-cli --save
然後,安裝babel-preset-es2015來支援ES6的語法。
cnpm install babel-preset-es2015 --save
安裝完之後,還需要新增一個名為.babelrc
的配置檔案。方便babel-cli
使用babel-preset-es2015
。檔案內容如下:
{ "presets": [ "es2015" ], "plugins": [] }
測試ES6
使用es-checker
測試Node.js的時候,發現Node.js不支援import
語法。我們可以測試import
建立一個index.js檔案,內容如下:
import { createServer } from 'http'; var server=createServer(function(req,res){ console.log(req.method+':'+req.url); //console.log(req.method+':'+req.url); res.writeHead(200,{'Content-Type': 'text/html'}); res.end('<h1>Hello world!</h1>'); }).listen(8060); console.log('http://localhost:8060');
直接使用Node.js執行index.js:
node index.js
執行結果會報錯:
(function (exports, require, module, __filename, __dirname) { import { createServer } from 'http';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:282:19)
Node.js不支援import
語法。接下來,使用babel來執行index.js。
全域性安裝的檢測比較簡單:
babel-node index.js
結果打印出a
:
http://localhost:8088
GET:/
GET:/favicon.ico
瀏覽器輸入:http://127.0.0.1:8060/ 顯示如下就成功了!
本地安裝的話,可以使用cnpm script
來執行命令。在package.json
檔案的scripts新增命令"babel": "babel-node index.js"
,然後執行:
cnpm run babel
可以看到控制檯有打印出結果。
http://localhost:8088 GET:/ GET:/favicon.ico
瀏覽器輸入:http://127.0.0.1:8060/ 顯示如下就成功了!