如何在没有 create-react-app 的情况下手动配置 React 的最小设置？答案

【问题标题】：How to manually configure a minimal setup for React without create-react-app?如何在没有 create-react-app 的情况下手动配置 React 的最小设置？
【发布时间】：2019-08-05 14:23:52
【问题描述】：

我不想使用create-react-app。那么如何为一个简单的 react 应用配置一个minimal工作开发环境呢？

注意：我知道我可能只包含 at runtime as JS 的所有内容（这是有据可查的），但我不想要这个，因为我仍然想要一个可用的版本生产！

我确实不想要：

进行任何缩小 (see related question here)
进行任何串联（或者，如果更容易做到，我可以将所有 JS 例如串联在一个文件中）
任何比我写的 JS 更旧的浏览器支持（所以没有转译）
任何开发服务器（我可以手动重新加载.????）
任何实时重载或高级开发功能

我确实想要：

使用 React 组件
（可选）包括 JSX（I know it's possible to use React without it，但假设这是我想从 React 中获得的最小优势。但是请告知我，设置/配置的哪些额外步骤将“成本”包括在内，所以这个答案适用于那些想要 JSX 和不想要 JSX 的人。）

基本上，我只是想使用 React。没有它周围的所有花哨的其他东西！*

我只是问这个，因为the official React docs 没有提到这种可能性。

注意：为那些想知道为什么我想要这个的人进行推理。

* 实际上，忽略这些方便的开发功能等听起来很疯狂。但我声称这是有正当理由/用例的。我的是例如所有这些对我来说都是不可用的/破坏了一些东西，就像I am trying to build a browser extension with React。

是的I saw this very similar question，但不幸的是，用户比我领先一步，答案只是针对他们的问题的非常具体的答案。我想先了解一般情况，即我需要什么和如何设置？

【问题讨论】：

是的，我知道链接不是一个很好的例子，但这实际上是我不久前关注的：medium.freecodecamp.org/…。另外，我花了 2 秒的时间找到如何使用 react:medium.com/@gilfink/… 构建浏览器扩展程序，最后，看看你的问题，将其分解为小问题，一次一点地解决。
你可能想看看htm ..和一篇随机的博文.. htm-2-for-javascript
查看本教程以了解没有 create-react-app 的 React v17 设置：frontendguruji.com/blog/…

标签： node.js reactjs npm create-react-app react-scripts

【解决方案1】：

先决条件：

Node.js (npm) 或 yarn 安装在您的计算机上或作为可执行文件

因此，对于一个非常简单的设置，您需要...

初始化文件夹

cd path/to/my/folder
npm init

创建一个 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>

那么你想npm install --save ...

反应
反应域
网页包
webpack-cli
@babel/core
babel-loader
@babel/preset-react

npm install --save react react-dom
npm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-react

创建.babelrc

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

创建 webpack.config.js

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

编辑package.json 脚本以构建

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

编写你的根组件

创建一个src/components 文件夹，然后创建您的src/components/app.jsx：（编辑 2021：使用函数，而不是类！）

import * as React from "react";

export class App extends React.Component {

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

在src/index.js 中编写您的 ReactDOM 渲染器（注意 .js，而不是 jsx - 否则 webpack 不会找到该文件，无需更多配置）：

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

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

构建：npm run build
在现代浏览器中打开您的path/to/my/folder/index.html

你就完成了！您现在可以添加任何您想要的方便的附加组件，而不会出现任何不必要的膨胀。我推荐 TypeScript。

对于需要支持旧版浏览器的阅读者，只需执行以下两个步骤：

npm install @babel/preset-env
编辑.babelrc 并将@babel/preset-env 添加到您的预设中：

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

【讨论】：

谢谢，如果我不使用 JSX，您并没有真正说明我是否可以“保存”一些复杂性/JS 文件。还是它总是包含在 react 中，因此如果没有 React，我什至可能无法使用它？