项目完成后，就需要打包编译。那么怎么把react项目打包编译？下面本篇文章给大家介绍一下打包编译。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

项目是用create-react-app创建的，开发完成后，就可以着手打包了:

npm run build

执行后，项目根目录下会生成一个build文件夹，这个文件夹是用来上线用的。

我们来看看build文件夹结构图（因为没截到图，就借用他人的先）

build文件夹中几个重要的：

1、index.html文件，其实就是public文件夹中的index.html文件经过压缩而成的，并且把一些诸如css文件和js文件以及其他的配置文件都替换成了build文件夹中的。

2、manifest.json文件，关于项目整体的一些配置。

3、asset-manifest.json文件，更为重要，里面写的就是我们打包后的css和js文件名，可以看到，文件名在每次重新打包的时候，都会哈希计算一次当做文件名的一部分，这样也就避免命中缓存。

4、static文件夹下放的，就是我们打包好的css和js这些静态资源。

打包后，我们如果直接打开index.html文件，是不行的，会报错，因为正确的做法是在node的服务端以服务器的形式（域名+端口+路径）来访问。

那么该怎么做呢？

我们要在express中把build设置成我们静态资源的地址，并在express中设置中间件，拦截路由，手动渲染index.html。

之前直接用npm start来启动，就是因为webpack把我们的请求给拦截了，做了对应的渲染。

而现在打包后要放到服务器，所以我们要全部使用服务端的端口，就不能再用原来的端口了（默认npm start在3000端口），我们要使用express拦截路由。

在server.js中，因为打包后的资源都在build中，所以我们要把build设置成静态资源地址，通过中间件的形式做一些转发。

//使用node.js自带的path来解决相对路径的问题
const path = require('path')
//上线：
//设置静态资源的地址，因为打包后的资源都在/build路径下，所以我们把/build设置成静态资源地址
//把访问"/"这个路径开头的全部拦截下来，设置成静态资源地址，通过中间件的形式做一些转发
app.use("/",express.static(path.resolve('build')))
//使用中间件设置白名单
app.use(function(req,res,next){
  //如果是这两个路径前缀，就不是渲染文件相关的请求，直接next
  if (req.url.startsWith('/user/')||req.url.startsWith('/static/')) {
    return next
  }
  //反之，如果不是，就手动渲染index.html文件
  return res.sendFile(path.resolve('build/index.html'))
})

接下里，把server启动起来：

nodemon server/server.js

但是，因为我们用node.js自带的path来解决路径查找的问题，但是也会遇到一些情况，例如之前我在写项目的过程中，都是习惯cd到server文件夹底下，然后再nodemon server.js，如果用path后，它就默认认为\路径为....\server\，导致找build的时候变成从server目录下去找，就报错了，这里大家要注意一下。

喜欢像npm start这样启动的，也可以在package.json文件中配置：

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js --env=jsdom",
  "server": "nodemon server/server.js"
}

不过这是因为这个范例项目我把server也写在项目文件夹里了，所以这样写也可以，实际该怎么启动，依据自己的项目情况。

启动服务后，和原来npm start差不多，只是端口换成server的端口。

这样，所有的请求，都会经过转发和白名单操作，对应需要请求数据的就请求数据，需要渲染文件的就渲染文件。

关于上线，这里简单一提：

1、购买域名。

2、DNS解析到服务器。

3、安装Nginx，配置反向代理。

4、使用pm2管理node进程，后台执行与重启等。

更多web前端开发知识，请查阅 HTML中文网 ！！