現状確認

Node.jsのバージョンを確認する。

node -v
v22.15.0

npmのバージョンを確認する。

npm -v
10.9.2

開発環境のセットアップ

npmを初期化する。

npm init

※ package.jsonファイルが生成される。

esbuildをインストールする。

npm install --save-exact --save-dev esbuild

esbuildのバージョンを確認し、esbuildがインストールされているか確かめる。

./node_modules/.bin/esbuild --version
0.25.5

npmでreactとreact-domパッケージをインストールする。

npm install react react-dom

app.jsxファイルをつくる。

touch app.jsx

esbuildで最もシンプルなReactコンポーネントを生成してみる。

app.jsxに以下の記述を追加する。

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

esbuildにファイルをバンドルするように指示する。

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

※ out.jsが生成されると、プロジェクトはnode_modulesディレクトリに依存しなくなる。

esbuildを起動する。

node out.js
<h1>Hello, world!</h1>

※ esbuildでビルドされたout.jsが実行された。

npmスクリプトでReactコンポーネントを生成できるようにしてみる。

package.jsonファイルにビルドコマンドを追加する。

{
   "scripts" : {
     "build" : "esbuild app.jsx --bundle --outfile=out.js"
  } 
}

npmスクリプトでコンパイルされた.jsが生成されるようになった。

npm run build