react项目打包编译

浅浅的花香味﹌ 2021-08-30 14:04 528阅读 0赞

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

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

1、安装nodejs环境：

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

[https://blog.csdn.net/liuxiao723846/article/details/48519593][https_blog.csdn.net_liuxiao723846_article_details_48519593]

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_edec36bfa54b]

[https://juejin.im/post/5db64fa95188256edd7e73ae][https_juejin.im_post_5db64fa95188256edd7e73ae]

[https://juejin.im/post/5aa26c106fb9a028d936c357][https_juejin.im_post_5aa26c106fb9a028d936c357]

[https://www.jianshu.com/p/7f81913d1298][https_www.jianshu.com_p_7f81913d1298]

[https://www.html.cn/qa/react/15219.html][https_www.html.cn_qa_react_15219.html]

[https_github.com_ltadpoles_react-admin]: https://github.com/ltadpoles/react-admin
[https_blog.csdn.net_liuxiao723846_article_details_48519593]: https://blog.csdn.net/liuxiao723846/article/details/48519593
[https_www.jianshu.com_p_edec36bfa54b]: https://www.jianshu.com/p/edec36bfa54b
[https_juejin.im_post_5db64fa95188256edd7e73ae]: https://juejin.im/post/5db64fa95188256edd7e73ae
[https_juejin.im_post_5aa26c106fb9a028d936c357]: https://juejin.im/post/5aa26c106fb9a028d936c357
[https_www.jianshu.com_p_7f81913d1298]: https://www.jianshu.com/p/7f81913d1298
[https_www.html.cn_qa_react_15219.html]: https://www.html.cn/qa/react/15219.html