rug*_*ugk 11 node.js npm reactjs react-scripts create-react-app
我不想使用create-react-app. 那么如何为一个简单的 React 应用程序配置一个最小的工作开发环境呢？
注意：我知道我可能只是在运行时将所有内容都包含为 JS（这是有据可查的），但我不想要这个，因为我仍然想要一个可用于生产的版本！
我不想要的：
我确实想：
基本上，我只想使用 React。没有它周围的所有花哨的其他东西！*
我只是问这个，因为官方 React 文档没有提到这种可能性。
注意：为那些想知道为什么我想要这个的人推理。
* 实际上，忽略这些方便的开发功能等听起来太疯狂了。但我声称这有正当的理由/用例。我的意思是，所有这些对我来说都是不可用的/破坏了东西，因为我正在尝试使用 React 构建浏览器扩展。
是的，我看到了这个非常相似的问题，但不幸的是，用户比我领先一步，答案只是针对他们问题的非常具体的答案。我想先了解一般情况，即我需要什么以及如何设置？
Fre*_*hön 16
所以对于一个非常小的设置，你想要......
cd path/to/my/foldernpm 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-dev....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：
import * as React from "react";
export class App extends React.Component {
render() {
return (
<div>
Hello, world!
</div>
);
}
}
src/index.js（注意 .js，而不是 jsx - 否则 webpack 不会找到该文件，没有更多配置）：import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";
ReactDOM.render(
<App />,
document.getElementById("root")
);
npm run buildpath/to/my/folder/index.html在现代浏览器中打开你完成了！您现在可以添加任何您想要的方便的附加组件，而不会出现任何不受欢迎的膨胀。我推荐TypeScript。
对于需要支持旧浏览器的阅读者，只需执行以下两个步骤：
npm install @babel/preset-env.babelrc并将 @babel/preset-env 添加到您的预设中：{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
| 归档时间： |
|
| 查看次数： |
4244 次 |
| 最近记录： |