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

Question

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

javascriptnode.jsreactjsexpresscreate-react-app

31

我已经使用了一段时间的create react app。'npm start'或'yarn start'自动重新加载功能本身运行良好，但现在我又遇到了另一个问题。目前，我通过构建文件夹在express服务器上运行应用程序，并使用'npm run build'，因为express正在服务于构建的文件。有许多API调用需要通过这种方式运行应用程序。现在每次手动执行“npm run build”变得很繁琐。是否有一种简单的方法或解决方法可以像'npm start'一样自动构建而不会弹出该应用程序（我知道可以弹出并配置webpack来达到这个目的，但我不想走这条路）？谢谢

- Sean sean

你不能分开关注点吗？也就是说，你不能在Express上运行后端，同时使用npm start（webpack-dev-server）进行前端开发吗？ - KornholioBeavis

@user1185197 目前前端应用程序有许多需要服务器运行的 API 调用。这就是为什么我通过构建文件夹来运行 React 应用程序的原因。有没有办法分离它们？ - Sean sean

我不明白？你有很多 API 调用到几个外部的 API 吗？如果是这样的话那很好。你在后端实际上需要 Express 做什么？一些代码会很好。 - KornholioBeavis

例如，在React应用程序中，一个示例API调用将类似于axios.post('/api/post/111')。当服务器运行在http://localhost:8080时，请求将被发送到http://localhost:8080/api/post/111。我做错了吗？有没有好的方法来解耦？ - Sean sean

6个回答

16

尽管这并没有正面回答你的问题，但是在开发过程中，你不应该使用npm run build。重建速度不仅缓慢，而且还会跳过关于性能和大小的重要React警告，因此你最终会变得更加困惑，并且在警告中获得更少的细节。

如果你只需要在Express中进行API请求，请使用proxy功能，它可以让你从npm start代理API请求到你的服务器。同时还有一个教程以及配套的代码库来演示如何操作。

当然，在生产环境中，你应该使用由npm run build生成的构建版本。但你只需要在部署之前运行它即可。

- Dan Abramov

1

谢谢官方回答，丹！ - Sean sean

我可以问一个不相关的问题吗？我们正在使用相对路径。我已经阅读了多个关于绝对路径和src文件夹的讨论，似乎在我们的情况下将所有内容移动到node_modules中可能不是一种可行的选择。有任何新的进展吗？谢谢！@Dan Abramov - Sean sean

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

由于存在仅适用于DEV的错误，有时似乎确实需要在开发中运行生产环境。例如：https://github.com/facebook/react/issues/12141 - benathon

0

截至2021年10月19日，我发现最简单的方法是使用cra-build-watch。完美运作。

- borice

似乎不再与react-scripts 5.0.1兼容。 - Dawid Sibiński

0

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

- KornholioBeavis

-2

我也在使用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 run-script deploy之前，请先安装npm install -g serve。

- Viraj

这个回答并没有解答楼主的问题。:) 楼主想要使用一个观察器来构建文件，即每当有变动时都重新构建应用程序。 - Eksapsy

-11

1> 使用npm安装create-react-app -g

2> 创建React应用程序，命名为Your_Apps_Name

- Sudipta Ghosh

你能否将这个扩展成一个完整的答案，包括解释每个命令的作用以及这个代码的工作原理？ - Jason Aller

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian · Accepted Answer

很遗憾，这是您必须自己完成的事情。不过，您可以使用像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选项，它将请求代理到不同的主机/端口。例如，如果您的后端在localhost上以/api路由下的端口9000运行，则应将此行添加到您的package.json中："proxy": "localhost:9000/api"。然后，您可以像在生产环境中一样发出请求。（来源：https://create-react-app.dev/docs/proxying-api-requests-in-development）