初esbuild

5/16や5/17でビルドツールを調べて、とりあえずesbuildを使ってみようという気持ちなので使い始めた。

esbuild - An extremely fast JavaScript bundler

ひとまず公式ドキュメントをDeepLにかけながら読んでいってる。

ただ、自分はWebpack全盛期時代にもあまりwebpack.config.jsを触ってきたりしておらず、「まず何からすればいいんだ……？」という状態。

ひとまず雑にファイルを作りビルドコマンドを打つみたいなことをしている。

Getting Startedの通りにyarn add esbuildして、package.jsonのnpm scriptsに

{
  "scripts": {
    "build": "esbuild src/index.ts --bundle --platform=node --external:../node_modules/*"
  }
}

と書いたりしてビルドしてみたりしてる。

今回は画面がないNode.jsのアプリケーションなのでHMRが使えないことはあまり困らなさそうだけど、watchとか使ってもうまくできないのかな？

esbuild - API

HMRとはまた別物かもしれないけど。

そしてesbuildはbuild.jsというファイルを使えば設定をJavaScriptで書けるんだけど、現状は簡単なところから攻めていこうと思っているので特に作っていない。こっちのほうがデファクトスタンダードなのかな？

で、yarn buildしてみると、コンソールに結果が出てくる。

const hoge = 10
console.log(`${hoge}`)

const fuga = hoge + 10
console.log(`${fuga}`)

% yarn build
yarn run v1.22.17
$ esbuild src/index.ts --bundle --platform=node --external:../node_modules/*
// src/index.ts
var hoge = 10;
console.log(`${hoge}`);
var fuga = hoge + 10;
console.log(`${fuga}`);
✨  Done in 0.53s.

これは……挙動として合ってるの？

console.logがブラウザでないからうまく動作していないのかなと思っているのだが合ってるのかな。

とにかく今は何も分からないことだらけ。