react项目打包编译
创始人
2024-05-30 15:05:56
0

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

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


1、安装nodejs环境:

这个就不废话了, 直接上之前看过的一篇文章吧
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 buildCreating 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 serveserve -s buildFind 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://juejin.im/post/5db64fa95188256edd7e73ae
https://juejin.im/post/5aa26c106fb9a028d936c357
https://www.jianshu.com/p/7f81913d1298
https://www.html.cn/qa/react/15219.html

相关内容

热门资讯

安卓10系统省电不,安卓10系... 你有没有发现,自从升级到安卓10系统,手机续航能力好像大不如前了?别急,今天就来给你揭秘安卓10系统...
cm14安卓系统,深度定制与极... 你有没有发现,你的安卓手机最近是不是有点不一样了?是不是觉得系统运行得更加流畅,界面也更加美观了呢?...
平板安卓系统咋样升级,轻松实现... 你那平板安卓系统是不是有点儿卡,想给它来个升级大变身?别急,让我来给你详细说说平板安卓系统咋样升级,...
安卓原系统在哪下载,探索纯净体... 你有没有想过,为什么安卓手机那么受欢迎?那是因为它的系统——安卓原系统,它就像是一个充满活力的魔法师...
安卓系统procreate绘图... 你有没有发现,现在手机上画画变得越来越流行了?尤其是用安卓系统的手机,搭配上那个神奇的Procrea...
电视的安卓系统吗,探索安卓电视... 你有没有想过,家里的电视是不是也在悄悄地使用安卓系统呢?没错,就是那个我们手机上常用的安卓系统。今天...
苹果手机系统操作安卓,苹果iO... 你有没有发现,身边的朋友换手机的时候,总是对苹果和安卓两大阵营争论不休?今天,咱们就来聊聊这个话题,...
安卓系统换成苹果键盘,键盘切换... 你知道吗?最近我在想,要是把安卓系统的手机换成苹果的键盘,那会是怎样的体验呢?想象那是不是就像是在安...
小米操作系统跟安卓系统,深度解... 亲爱的读者们,你是否曾在手机上看到过“小米操作系统”和“安卓系统”这两个词,然后好奇它们之间有什么区...
miui算是安卓系统吗,深度定... 亲爱的读者,你是否曾在手机上看到过“MIUI”这个词,然后好奇地问自己:“这玩意儿是安卓系统吗?”今...
安卓系统开机启动应用,打造个性... 你有没有发现,每次打开安卓手机,那些应用就像小精灵一样,迫不及待地跳出来和你打招呼?没错,这就是安卓...
小米搭载安卓11系统,畅享智能... 你知道吗?最近小米的新机子可是火得一塌糊涂,而且听说它搭载了安卓11系统,这可真是让人眼前一亮呢!想...
安卓2.35系统软件,功能升级... 你知道吗?最近在安卓系统界,有个小家伙引起了不小的关注,它就是安卓2.35系统软件。这可不是什么新玩...
安卓系统设置来电拦截,轻松实现... 手机里总是突然响起那些不期而至的来电,有时候真是让人头疼不已。是不是你也想摆脱这种烦恼,让自己的手机...
专刷安卓手机系统,安卓手机系统... 你有没有想过,你的安卓手机系统是不是已经有点儿“老态龙钟”了呢?别急,别急,今天就来给你揭秘如何让你...
安卓系统照片储存位置,照片存储... 手机里的照片可是我们珍贵的回忆啊!但是,你知道吗?这些照片在安卓系统里藏得可深了呢!今天,就让我带你...
华为鸿蒙系统不如安卓,挑战安卓... 你有没有发现,最近手机圈里又掀起了一股热议?没错,就是华为鸿蒙系统和安卓系统的较量。很多人都在问,华...
安卓系统陌生电话群发,揭秘安卓... 你有没有遇到过这种情况?手机里突然冒出好多陌生的电话号码,而且还是一个接一个地打过来,简直让人摸不着...
ios 系统 安卓系统对比度,... 你有没有发现,手机的世界里,iOS系统和安卓系统就像是一对双胞胎,长得差不多,但细节上却各有各的特色...
安卓只恢复系统应用,重拾系统流... 你有没有遇到过这种情况?手机突然卡顿,或者某个应用突然罢工,你一气之下,直接开启了“恢复出厂设置”大...