學 babel — node server 設定流程

從 CLI 略懂了一下 babel 用法、config及產出結果後,紀錄若要使用 ES6 語法於 node-server 中該怎麼設定。


推薦方法

以下按照這篇筆記一個較為理想的設定,分為開發用及正式發佈用兩步驟

首先有這樣的資料夾架構,server 的檔案在 index.js :

.app
|------server
| |------src
| | |_____index.js
| |
| |______lib
|
|_______package.json
|
|-------.babelrc
....

開發環境設定

在開發的環境,可以使用 babel-node,直接在不產出compile檔的狀況下執行 server (關於 babel-node 的記錄在這篇最下面)

package.json
"scripts": {
"start": "babel-node ./server/src/index.js",
}

跑跑看

$npm run start
> test@1.0.0 start xxxx/ReactStarter
> babel-node ./server/src/index.js
Server running at http://127.0.0.1:1337/

這樣就能在 localhost看到結果了,不過這麽做是不夠的,怎樣讓它每看到index.js 的更動就 recompile 並執行呢?

此時需要 nodemon 來協助,所以安裝它

 npm install --save-dev nodemon

稍微更改剛剛的 script

package.json
"scripts": {
"start": "nodemon ./server/src/index.js --exec babel-node ./server/src/index.js",
}

跑跑看

$npm run start
> test@1.0.0 start xxxx/ReactStarter
> babel-node ./server/src/index.js
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node_modules/.bin/babel-node ./src/server/src/index.js ./src/server/src/index.js`
Server running at http://127.0.0.1:1337/

這時候更改 index.js 後,就不用重新打 npm run start 了,只要重新整理頁面就能看到更改後的狀態。

正式環境設定

基於效能原因,app 於正式環境起始時不能使用 babel-node ,要先行 compile,所以 package.json 可以改成這樣。

package.json
"scripts": {
"start": "nodemon ./server/src/index.js --exec babel-node ./server/src/index.js",
     "build-server": "babel ./server/src -d ./server/lib",
"serve": "node ./server/lib/server.js"
}

先使用 npm run build-server

把檔案 build 到 lib 裡,再使用 npm run serve 執行,這麼一來,網站在線上執行時就可以省去 compile on the fly 的時間。

其他事

可以把 lib 加入 .gitignore 裡。


babel-node

babel-node 的介紹出現在官網的 CLI 頁面,它是一個可以先編譯後直接執行的 cli,也就是在只有單一檔案 index.js 的狀況下,這個指令

babel-node index.js

會等於

babel index.js --out-file index-compile.js

+

node index.js

它適合在開發中使用,而官網表示:

你不該再正式產品中使用 babel-node ,因為它異常的笨重,並會佔用大量的記憶體,而且為了編譯後馬上執行整個 app ,在起始時可能會面臨長時間的延遲。

所以以 babel-node ./src/server/index.js 作為正式專案起始的方法是不盡理想的,正式執行時應該要執行已經 comipe過的檔案。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.