00:00
好了各位啊,说完了昂特地的基本使用啊,我们再来点进阶的操作啊,我们不在这儿花费大量的时间一个一个给大家就是过这个组件了啊,以后需要用到的话呢,大家仔细自己看一下文档就可以啊,说点高级的操作,打开我的代码啊,现在呀,你这代码这么写其实有点不太合理,哪不合理呢?同学,只有一行不合理就是在这儿,同学我问一下,现在我用到了昂特地理的哪些组件呢?好像是这两个组件。外加这三个图标对吗?同学,所以说那你觉不觉得引入样式的时候,我只引入这五个人的样式是不是就可以了,哎,咱就说这样式。啊,但是你现在这么引入是啥意思呢?同学,你把昂特地所有组件的所有样式全都引进来了。这就不太好,为啥说呢?因为这个文件会很大的。
01:04
对吧,那你想包含整个昂地的样式,那这文件得多大呀,是吧,也就是说你只用到了这五个,那么其实就是你把它这文档里的,你比如说分隔线的栅格啊,布局啊,间距啊,这些组件的样式也都引进来了,这不太合理吧?哎,所以说我们要做的第一个高级的事儿呢,就是按需引入样式,用到哪个组件我就引哪个组件的样式,你比如说。我只用到了这五个组件,那我就只引入这五个组件的样式,多一个我都不引入,如何按需引入呢?回到官网,那你不能自已猜啊,同学,你像这种成型的UI组件库,它都有自己独到的封装,你不能自已去猜,那点哪儿呢?我们点文档,哎,点文档同学组建这个选项卡呢,都是他教你怎么用组件,明白不?哎,你点击文档。好,你看啊,一上来就是这种on d的这个图标加上react是吧?哎联手了,嗯,哎说老师那在哪儿去修改呢是吧?啊怎么能变成这个按需引入呢?啊同学呢,是这样的,这呢版本是4.8.2,对于昂D啊4.x这个版本来说,它里边这些文档啊,写的就不再那么的详细了,所以说你要看4.x呢,你按照它这些配置写下去之后呢,嗯,怎么讲就感觉跳跃性很强,说的不是那么仔细,那所以说你想看点仔细的配置,同学推荐大家呢,诶回到这个3.x版本啊,4.x版本是什么时候更新的啊同学是在2020年的二月份左右。
02:50
哎,就是应该是疫情正严重的那个时候,诶就是2020年的,诶咱们的这个过年的时候,然后他更新的一个4.x版本啊,那当时文档还不是特别全完,现在不断不断不断的完善,如果你想看更详细的配置,教你怎么一步一步来推荐大家换到3.x,诶点击3.x,哎来到这好来到这之后呢,同学你看这明显这选项就多了一点是吧?哎,然后咱点击左侧的这个叫在create react APP中使用啊同学,那你说我们目前的这个东西,是不是整个这个工程都是react APP帮我创建的脚手架呀,那它官网里边所说的这个说在create react APP中使用,其实说白了就是在react脚手架中你如何使用是吧?来点击它,然后呢,他就教你了,说呀,你得怎么的,是这个创建工程,然后你得进去,然后你得压start同学,这些东西我们都会。
03:50
他告诉你,你还得引入昂地,你得首先安装完了,你引入按钮,同学这我们也会,所以说呀,同学这咱就不一点一点看了,很多的工作,刚才我们都已经做完了,我们直接往下滚动,咱就一下子就来到高级配置这读一读,你看他咋说的,他说在这个例子哪个例子。
04:10
就是他上边写那个例子,老师他写啥例子了?哎呀,比我这例子还简单呢,用的还没咱这组件多呢,对吧,你就暂且理解为这例子,这例子怎么了呀?读还有一些优化空间,咋优化呀?啊说比如无法进行什么主题定制,哎,读后半句话,主题定制一会儿咱再说先做个简单的,他说而且看上边的例子,就是刚才写的例子,加载了全部的昂D组件样式,就算经过了这个g zip压缩之后,也大到60KB,这对前端来说就已经挺大了,这文件60KB,说老师呢,怎么办呢?哎,就得按需引入,好,那他接下来呢,就开始教你进行按需引入了,然后你看他读后半句话,他说此时我们需要对这个create react APP的默认配置进行一些定义。
05:05
那同学create react APP是不是脚手架自动生成的那些配置啊?他说要对这些配置进行自定义,那回到代码当中,我问大家一下,从一到21是不是都是我写的东西?Note modus不说了,是依赖public s RC里有啥你比谁都清楚对吧?我问一下。配置在哪儿呢?配置呢?同学,你发没发现你看不到配置,那之前在讲脚手架,第一天我就跟大家说了,它这个配置呢,给你隐藏起来了,那也就简单来说,你说这个脚手架它用不用webpack呢?他必须用了,但是他把webpa的配置文件隐藏了,它防止你一个不小心把它冻坏了,说老师那我明白了,那接下来是不是就得去直接修改这个webpa这个配置啊,还真不是他通过一些别的方式呢去修改,说老师那截止到目前我都不知道怎么能把那些默认的配置给它暴露出来是吧,那react是隐藏,但我就想看看嘛,同学,我可以给大家演示一下,但是说好了我不在这个工程里演示。
06:20
为啥呢?因为在这个工程里面,如果我要暴露配置了,我就回不去了,大家回头看这个工程就是,那简直是文件太多了,那怎么办呢?我接下来呢,回到桌面上啊,同学说一下啊,刚才咱讲到哪儿,说要进行按需引入对不对,不能说全部的样式都加进来,然后就聊到这儿了,说对脚手架的配置进行修改,然后我就带着你去看看怎么能把脚手架的配置暴露出来,对不对?好,那我在桌面上呢,我开一个这个CMD,然后我新建一个create reactp,比如说叫做DEMO好回车。
07:02
我创建一个新的react脚手架,然后我在这个脚手架里边,哎,我把这个暴露啊,这个配置我暴露出来给大家看一下好吧,嗯,稍等这块视频我也不暂停啊,就让他在这这个下载着啊。稍等。等会儿啊。第一次啊,大家这个初始化脚手架的时候呢,可能会那个就是慢一点啊,还有就是呢,跟大家说一下,正好趁着它这个下载这段时间,同学我不知道啊,听视频的各位你们的样和NPM到底有没有配置淘宝镜像,没配置的赶紧配置一下,你要不配置淘宝镜像,你下载这些东西我跟你讲更慢啊,特别慢,稍等啊,等着再让他下载,嗯。稍等再走,其实这过程啊,它就是不断的下载依赖帮你去完成那些配置啊,你要真不配淘宝镜,像你这就直接联系国外的那个NPM仓库,那肯定是特别慢的,而且你连着连着连着咣就报错了,说不行,网络不通啊好了,那这工程呢,我们就准备好了,那同学啊,我问你一下,呃,这个DEMO呢,我刷新一下啊,哎呦,我看一下我把东西创建到哪去了呀?啊,应该创建到这儿去了,对吧?啊,我把工程放在这儿了,因为我刚才没有C到桌面对不对?哎,敲命令的时候同学是不是犯了错误,敲命令的时候咋的啦,我是不是直接在这个路径里敲的,那所以说那个文件在哪呢?啊,打开此电脑,打开C盘啊,找到这个用户,找到我自己这个文件夹,然后你去找吧,肯定有DEMO,是不是在这儿呢?I Vs code打开走。
08:53
啊啊,已经运行了是吧?那我把我之前这关掉行吧?哎,把这停掉,把这关掉啊,来到此电脑找到C盘,找到用户啊,找到我的用户名,找到这个DEMO右键code的打开,同学,这是一个干干净净的react脚手架,对吗?同学,Public里的东西我们分析过,Src也分析过,这个里边是不是不包含任何的配置,好想看配置对吧?同学,你可以这么看,来到package.jason中,记不记得有一个命令叫做eject,用于暴露配置的。来,走起,接下来敲这命令第二。
09:32
Eject。看同学他问了你一下,他说你确定要这样做吗?接下来你的动作会把所有react里边核心的配置,就是关于web pack呀,各种各样的全都暴露出来,你确定这样做吗?Are you sure,输入Y,我确定糟,接下来他就开始往出暴露这些依赖了,其实这个过程当中呢,它也会下载一些东西啊,咱需要做的呢,就是等。
10:00
等啊等他全走完,是不是走完了?同学发没发现多了两个文件夹,一个叫做configig,一个叫做脚本scripts,来打开config同学,你最熟悉的文件,你会看到web pack.config.JS同学,所有这里的东西都是为了支撑脚手架运行的。啊,你打开web pack,点点DS同学们,你看看它用了多少的loader啊,其实这些都不是loader,这些你所看到的观察后边,嗯。都是啥呀?啊,兄弟们,都是插件,记不记得了?Webpa里的plugins这个插件必须得一下载,二引入,三咋的实例化才能用,对于loader来说就是一下载,然后直接就用,都不用引入对吧?所以说你只要在前边能看到引入的,那多半结尾都是plugin plugin plug pluging,对不对?那你看他写了多少的loader呢?同学你看一下,其实这配置文件呢,也不是说特别大,一共多少行呢?700多行是吧?哎,那但不是说只有这一个配置文件就够了啊,那还得需要什么解析路径的呀?啊,还得需要这个dev server的详细配置呀,都在这儿呢,同学们,你觉不觉得咱们真是要去这个配置文件里边去找,然后找到那个设置,然后让他按需引入,也不是不能,那同学你觉不觉得这成本有点高,而且一个不小心就这玩意儿,你啪要是给他冻坏了,完了同学脚趾架起不来了,对吧?哎,所以说同学们确实可以。
11:34
引用ej啊,这个命令,Ej暴露react脚手架里面所有核心的东西,然后你亲自的去大胆的改这个配置,当然可以,但是尽量避免这样做,因为你容易改坏,说老师那你看现在怎么办吧,我就想改一改关于哎这个文件里的东西,那你看你不让我暴露出来,这文件我都打不开,我都碰不到,老师那我咋改呢?你也有办法改啊,给它关掉,然后打开我们的这工程是吧。
12:07
打开。怎么改呢?文档给大家写好了啊,在官网上呢,我们来往下看,他说呢,你要引入这个库,叫做react-APP rewrite,而且说你还得修改package.jason里的启动项配置,你再往下看的时候,同学它不仅仅让你安装刚才他说的那个库,它还让你安装这个,你要再往下瞄一眼,他还让你在根目录下创建这么一个文件。啊,说的东西有点多,我们慢慢来啊,同学说说都是干嘛的,这些东西首先同学我们逆着往上去理解就能好理解一点,我要干嘛?同学们是不是修改react脚手架的配置啊,不仅要修改,而且我还不能说啊,用yanj暴露文件那种修改,那同学文件都看不件,你都摸不到这个文件,你就要改这个文件,那是不是得通过点特殊的方式呢?还有就是说文件你都看不到,你是得告诉人家,那其实我想改的是谁,你比如说同学如果这个a.GS就摆在你面前了,那你打开它你去改嘛,但是A你看不见,就相当于那个webpa.con.js你看不见,那还要改的怎么办呢?就把你要改的东西说明白啊,写在这,写在哪个文件里呢?Con FA-override.js这个文件是干嘛的?用于说明你到底要改谁?
13:38
对吧,改成什么样子都得在这儿跟人家说,朱老师那是不是写了这个文件就行呢?不是的,这个文件写完了之后只是代表啊,你说明白了,你到底要改谁,把它改成什么样子,但是他去改吗?不能改,因为你只写好了规则,没有执行这个规则,那怎么执行呢?就得借助这个库,哎,这个库专门就是找到这个文件,然后去进行修改的,好说老师那明白了,蓝色里边配的是规则,我到底改谁真正执行修改得借助这个人啊,对。
14:13
说老师那就完事了呗,那为什么还需要前边的这个库呢?那我再说一下这个橙色框的啊,大家换个颜色,这个橙色框的东西是什么意思呢?你如果用红色的这个库,按照蓝色所指定的规则修改了脚手架,你就不能够再去用脚手架里边原来启动的那个命令了,我们启动脚手架是不是一直在执行1START,那么start毕竟是一个短命令,这个短命令所对应的完整命令是不是在这儿呢?叫做react scripts start。这么启动可以,但是前提得建立在你的脚手架没有被修改,如果说通过蓝色的规则啊,然后借助红色库,你把脚手架配置改了,你就不能再用原来那种方式去启动脚手架了,你就必须得用橙色的这个库去启动脚手架。
15:10
那我想问大家,你说就这些东西,如果官方没有明确的跟咱说,那咱们哪知道要用这些库呢,是吧?哎,所以说咱慢慢来,那么第一步怎么着是不得安装这两个人啊,哎,干嘛的都跟大家说了一遍,那回到我们的工程里边啊,走样爱的这两个库。嗯,这是用于启动脚手架的,这是用于去执行修改命令的,对不对?嗯,按照你的规则我去修改嘛,嗯,稍等,呃,然后咱回到文档,咱继续看啊走安装完了是吧,他说你得修改take.ja你都改了东西了,就不能按照之前那么启动了,那你发现之前启动是这样的,现在启动是这样的,其实start还是那个start,只不过是前边换命令了,对不对,换成谁了呢?React-APP-reri,哎,得用这个库,所以说把start build test是不是都得改掉,回到代码当中,来到package这点Jason,好,那接着来吧,改这个,诶,我重新复制一下啊,刚才的东西不小心被顶丢了,复制来到这儿。
16:18
走这儿走这儿走好了,Ej不用改啊,那这一步呢,我们也做好了,回到文档,我们再往下看,接下来呀,你得具体说说了,你到底要改什么,当你执行修改的人就位了,修改之后启动脚手架的库也就位了,那么你得告诉人家改什么呀,所以说他让你建立一个什么呢?叫做con-over right.js,好好的复制。来到这,什么叫根目录?不是src,不是public,你注意啊,所谓脚手架的根目录指的就是跟package.jason同级的目录,就是跟啊,不在任何文件夹里空费个over right.js。有些同学呀,复制的时候说老师,我这不让起这名,你看是这样的,这是为什么呢?因为你多了一个空格,删下去就好了,好,那这个文件里面写什么呢?写好注释,这个文件里边就是配置具体的修改规则,好那咋修改呢?我们哪知道看文档他告诉咱怎写,那咱就复制,咱就拿过来走,说说这什么意思?它通过common GS的语法暴露了一个函数,对吗?各位,这个函数会接到原有的配置,老师他咋就能接到原有的配置呢?因为你用了这个命令去启动脚手架,所以说哎,他就能拿到这个东西了,拿到之后。
17:45
说。同学,你要这么做一点意思都没有,拿到之后啥也没改,直接返回出去了,那如果我要这么做呢?我写了一个config.a等于一。这是不是一个修改呢。其实也算是,如果他人家之前里边有A是零,你这么一修改A是不是一了呀?哎,但你这种做法呢,很无聊,我们不这么改,那怎么改呢?回到文档继续看,他说如果你想进行修改,你真想改一点东西,按需引入是吧,你得引入这个库。
18:17
没有这个Bible plugin import,你就根本没有办法做按需引入,按需引入嘛,看这名import是吧?哎,所以说你看同学他说的可明白了,Bible plugingport是一个用于按需加载组件代码和样式的Bible插件,你想了解原理吗?那就点这对吧,哎,那我们目前就是说,哎,把它配置通了,所以说执行这一步是不是得安装人让安装就安装嘛,同学你自己真正去操作的时候呢,你可以按照这个文档来,如果你不喜欢按照这个文档,稍后我给大家形成一个精简版的笔记,你按照我那五步直接做完就可以了啊,那么复制这个回到我的工程当中安装。稍等让他安装着啊行,他安装他的回头呢,咱继续看文档,接下来呢,他说让我们尝试修改空FA-overright.js,刚才是不是让你写这个文件写没写写了,刚才让你写内容写没写写了,现在说了得修改。
19:18
那说老师说白了,那意思就是刚才写这些还得再改呗,对,往下看怎么改。你观察红色框的,你再观察蓝色框的,觉不觉得他俩是一样的代码,也就是说刚才你写那一堆东西要都删掉是吧,说老师那他怎么就没有一步到位就写好呢,那就没这样写呢是吧?说老师那这就不要了,对,那要什么呢?绿色的那。红色的减号就代表不要,绿色的加号代表保留,其实跟上边这是一样的一个意思是吧,好来往下,那这一堆全都复制回到我们的代码当中,这一堆哎,我注释留着是吧,哎,删掉粘过来所有带减号的这些行,不要了,那么加号。
20:04
不是属于正规语法范围之内,就是删掉走说我说那这些东西什么意思呢?大概跟大家说一说啊,是这么一个意思,就是你呢要做按需引入,所以说这写的是import,你要做on d的按需引入,所以说写on d on d里边用了ES的这个模块化规范,所以说写个ES,你要按需引入的人不是别的,是CSS,哎,就都是这些含义,你做完了这些修改,同学,那恭喜你啊,你可以完成按需引入了,说老师,那我看文档后边怎么还有东西呢,他告诉你不要自己再引入样式了,那回到我们的代码里面,意味着就是你在app.gs里边别自己去引入样式了,把这删了去。之前我不能删,我删了整体这些东西的东西就都没了样式,对吧?但现在能删了,因为呢,你有了这个空f override.js同学,这里边写的是规则,然后靠这个库呢,真正去执行这个修改,修改完了就得靠这个库去启动,这都是一整套的东西,来测试一下n PM start看看能不能行,APP里边我可没引入样式,如果你的按需引入是成功的,接下来打开的页面样式应该依然有才对啊,如果没有,那就检查配置,肯定是你哪儿还错了是吧?稍等,等会他打开浏览器啊。
21:28
Study好了,是不是开启了,按住CTRL键点啊,它没开没开呢,我就自己复制啊,打开浏览器新开一个啊来这走同学注意观察样式,是不是依然还在,好了,我们完成了什么呢?按需引入啊,回到他这个文档里边啊同学,这些东西吧,真的是没有必要去一点一点记,知道吧?哎,那你说一个项目是不是也就配那么一次啊,对吧?哎,OK,那这一小节呢,我们听一下,稍后给大家形成笔记。
我来说两句