サーバーをNodeで建てる
Expressの型定義があんまりイケてないので無理にTypeScriptにしなくていい気がする
npx babel-node ./src/index.js
でES6のまま実行できる
上記のように適当に構文作って
dist/index.jsが自動生成されて変換されていたら動作確認終了
$ yarn dev
npm scriptsで簡潔に。
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あたりにこれを追加
本筋とは関係ないが、babel-cliを入れたのでbabel-nodeが使えるので覚えておきましょう
package.json
{
"scripts": {
"build": "npx babel src --out-dir dist"
}
}
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で簡潔に。
コメント
コメントを投稿