express下使用ES6

1 2 3 4 5 6 7 8 9

//環境切換配置 package.json scripts:{ "service":?"NODE_ENV=production PORT=3000 npm start" } ? ? //node js判斷 var?app = express(); app.get('env') ===?'production'

　　

原文地址：https://segmentfault.com/a/1190000006707756?utm_source=tuicool&utm_medium=referral

要讓Express在ES6下跑起來就不得不用轉碼器Babel了。首先新建一個在某目錄下新建一個項目。然后跳轉到這個目錄下開始下面的操作。

簡單走起

安裝babel-cli

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

然后，可以安裝一些presets

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

現在就應該安裝express了

$ npm?install?--save express

再創建一個我們要運行的index.js

$?touch index.js

添加如下代碼

import Express from 'express';let app = Express();app.get('/', (req, res) => {res.send(`hello world!`);
});app.listen(4321, () => {console.log('server running http://localhost:4321');
});

在package.json里添加運行的腳本

"scripts": {
+   "start": "babel-node index.js --presets es2015,stage-2"
}

現在開始運行我們的server。

$?npm?start

你現在就可以在http://127.0.0.1:4321下看到hello world了。

使用nodemon監視文件修改

我們可以修改npm start，添加對nodemon的引用。

$ npm?install?--save-dev nodemon

修改腳本。

"scripts": {
- "start": "babel-node index.js"
+ "start": "nodemon index.js --exec babel-node --presets es2015,stage-2" 
}

運行server

$?npm?start

你現在就可以修改index.js，而且因為有了nodemon我們的server會在修改發生后自動重啟。

在server還在運行的時候，修改index.js，把hello world改成YO YO YO!。然后刷新頁面，你就會看到頁面內容已經是YO YO YO!了。

準備生產環境

使用babel-node只是可以讓server運行起來，但是還不能上產品環境。

我們需要預編譯我們的代碼，那么現在就來開始準備上生產。

首先把index.js文件移到lib/index.js。

$ mv?index.js lib/index.js

接下來修改npm start腳本。

"scripts": {
- "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
+ "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2"
}

這還不夠，還需要添加兩個task?npm run build和npm run server。

"scripts": {"start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2",
+ "build": "babel lib -d dist --presets es2015,stage-2",
+ "serve": "node dist/index.js"
}

現在就可以使用npm run build累預編譯了。npm run server可以在產品環境啟動server。

$ npm run build
$ npm run server

這樣我們就可以很快的重啟server而不需要等著babel預編譯文件。

剛剛新添加了dist目錄，這個目錄需要排除在git之外。所以給.gitignore文件添加dist。

$?touch .gitignore

dist

這樣就確保不會一不小心把gist的文件上傳了。

把Babel選項保存到.Babelrc中

$?touch .babelrc

添加如下的配置。

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

現在就可以在npm腳本里去掉那些多余的選項了。

  "scripts": {
+   "start": "nodemon lib/index.js --exec babel-node",
+   "build": "babel lib -d dist", "serve": "node dist/index.js"}

測試server

最后我們需要 保證server經過了嚴格的測試。

安裝mocha。

$ npm?install?--save-dev mocha

在test/index.js里創建測試代碼。

$ mkdir test
$ touch test/index.js

import http from 'http';
import assert from 'mocha';import '../lib/index.js';describe('Example Node Server', () => {it('should retur 200', done => {http.get('http://127.0.0.1:4321', res => {assert.equal(200, res.statusCode);done();});});
});

接下來安裝babel-register。

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

然后添加npm test腳本。

  "scripts": {"start": "nodemon es6_express_app.js --exec babel-node","build": "babel lib -d dist","server": "node dist/index.js",+   "test": "mocha --compilers js:babel-register"}

現在來運行測試。

$?npm?test

你會看到下面的內容。

server running http://localhost:4321Example Node Server? should return 200 (61ms)1 passing (85ms)

OK，全文完！