Question

我不想使用create-react-app。那么，如何为简单的React应用配置最小工作开发环境？

注意：：我知道我可能只包含所有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，但是不幸的是，用户比我领先一步，答案只是针对他们的问题的非常具体的答案。我想先了解一般情况，即我需要什么和如何设置？

Answer 1

先决条件：

计算机上安装了Node.js（npm）

因此，对于极小的设置，您想要...

初始化文件夹
- 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-dev ...
- 反应
- react-dom
- 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：

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"]
}

Answer 2

如果您想快速制作原型，可以尝试https://codesandbox.io/

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

2 个答案:

先决条件：