12

我不想使用create-react-app. 那么如何为一个简单的 React 应用程序配置一个最小的工作开发环境呢？

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

我不想：

  • 进行任何缩小（请参见此处的相关问题）
  • 进行任何连接（或者，如果更容易做到，我可能会将所有 JS 例如连接在一个文件中）
  • 任何比我写的 JS 更旧的浏览器支持（所以没有翻译）
  • 任何开发服务器（我可以手动重新加载。）
  • 任何实时重载或高级开发功能

我确实想：

  • 使用 React 组件
  • （可选）包括 JSX（我知道没有它也可以使用 React，但假设这是我想从 React 中获得的最小优势。但是请告诉我，设置/配置的额外步骤会“花费”包括在内，所以这个答案适用于那些想要 JSX 和不想要 JSX 的人。）

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

我只是问这个，因为官方的 React 文档没有提到这种可能性。

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

* 实际上，忽略这些方便的开发功能等听起来也很疯狂。但我声称这是有正当理由/用例的。例如，所有这些对我来说都是不可用/破坏的，因为我正在尝试使用 React 构建浏览器扩展。

是的，我看到了这个非常相似的问题，但不幸的是，用户比我领先一步，答案只是针对他们的问题的非常具体的答案。我想先了解一般情况，即我需要什么以及如何设置？

4

1 回答 1

17

先决条件：

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

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

  1. 初始化文件夹
  • cd path/to/my/folder
  • npm init
  1. 创建一个 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>
  1. 那你想npm install --save...
  • 反应
  • 反应域
  • 网页包
  • webpack-cli
  • @babel/核心
  • 通天塔装载机
  • @babel/preset-react

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

  1. 创造.babelrc
{
  "presets": ["@babel/preset-react"]
}
  1. 创建 webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
  1. 编辑package.json脚本以构建
"scripts": {
    "build": "webpack --mode development"
  },
  1. 编写你的根组件

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

import * as React from "react";

export class App extends React.Component {

  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}
  1. 将您的 ReactDOM 渲染器写入src/index.js（注意 .js，而不是 jsx - 否则 webpack 不会找到该文件，无需更多配置）：
import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
  1. 建造：npm run build
  2. path/to/my/folder/index.html在现代浏览器中打开您的

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

对于需要支持旧版浏览器的任何阅读者，只需按照以下两个步骤操作：

  1. npm install @babel/preset-env
  2. 编辑.babelrc@babel/preset-env 并将其添加到您的预设中：
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
于 2019-03-14T17:17:19.007 回答