怎么把react项目打包编译?

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

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

npm run build

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

1.png

我们来看看build文件夹结构图(因为没截到图,就借用他人的先)

2.png

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中文网 !!

以上就是怎么把react项目打包编译?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏