不使用CLI，在代碼中使用webpack來建立React的開發環境

3 年 ago
韵, 科
1 minute

这篇文章是关于什么的？

2023年的JavaScript降临日历已经到了第12天。

一般来说，想要构建Recat环境，通常需要使用create-react-app命令行界面来进行环境配置。但在这里，我们将介绍一种不同的方法，即在代码中调用webpack来进行React环境的搭建。

這篇文章適合對 create-react-app 不感興趣，但對於只使用 CLI 想知道內容的人。此外，雖然本文不涉及 nextjs，但我認為它對於製作類似 nextjs 或 remix 的 React 框架會很有幫助。

综合起来

    1. 以下是对原文的中文转述：

在代码中导入webpack并使用它来编写代码（可能会遇到一些困难）。
对带有jsx的React代码添加/* @jsx React.createElement */注释。
运行编写的webpack代码。
生成bundle文件后，将bundle文件添加到index.html的脚本部分。
检查内容。

实际产物

 

解释

我会逐一解释上面的总结。
首先，作为前提，在npm或其他方式下创建一个项目，并将React的源代码写在src文件夹下。

写一个引入了webpack的代码。

然后，将src文件夹中的React文件使用webpack打包成一个文件。代码的编写很麻烦，普通的网络搜索只会找到使用CLI的webpack使用方法。我自己的情况下，编写了以下的代码，以便从代码中调用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项目，并将其置于首位。

/** @jsx React.createElement */

我会向代码中添加类似的注释行，如果你做过didact的开发，可能已经见过了，但是通过添加这部分代码，可以将jsx语法转换为js对象，用于虚拟DOM的h函数。这次我们将使用React内置的函数React.createElement。

运行编写了Webpack代码的代码

写到这里，终于可以使用 webpack 的代码将代码打包在一起了。
照常进行。

node index.js

使用webpack运行代码。

查看已捆绑的文件。

如果按照这种方式进行操作，打包好的文件将出现在dist目录下，之后使用http-server等工具访问这个文件夹下的index.html，可以确认React是否能够正常运行。

以上です。
那么，祝大家度过愉快的编码生活！

bannerAds