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

相关内容

热门资讯

系统如何与安卓互通,技术融合与... 你有没有想过,你的手机系统竟然能和安卓系统这么默契地互通有无?这就像是一场跨越科技界的友谊赛,让我们...
安卓系统 扫码枪,安卓系统下扫... 你有没有想过,在繁忙的超市收银台,那些快速流畅的扫码操作,背后其实隐藏着一个小小的英雄——安卓系统扫...
平板插卡推荐安卓系统,安卓系统... 你有没有想过,你的平板电脑是不是也能像智能手机一样,随时随地扩充存储空间呢?没错,这就是今天我要跟你...
安卓系统固件安装失败,原因排查... 最近是不是你也遇到了安卓系统固件安装失败的问题?别急,让我来给你详细说说这个让人头疼的小麻烦,让你一...
ios系统和安卓区别,系统差异... 你有没有发现,现在手机市场上,iOS系统和安卓系统就像是一对双胞胎,长得差不多,但性格却截然不同。今...
安卓系统2.3优酷,优酷的崛起... 你有没有发现,安卓系统2.3时代的那股怀旧风?那时候,优酷可是视频界的巨头,多少人都是看着优酷长大的...
安卓导航系统密封,安卓导航系统... 你有没有发现,现在手机导航系统越来越智能了?尤其是安卓系统的导航,简直就像一个贴心的导航小助手,带你...
a版安卓11系统,a版深度解析... 你知道吗?最近手机界可是炸开了锅,各大品牌纷纷发布了搭载a版安卓11系统的手机。这可不是什么小打小闹...
安卓系统的模拟吉他,随时随地弹... 你有没有想过,在手机上也能弹奏吉他呢?没错,就是那种模拟吉他的安卓系统应用,让你随时随地都能享受音乐...
王者适配的安卓系统,深度解析适... 你有没有发现,最近玩《王者荣耀》的小伙伴们都在议论纷纷,说新出的安卓系统简直是为王者量身定做的!没错...
安卓系统自动定位关闭,隐私保护... 你有没有发现,手机里的安卓系统有时候会自动定位,这可真是让人又爱又恨啊!有时候,我们并不想让别人知道...
安卓系统电量耗尽测试,全面解析... 手机电量耗尽,这可是每个手机用户都头疼的问题。你有没有想过,你的安卓手机在电量耗尽前,到底经历了哪些...
如何升级车载安卓系统,车载安卓... 亲爱的车主朋友们,你是不是也和我一样,对车载安卓系统升级这件事充满了好奇和期待呢?想象当你驾驶着爱车...
安卓办公哪个系统好,深度解析哪... 你有没有想过,在安卓办公的世界里,哪个系统才是你的最佳拍档呢?在这个信息爆炸的时代,选择一个既强大又...
安卓系统差劲怎么解决,重拾流畅... 你有没有发现,安卓系统有时候真的让人头疼得要命?手机卡顿、应用崩溃、电池续航短,这些问题是不是让你抓...
喜欢安卓系统的原因,探索用户偏... 你有没有发现,身边的朋友、同事,甚至家人,越来越多的人开始使用安卓手机了呢?这可不是简单的潮流,而是...
安卓系统金立手机,品质生活新选... 你有没有发现,最近安卓系统下的金立手机突然火了起来?没错,就是那个曾经陪伴我们走过无数时光的金立手机...
无安卓系统的电视,新型无系统电... 亲爱的读者们,你是否厌倦了那些充斥着安卓系统的电视?想要尝试一些新鲜玩意儿?那就跟我一起探索一下无安...
麒麟系统能刷安卓系统吗,轻松刷... 你有没有想过,你的麒麟手机能不能装上安卓系统呢?这可是个让人好奇不已的问题。现在,就让我来带你一探究...
手机公司安卓系统吗,手机公司引... 你有没有想过,为什么你的手机里装的是安卓系统而不是苹果的iOS呢?这背后可是有着不少故事和门道的哦!...