esbuild はプラグインなしで JSX・TSXをコンパイルできるから、React のプレイグラウンドがすぐ作れる!!
$ npm init --yes $ npm i esbuild react react-dom $ esbuild src/main.tsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js
型チェックが不要なら typescript のインストールすらいらない!!!!tsconfig.json なんて要らなかったんだ!!!
import React, {render} from 'preact/compat'; interface Props { name: string; } const App: React.FC<Props> = ({name}: Props) => <h1>Hello {name}</h1>; render(<App/>, document.querySelector('#main'));
webpack も typescript もナシで TSX がコンパイルできる!!!!!!!すごいだろ。しかも早いんだぜ。すげえだろ。
ただし: 結局 Next.js が欲しくなる
まあ、作ってるうちに結局 ESLint も Prettier も欲しくなってくるし、 型チェックもほしくなる。watch すら簡単にできないので面倒。
はじめから Next.js で作るほうが結局は楽なので、playground と割り切るとき以外 esbuild は使わないほうが吉。
ただ、React の機能を試す playground がほしい時は本当にすぐ完成するので最高。