Node.js 如何在不创建React应用程序的情况下手动配置React的最低设置？

我不想使用

create react app

。那么，我如何为一个简单的react应用程序配置一个最小的工作开发环境呢

注意：我知道我可能只包含所有内容（有很好的文档记录），但我不想要这个，因为我仍然想要一个可用于生产的版本

我不想要：

• 要进行任何缩小（）
• 进行任何连接（或者，如果更容易，我可以将所有JS连接到一个文件中）
• 任何比我写的JS更老的浏览器支持（因此没有实现这一点的transpilation）
• 任何开发服务器（我可以手动重新加载）。Preqrequisites:
  • Node.js（npm）或Thread安装在计算机上或作为可执行文件安装

  ---

  因此，对于一个非常小的设置，您希望

• 初始化文件夹

• cd路径/到/my/文件夹

• npm init

• 创建index.html
• 创建webpack.config.js
• 编辑要生成的

  package.json

  脚本
• 编写您的根组件
创建

src/components

文件夹，然后创建

src/components/app.jsx

：

import * as React from "react";

export class App extends React.Component {

  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}

• 构建：

  npm运行构建

• 在现代浏览器中打开您的

  路径/to/my/folder/index.html

完成了！现在您可以添加任何方便的附加组件，而不会出现任何不必要的膨胀。我建议您使用TypeScript
对于需要支持较旧浏览器的读者，只需遵循以下两个步骤：

• npm安装@babel/preset env

• 编辑

  .babelrc

  并将@babel/preset env添加到预设中：

---

如果你想快速原型化一些东西，你可以试试
对，我知道链接不是一个好例子，但这个quide实际上是我不久前遵循的：。此外，我花了2秒钟找到了如何使用react构建浏览器扩展：最后，看看你的问题，将其分解成小问题，一次解决一点me.你可能想看看..和一篇随机的博客文章..谢谢，你只是没有真正涵盖如果我不使用JSX，我是否可以“保存”一些复杂的/JS文件。或者它总是包含在react中，因此我甚至可能在没有react的情况下使用它？

{
  "presets": ["@babel/preset-react"]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

"scripts": {
    "build": "webpack --mode development"
  },

import * as React from "react";

export class App extends React.Component {

  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}

import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}