如何制作create-react-app自动构建？

I have been using create react app for a while. 'npm start' or 'yarn start' autoreloads works fine by itself but now I have an another problem. Currently I run the app on express server through the build folder, and I use 'npm run build' since express is serving the built files. There are many api calls which requires the app to be ran through this way. Now it become tedious to manually do 'npm run build' every time. Is there a simple way or work around to build automatically just like 'npm start' without eject the app(I know could eject and configure webpack to do that, but i don't want to go down that path)? Thanks

我一直在使用create react app。 'npm start'或'yarn start'autoreloads本身工作正常,但现在我有另一个问题。目前我通过build文件夹在快速服务器上运行应用程序,我使用'npm run build',因为express正在为构建的文件提供服务。有许多api调用需要应用程序以这种方式运行。现在每次手动执行'npm run build'变得乏味。是否有一种简单的方法或解决方法自动构建就像'npm start'而不弹出应用程序(我知道可以弹出并配置webpack来做到这一点,但我不想沿着这条路走下去)?谢谢

4 个解决方案

#1

Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though:

不幸的是,这是你必须自己做的事情。您可以使用像npm-watch这样的工具来完成您想要的任务:

Install 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/"
  }
}

Afterwards, just use npm run watch to start up npm-watch so it can rebuild your assets on changes.

之后,只需使用npm run watch启动npm-watch,以便它可以在更改时重建您的资产。

#2

While this doesn’t really answer your question, you shouldn’t be using npm run build in development. Not only the rebuilds are slow, but it also skips important React warnings for performance and size, so you’ll end up scratching your head more and getting a lot less details in the warnings.

虽然这并没有真正回答你的问题,但你不应该在开发中使用npm run build。不仅重建速度很慢,而且它还跳过重要的React警告性能和大小,所以你最终会更多地抓挠你的头,并在警告中获得更少的细节。

If you just need to do API requests with Express, use the proxy feature which lets you proxy API requests from npm start to your server. There is also a tutorial with a matching repository demonstrating how to do that.

如果您只需要使用Express执行API请求,请使用代理功能,该功能允许您将来自npm start的API请求代理到您的服务器。还有一个教程,其中包含一个匹配的存储库,演示如何执行此操作。

In production, of course, you should use the build produced by npm run build. But you would only need to run it before deployment.

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

#3

Run your backend on a different port. If your running on express modify the file bin/www

在另一个端口上运行后端。如果你运行快递修改文件bin / www

var port = process.env.PORT || 9000

and in your /src folder create a config file where you configure your api host,routes, params etc

并在您的/ src文件夹中创建一个配置文件,您可以在其中配置api主机,路由,参数等

//config/index.js
export const Config = {
   protocol: 'http',
   host: window.location.hostname, //or the environment variable
   params: '/api/',
   api: {post:'/posts/'}
}

and in your calling component or where ever your calling the api's

在你的呼叫组件或你呼叫api的地方

import {Config} from '../config'

axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)

#4

i am also using create react app, this is how i modified my scripts to run project for development(windows), build the production build and run the production build.

我也在使用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 : run project for development(windows) npm run-script build : build the production build npm run-script deploy: run the production build

npm start:运行开发项目(windows)npm run-script build:构建生产构建npm run-script deploy:运行生产构建

npm install -g serve before run npm run-script deploy.

npm install -g在运行之前运行npm run-script deploy。

#1