我一直在使用 create react app 一段时间。'npm start' 或 'yarn start' 自动重新加载本身可以正常工作，但现在我遇到了另一个问题。目前，我通过 build 文件夹在 express 服务器上运行该应用程序，并且我使用“npm run build”，因为 express 正在为构建的文件提供服务。有许多 api 调用需要通过这种方式运行应用程序。现在每次都手动执行'npm run build'变得很乏味。有没有一种简单的方法或解决方法可以像“npm start”一样自动构建而不弹出应用程序（我知道可以弹出并配置 webpack 来做到这一点，但我不想走这条路）？谢谢
如何使 create-react-app 自动构建？
IT技术
javascript
node.js
reactjs
express
create-react-app
2021-04-02 01:14:50
6个回答
不幸的是，这是您必须自己做的事情。你可以使用像 npm-watch 这样的工具来完成你想要的：
安装 npm-watch
npm i --save-dev npm-watch
包.json
{
"name": "react-app",
"version": "0.1.0",
"private": false,
"devDependencies": {
"npm-watch": "^0.1.8",
"react-scripts": "0.9.5",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
}
}
之后，只需用于npm run watch启动 npm-watch 以便它可以在更改时重建您的资产。
更新：
React-scripts 现在包含一个proxy选项，可以将请求代理到不同的主机/端口。例如，如果您的后端在路由下的localhost端口上运行，那么您可以将此行添加到您的 package.json: 中。然后，您可以像通常在生产中一样提出请求。（来源：https : //create-react-app.dev/docs/proxying-api-requests-in-development）9000/api"proxy": "localhost:9000/api"
在不同的端口上运行您的后端。如果您在 express 上运行，请修改文件 bin/www
var port = process.env.PORT || 9000
并在您的 /src 文件夹中创建一个配置文件，您可以在其中配置 api 主机、路由、参数等
//config/index.js
export const Config = {
protocol: 'http',
host: window.location.hostname, //or the environment variable
params: '/api/',
api: {post:'/posts/'}
}
并在您的调用组件中或在您调用 api 的任何地方
import {Config} from '../config'
axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)
我发现的最简单的方法（截至 21 年 10 月 19 日）是使用cra-build-watch。完美运行。
我也在使用 create react app，这就是我修改脚本以运行开发项目（windows）、构建生产构建和运行生产构建的方式。
"scripts": {
"start": "set PORT=8080 && react-scripts start",
"build": "react-scripts build",
"deploy": "set PORT=8008 && serve -s build"
}
npm start ：运行项目进行开发（windows） npm run-script build ：构建生产构建 npm run-script deploy ：运行生产构建
- npm install -g serve 在运行 npm run-script deploy 之前。