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

Posted 2023-02-22

【中文标题】如何使 create-react-app 自动构建？

【英文标题】：How to make create-react-app auto build?

【发布时间】：2017-08-04 00:19:54

【问题描述】：

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

【问题讨论】：

你不能不拆分关注点，意味着在 express 上运行后端并使用 npm start (webpack-dev-server) 进行前端开发吗？

@user1185197 目前前端应用程序有许多需要服务器运行的 api 调用。这就是我通过构建文件夹运行反应应用程序的原因。有没有办法拆分？

我不明白？您对几个外部 api 有很多 api 调用？如果是这样就好了。您实际上在后端做什么需要快递？一些代码会很好

@user1185197 例如，在 react 应用程序中，示例 api 调用类似于 axios.post('/api/post/111')。当服务器在localhost:8080 运行时，请求将被发送到localhost:8080/api/post/111。我做错了这部分吗？有没有好的解耦方法？

【参考方案1】：

不幸的是，这是您必须自己做的事情。你可以使用像 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 run watch 启动 npm-watch，它就可以在更改时重建您的资产。

更新：

React-scripts 现在包含一个 proxy 选项，可将请求代理到不同的主机/端口。例如，如果您的后端在 9000 端口 /api 路由下的 localhost 上运行，那么您应该将此行添加到您的 package.json："proxy": "localhost:9000/api"。然后，您可以像通常在生产中一样提出请求。 （来源：https://create-react-app.dev/docs/proxying-api-requests-in-development）

【讨论】：

谢谢！看起来是实现我想要的简单方法

这行得通。 pacakge.json文件表示位于项目根目录下的文件

Docs here：github.com/M-Zuber/npm-watch 我安装并运行它，没有错误，但似乎没有效果。它永远不会检测到我的更改。

有趣，您可以尝试启用 legacyWatch 模式吗？这会回到 chokidar 来轮询文件以进行更改。

对我来说："watch": "build": "patterns": ["src"], "extensions": "js,jsx", "quiet": false, " legacyWatch": true, "delay": 2500, "runOnChangeOnly": false ,

【参考方案2】：

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

如果您只需要使用 Express 进行 API 请求，use the proxy feature 可让您将来自 npm start 的 API 请求代理到您的服务器。还有一个 tutorial 和一个匹配的 repository 演示了如何做到这一点。

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

【讨论】：

感谢丹的官方回答！

我可以问一个无关的问题吗？我们正在使用相对路径。我已经阅读了关于绝对路径 wrt src 文件夹问题的多个讨论，似乎将所有内容移入 node_modules 在我们的案例中可能不是一个可行的选择。这方面有什么新进展吗？谢谢！ @丹·阿布拉莫夫

Angular (2.x+) 和 Vue CLI 都支持构建函数的构建监视函数。当 SPA 不是独立的时，这很有用。例如，如果 SPA 托管在 ASP.NET MVC（不是 dontnetcore，因为有模板）或 CMS 页面（如 Sitecore）的视图中。在这种情况下，您需要在开发模式下构建 + 观察您的应用程序，以便您可以在主机环境中查看它并在保存时反映更改，而无需手动启动构建。不幸的是，调试必须在浏览器的开发工具中完成。

鉴于存在仅适用于 DEV 的错误，有时您似乎确实想在开发中运行生产。例如github.com/facebook/react/issues/12141

【参考方案3】：

在不同的端口上运行您的后端。如果你在 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`)

【参考方案4】：

我发现（截至 21 年 10 月 19 日）最简单的方法是使用 cra-build-watch。 完美运行。

【参考方案5】：

我也在使用 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 之前。

【讨论】：

这不能回答 OP 的问题。 :) OP 希望使用观察者构建文件，以在每次发生变化时构建应用程序。

【参考方案6】：

1> npm install create-react-app -g 2> create-react-app Your_Apps_Name

【讨论】：

你能把它扩展成一个完整的答案，包括解释每个命令的作用以及这个配方是如何工作的吗？