Viteを使ってExpress.jsアプリを作る
これまでWebpackとloaderを組み合わせてバンドルを作っていたところを Vite のビルドプロセスを借りることで一瞬でビルドパイプラインを生成でき、設定項目も少なくて済むので非常に便利。 確認時点の公式のサンプルに倣う形をとった
実際にHMRが有効であり、高速にモジュールの差し替えが行われることを確認した。
code:package.json
{
"name": "example",
"private": true,
"scripts": {
"start": "node ./dist/app.js",
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"express": "^4.17.2",
"typescript": "^4.5.5",
"vite": "^2.8.0",
"vite-plugin-node": "^0.0.17"
}
}
最低限は、開発サーバーのポートと、使用するライブラリ、アプリケーションエントリへのパスの3つ。
ポートは未指定の場合 3000 が採番されるが、いろんなアプリを開発してると3000 を取り合うことはママあるので適宜調整。
code:vite.config.ts
import { defineConfig } from 'vite'
import { VitePluginNode } from 'vite-plugin-node'
export default defineConfig({
server: {
port: 3699,
},
plugins: [
...VitePluginNode({
adapter: 'express',
appPath: './app.ts',
}),
],
})
最低限のアプリケーション本体はこんな感じ。
express を初期化して、ハンドラを定義する
ポイントとなるのは、「バンドルされたアプリを実行した時」つまり「NODE_ENVがproductionの時のみ」express を listen させるということ。
それ以外の開発中は、作ったアプリは Vite のハンドラの一部として組み込まれて処理されるので listen する必要はない
code:app.ts
import express from 'express'
const app = express()
app.get('/', (_, res) => {
res.send('change me to see updates, express, hmr')
})
if (process.env.NODE_ENV === 'production') {
app.listen(process.env.PORT ? parseInt(process.env.PORT, 10) : 3000)
}
export const viteNodeApp = app
実際に実行させるとこうなる...が、HMRが有効かどうかはぜひキミの目で確かめてくれ!
https://gyazo.com/ffbcc81d6f7476e84553f39bd30b8881
https://gyazo.com/26b53d32b8165b927b59d42828ceded6