我不想使用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 ，但不幸的是，用户比我领先一步，并且答案只是针对他们的问题的非常具体的答案。我想先了解一下一般情况，即我需要什么以及如何设置？
最佳答案
先决条件:
- Node.js (npm) 或 yarn 安装在您的计算机上或作为可执行文件
因此，对于一个非常简单的设置，您需要...
- 初始化文件夹
-
cd path/to/my/folder -
npm init
<!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 ...- react
- react-dom
- 网络包
- 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"]
}
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"]
}
关于node.js - 如何在没有 create-react-app 的情况下手动配置 React 的最小设置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55166789/