如何使create-react-app自动构建？

Question

我使用create react应用程序已经有一段时间了。“npm start”或“yarn start”自动重装本身工作正常，但现在我有了另一个问题。目前，我在express server上通过build文件夹运行应用程序，我使用“npm run build ”,因为express正在提供构建文件。有许多api调用要求应用程序以这种方式运行。现在，每次手动执行“npm运行构建”变得很乏味。有没有一个简单的方法或解决办法来自动构建，就像“npm start”一样，而不弹出应用程序(我知道可以弹出并配置webpack来做到这一点，但我不想走这条路)？谢谢

Answer 1

在其他端口上运行后端。如果在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}`)

Answer 2

虽然这并不能真正回答您的问题，但您不应该在开发中使用npm-run-build。不仅重建速度很慢，而且它还跳过了重要的React性能和大小警告，因此您最终会更加抓耳挠腮，而在警告中获得的细节却少得多。

如果您只需要使用Express执行API请求，请使用< code >代理功能，该功能允许您将API请求从< code>npm start代理到您的服务器。还有一个带有匹配存储库的教程演示了如何做到这一点。

当然，在生产中，您应该使用< code>npm run build生成的版本。但是您只需要在部署之前运行它。

Answer 3

不幸的是，这是你必须自己做的事情。您可以使用类似npm-watch的工具来完成您想要的任务：

安装npm-watch

npm i --save-dev npm-watch

package.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 运行监视来启动 npm-watch，这样它就可以在更改时重新构建您的资产。

更新：

React-scripts现在包括一个< code>proxy选项，该选项将请求代理到不同的主机/端口。例如，如果您的后端运行在< code>/api路径下的< code>localhost端口< code>9000上，那么您应该将这一行添加到您的package . JSON:< code > " proxy ":" localhost:9000/API " 。然后，您可以像在生产中一样发出请求。(来源:https://create-react-app . dev/docs/proxy ing-API-requests-in-development)