react项目打包编译

原创

赶路人儿 2022-06-17 09:51:07 博主文章分类：web前端 ©著作权

©著作权归作者所有：来自51CTO博客作者赶路人儿的原创作品，请联系作者获取转载授权，否则将追究法律责任

最近有个项目需要用到react做一个前端界面，在网上搜索了一些关于react相关的知识，感觉比较多、而且零散。我虽然是一个后端开发工程师，但之前接触过一些界面开发，比如：jsp、ajax、html、css的还是了解一些，但是遇到这个react，感觉有点懵比。写法上和之前的完全不同，而且看了一写示例后发现，现在的前端开发和后端有点类似了，需要编译、打包...

好了，废话不多说，进入今天的正题。我在github上找到一个项目https://github.com/ltadpoles/react-admin 通过这个项目整体把握一下react，下载下来后如何运行？

1、安装nodejs环境：

这个就不废话了，直接上之前的一篇文章吧

2、下载项目、编译、启动：

1）下载

cd /data
wget https://github.com/ltadpoles/react-admin/archive/master.zip
unzip react-admin-master.zip

2）接下来我们使用npm下载依赖：

cd /data/react-admin-master
npm install

一般情况，执行这个命令就会成功下载依赖到node_moduls，但这次报了一个错：npm EACCES: permission denied

解决方法：

cd /data/react-admin-master
npm i --unsafe-perm

3）编译：

cd /data/react-admin-master
npm run build
> react-admin@0.1.0 build /data/react-admin-master
> react-app-rewired build

Creating an optimized production build...
。。。
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

根据输出我们可以看到，在react-admin-master下新建了一个build文件夹，这个文件夹是用来上线用的。我们看下其结构：

./
├── asset-manifest.json
├── favicon.png
├── index.html
├── manifest.json
├── precache-manifest.212f4f915e45f4bedbb826a93733418a.js
├── service-worker.js
└── static
    ├── css
    │   ├── 0.e1069116.chunk.css
    │   ├── 0.e1069116.chunk.css.map
    │   ├── 1.f2693133.chunk.css
    │   ├── 1.f2693133.chunk.css.map
    │   ├── 2.855d33ea.chunk.css
    │   ├── 2.855d33ea.chunk.css.map
    │   ├── 32.4ac16fbd.chunk.css
    │   ├── 32.4ac16fbd.chunk.css.map
    │   ├── 33.7e2b1ae9.chunk.css
    │   ├── 33.7e2b1ae9.chunk.css.map
    │   ├── 34.10a87976.chunk.css
    │   ├── 34.10a87976.chunk.css.map
...

index.html文件，其实就是public文件夹中的index.html文件经过压缩而成的，并且把一些诸如css文件和js文件以及其他的配置文件都替换成了build文件夹中的。
manifest.json文件，关于项目整体的一些配置。
asset-manifest.json文件，更为重要，里面写的就是我们打包后的css和js文件名，可以看到，文件名在每次重新打包的时候，都会哈希计算一次当做文件名的一部分，这样也就避免命中缓存。
static文件夹下放的，就是我们打包好的css和js这些静态资源。

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

4）启动：

既然无法直接通过index.html来访问，那我们如何做呢？

通过npm run build的输出可以看到，可以使用serve -s build来启动。首先要安装serve

npm install -g serve 

#进入build目录，然后使用serve启动
cd build
serve -s build
#报错：
serve: command not found

#----------------
#serve安装成功了以后，运行serve -s build 项目就启动起来了，它的固定端口是5000；那么我们想改动端口怎么办呢？运行下面的命令就可以用指定的端口启动项目了：
serve -l 2000 -s build  //从2000端口启动项目

解决：

cd build
npx serve
ERROR: Cannot copy to clipboard: write EPIPE

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   Serving!                                      │
   │                                                 │
   │   - Local:            http://localhost:5000     │
   │   - On Your Network:  http://10.39.16.31:5000   │
   │                                                 │
   └─────────────────────────────────────────────────┘

参考：

https://www.jianshu.com/p/edec36bfa54b

https://www.jianshu.com/p/7f81913d1298

https://www.html.cn/qa/react/15219.html