サーバーをNodeで建てる

Expressの型定義があんまりイケてないので無理にTypeScriptにしなくていい気がする

Babelの場合はビルドツール入れなくてもbabel-cliで十分という印象
目標はES6 + ホットリロード

前提: Node, yarn(or npm)

Babelのセットアップ

$ yarn init
$ yarn add -D babel-cli babel-preset-env

env以外のbabel presetを入れるのはオワコン

ルートに.babelrcを作って
.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "node": "7.10"
      }
    }]
  ]
}
targetは適当に指定

package.jsonのnpm scriptsのbuildあたりにこれを追加
package.json

{
  "scripts": {
    "build": "npx babel src --out-dir dist"
  }
}
本筋とは関係ないが、babel-cliを入れたのでbabel-nodeが使えるので覚えておきましょう
npx babel-node ./src/index.js
でES6のまま実行できる

Babelの動作確認

src/index.js

export class Person {
  constructor () {
    this.name = 'John'
  }
}

上記のように適当に構文作って
$ yarn build

dist/index.jsが自動生成されて変換されていたら動作確認終了
distは.gitignoreしとく

ESLintをぶちこむ(任意)

standardが好きなので今回はstandardを入れる
$ yarn add -D standard

自分の場合はLintはIDEでチェックするだけに使ってるので頻繁に出るno-unused-varsをwarnにしている
.eslintrc

{
  "extends": "standard",
  "rules": {
    "no-unused-vars": "warn"
  }
}

Expressをぶちこむ

$ yarn add express

src/index.js

import express from 'express'
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))
app.listen(3000, () => console.log('Example app listening on port 3000!'))

動作確認

babel-watchが良い感じなのでこれを使う

$ yarn add -D babel-watch

package.json

{
  "scripts": {
    "dev": "babel-watch ./src/index.js",
    "build": "npx babel src --out-dir lib"
  }
}

 $ yarn dev

http://localhost:3000を開くとHello, World!が出るはず
そのままsrc/index.jsのHello, World!の文字列を適当に変えてホットリロードされれば成功

rimraf入れとく

$ yarn add -D rimraf

package.json

{
  "scripts": {
    "dev": "babel-watch ./src/index.js",
    "clean": "rimraf dist",
    "prebuild": "npm run clean",
    "build": "npx babel src --out-dir dist"
  }
}

npm scriptsで簡潔に。


コメント

このブログの人気の投稿

ぷよぷよ 4つの戦法

LLR

ぷよぷよ 先折り階段を組む時に考えたこと