esbuildを試してみたい

最近ちょこちょこ見かけるesbuildを試しすついでに、長年苦手意識のある3Dとちゃんと向き合おうと言う決意をしてthree.jsの開発環境を作ってみることにしました。

とりあえずこんなん作りました。

https://github.com/ts020/es-build-theree-js-template/

まずは開発環境を作るところから

esbuildのインストール
まぁ普通に`yarn add esbuild`で終わりました

試しに動かす

// src/main.ts
function main(){ alert('何か') }
main()

// package.json
...
"scripts": {
  "dev": "esbuild src/main.ts --bundle '--define:process.env.NODE_ENV=\"development\"' --outfile=dist/out.js",
}
...

$ yarn dev

ちゃんと動きました。
ビルド時間は 0.02秒と大分早かったです。

ブラウザで見れる様にしてみる

webサーバーがいるので、適当にググってみつかった`http-server`と言うパッケージを使ってみることにしました。

とりあえずこんな構成にしてみました。

とりあえずnpmscriptにwebサーバー立ち上げるコマンドを追加しました

// package.json
...
"scripts": {
...
   "dev:start": "http-server ./dist -p 4578 -c-1",
}

/

よしよし、ちゃんとブラウザで見れる様になりました。

distをrepositoryから外す

とりあえず出力ファイルはrepositoryのゴミになるので.gitignoreで無視する様にします。

そうすると、htmlとかがなくなるのでpublicディレクトリを作ってそっちに移動させます。

`yarn dev`実行時にdistディレクトリが毎度生成される様にする

cpxとnpm-run-allとrimrafをinstallします

$ yarn add cpx npm-run-all rimraf

んで、npm scriptに追記

再度 yarn dev

$ yarn dev

コレで実行環境は割となんとかなりました

prettierとかeslintとか入れる

この辺はノリですね。

buildコマンドも追加する

だいたいこんな感じで開発環境を作ってみるわけです。