CLI でなくコード上の webpack で React の開発環境を作る

この記事は何か？

JavaScript Advent Calendar 2023 12日目です。

通常、Recat の環境を構築するには、create-react-app か create-react-app なしで CLIでコマンドを打って環境構築をすると思います。
ここでは、そうではなくて、コード上で webpack を呼び出して、React の環境構築をする方法を説明します。

create-react-app なしでも、CLI ばっかりで中身がどうなっているか気になる方向けの記事になります。
また、この記事では nextjs には触れません、、、が、nextjs や remix のような React フレームワークを作るためには役にたつと思います。

まとめると

1. webpack を コード上で import し、それを使ってコードをまとめるコードを書く（はまりどころ多数）
2. jsx がついた react のコード全てに、/* @jsx React.createElement */をつける
3. webpack をかいたコードを動かす
4. bundleされたファイルが出力されるので、index.html のスクリプト部分に bundle されたファイルを加える。
5. 内容を確認する

成果物

説明

上のまとめを１つずつ説明していきます。
まず 前提として、npm なりで プロジェクトを作って、React のソースコードを src 配下に書きます。

webpack を import したコードを書く

その後で、この src 配下の React を webpack で１つのファイルにまとめます。このソースコードを作るのが厄介で、ネットを普通に検索しても CLI を使った webpack の使い方しか出てきません。
自分の場合は、以下のようなコードを書いて、webpack をコード上から呼び出しました。

index.js (webpackをコード上から呼び出すコード)

import webpack from "webpack";
import { fileURLToPath } from 'url';
import path from "path";
import fs from "fs";
import HtmlWebpackPlugin from "html-webpack-plugin";
import {glob} from "glob";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

(async() => {

const files = (await glob("src/**/*")).map((file) => "./" + file);

const config = {
    context: __dirname,
    mode: "development",
    entry: files,
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.jsx|js$/,
++              include: [/node_modules/, path.resolve(__dirname, 'src')],
                use: {
                    loader: 'babel-loader',
                    options: {
++                     presets: ["@babel/preset-react", "@babel/preset-env"],
                    }
                },
            }
        ]
    },
    plugins: [
++      new HtmlWebpackPlugin({
++          template: './public/index.html',
        })
    ]
}

++ const compiler = webpack(config);
++ compiler.inputFileSystem = fs;
++ compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
    if (err) console.log(err);
    // console.log(stats);
});

})()

重要箇所は、ハイライトさせました。
特に、module.rules[0].include の行はないとエラーが出てきてしまうので注意です。

React のプロジェクトの先頭にjsxのコメント行を加える

この後で、React のプロジェクトに戻り、その先頭に

index.jsx

/** @jsx React.createElement */

のようなコメント行を追加します
didact を作ったことがある方なら見たことがあるかもしれませんが、こちらを加えることで jsx をどう仮想DOMのh関数でjsx記法をjsオブジェクトに変えるかを決めることができます。今回は React の組み込みの関数 React.createElement を使っていきます。

webpack を書いたコードを動かす

ここまで書いて、ようやく webpack のコードでコードを bundle させることができます。
通常通り

node index.js

で webpack のコードを動かします。

bundle されたファイルを確認

こうすると、bundle されたファイルが、dist 配下に現れるので、これと index.html を http-server などを使って、アクセスすると、React が動くことが確認できると思います。

---

以上でした。
では、皆様もいいコーディングライフを！