00:00
好,咱们从这个视频开始呢,咱们就带着大家手写实现啊masterta这个库,呃之前的视频也说到了,就是master库呢,是鼻祖啊,是模板引擎界的一个鼻祖,然后它的背后的思想就是把这个模板字符串给它编译为tokens啊,然后呢,Tokens再去给它啊,去给它解析成为这样的,呃,就是实打实的盗墓字符串,这种思想实际上是非常有划时代意义的,所以现在呢,如果你想去呃有更好的高薪啊,然后更扎实的这个回答面试的啊,这个这个能力啊,让面试官知道你肚子中确实有货的话啊,那么你开始研究VO的第一步,实际上啊,就可以去手写这个master这个库啊。好,我们首先呢,先去说一下咱们的这个开发的环境啊。开发环境呢,咱们是一定要去使用这种模块化构建工具的啊,诶模块构建工具的话呢,其实有很多啊,有挖派,有roll up啊,还有parcel啊,Parcel可能在国内用的比较少啊呃,Mapa大家应该很熟悉啊,Mapa它是干嘛的呢?实际上它就是干这件事的。
01:15
啊,咱们这个PPT还有别的文字先不看,你先看这啊。那这样的话你看就是呃,多个JS文件之间呢,它可以通过require和expert对吧?诶来进行引入和暴露啊,这样的话呢,每一个JS文件它它都可以只独立的关心一个事情。啊,就是说一个JS文件,它只需要独立的关心一个事情。啊,然后呢,他们几个呢,就可以互相引入,哎,把整个功能给实现了,就特别好,特别干净。呃,所以咱们一定要去使用构建工具啊,那有的同学说老师我就喜欢写函数啊,我我不用这多个JS文件,我就是这这我写好注释啊,这一部分这部,但是我告诉你就是你发没发现一个函数,它可能就很长啊,一个函数就算30行对吧,然后呃五六个函数,这个时候你基本上你看一屏幕,其实。
02:13
啊,你屏幕不管是几寸的显示器啊,一屏幕也就显示30行。啊,那也就是说函数一多的话,你整个那个代码就特别长啊,拉来拉去的也不方便,所以说这个时候呢,既然咱们现在有这么好的这种模块化构建工具,那你就得用。明白吧,哎,就是挖派挖派DV server,咱就得用起来啊,就得用起来,那这个时候你可能会懵了,说老师挖派挖派DV server不是用来开发view项目的吗?但你你你其实这样理解很狭隘啊。它不光是开发这种view react的项目啊,咱们现在去写一个包,它都可以用它来构建啊,然后最后呢,再用PA给它打包,就是Dis啊,给它生成Dis出来啊。哎,那那等于说开发过程就很爽,因为你JS文件它就很清亮嘛,就每个JS文件它比如说就这20行,这是40行,诶就看起来很清亮,然后最后拼起来是个两三百行的东西。
03:12
对吧,所以说这个大家要明白啊,然后至于构建工具的选择,其实嗯,很多同学没研究啊。这么跟大家说就是,呃,模块打包工具呢,Ma in touch官方是用roll up打包的,哎,并且事实上呢,很多这种库啊,都是用roll up进行打包的啊,那为什么呢?因为vapa跟roll up其实都好用,但是呢,它的哲学不一样,就是vapa这个东西啊,更加侧重于开发时候的那种体验。并且大家知道哇派如果结合PA DV server啊派DV server的话。那么它就能够呃,在浏览器当中实时的去更新,对吧,实时的去更新程序啊,那么比note JS的控制台它那个更好用,因为你NOEJS虽然天生就支持JS文件之间的require。
04:03
啊,咱们要说刚才忘说了啊,就是浏览器天生是不认识这些绿颜色的词的。诶,他得通过8PAD打包才能实现啊,那为什么不在noe中调呢?因为node中如果你要调试的话,它的控制台不好用,它那个CMD那种黑底白字的窗口,你对数组的展开呀,啊,你想检查一个数组特别麻烦。啊,那为什么不用roll up打包呢?用roll up打包的话呢,哎,是因为roll up呢,它是更擅长于最终啊把几个JS文件打到一起,它开发时候那个体验不如挖派DV server啊,热更新什么的,对吧。所以我们就使用巴法d sir啊。嗯,然后这段话咱们就解释清楚了,大家可以自己看一看啊,那么。这段话说的是什么呢?这段话说的是生成库,它是UD的。Umd什么意思呢?就是说这个东西啊,它可以同时在node环境中啊,也可以在浏览器的环境中去进行使用,就是NOEJS可以用NPM可以装它,然后呢,浏览器呢,也可用script去引它啊,那很多同学其实面试的时候都会问到过这个题,就是UMB怎么实现,其实就是一个通用头。
05:15
这个通用头呢,咱们不着急啊,通用头上网一查查umd这三个词,哎,就能找到一个标准模板对吧?哎,所以这个事情就先放一放啊。好了,那咱们这个呃,代码的书写的这个地方呢,大家一定要注意,就是要注意这个版本啊,外派的最新版本是五啊,外派DV server的最新版本是四啊,但是这个五和四呢,现在啊,就是在这个20202021年啊这个呃,年末年初这会儿感觉不是兼容性不是特别好啊,所以建议大家呢就使用。老师建议的这种版本啊,就是外派四配C3,然后配外派的DV server3就行了啊好,那咱们现在就可以把开发环境啊配一配,然后这个呃,外派computer.js文件。
06:06
啊,就可以直接抄老师的了啊,这里配了模式开发模式入口是test的这个模式。啊,或者这个呃,入口是index都行啊,都可以,或者mayn都可以啊,然后打包生成邦do JS,但是呢,这里是虚拟打包,因为我配了一个DV server的配置下啊。哎,我要用3W当做根目录。啊,这是根目录,然后不压缩代码,8080端口虚拟打包,诶,也就是说虚拟打包的话,它并不会真正生成帮豆点JS文件啊,这个帮豆点JS文件并不会真正的生生成。啊,就是呃,它会在这个虚拟路径中生成,8080的虚拟径中生成,对吧,哎,所以说呃,就是。你你大家一定要注意啊,就是咱们现在啊。跟以前不一样啊,咱们现在呢,都是一种就是工程化的一些一些东西啊,工程化的咱们现在比如说给大家搜两张图片吧。
07:06
以前比如说咱们修像修邪两个字。啊,以前它不是什么工程化,就是说就是我用几个简单的机器就可以把这个鞋给进行维修。对吧,哎,咱们当然这种手工匠人啊,这种老爷爷都是手工匠人,都是很厉害的啊老爷爷啊,呃,咱们现在呢,都是比如说你要造车对吧,造车的话大家知道,就是车里的工厂都是这种机械手臂啊,大家知道就是说以前是修鞋,现在是造车修鞋,一个人拿点小工具就能修了,对吧?哎,只要你有点匠人精神就能弄了,但是现在呢,他是要有一个大的一个。车间啊,自动化的东西,那这些东西呢,就是自动化的东西是吧,诶好,那咱们现在从零开始啊,我们现在呢,刚才这个案例文件夹啊,我们就不用了,哎,我们现在新建一个啊,咱们新建的这个呢,咱们就管它叫做什么咱们上硅谷啊,咱们。
08:03
咱们要写一个自己的模板引擎对吧,那咱们现在就管它叫做SSG啊,为啥叫SSG呢?上硅谷啊,你看看SSG上硅谷啊,对吧?哎,然后上硅谷的模板引擎啊,那咱们就写个叫s SG template啊engine。哎。咱们创建这么一个文件夹啊,叫SS上硅谷啊,我说错了,SG是吧,上硅谷啊,刚才说成SSG了啊,Sgg template n啊,那这个文件夹当中呢,咱们给它拖到这个Vs code当中啊,它很好配,大家不要怕,你看啊,它首先。咱们先去给他创建一个身份证吧,是吧。哎,我们用这个CD给它进来NP miitt啊,创建一个这个身份证文件啊,按回车,然后赶紧把依赖装上NPI,一个杠大D啊杠大地表示的是开发依赖对吧,就开发工具啊,然后八派。
09:05
配四啊,咱们看一下PPT啊,Mapa这个版本呢,咱们用四啊mapa DV server呢用三。是吧,哎,挖派用四啊,然后挖派DV server DV server用三啊,A圈这个符号表示的是版本啊翻一下。好,安装过程中呢,诶,它这个文件不是出来吗?安装过程中我们就可以去写那个vapa.con.js文件啊,这个文件写起来没什么技术含量啊。所以老师咱们就直接从PPT上抄这个文件就可以了。啊,这个文件其实都可以从官网上去看,诶咱们来看一下这块是模式开发模式啊,是开发过程啊,是开发模式不是生产模式,然后这是入口文件啊,入口是点杠index JS对吧。哎,这个应该能明白啊,或者是src的index JS,那这个时候新建一个SRCE,新建一个index JS吗。
10:00
对吧,哎,然后alert。啊哈哈,我运行了是吧,哎,没什么毛病啊好outb的话表示的是出口啊,就是打包。到什么文件,哎,然后这DV server就表示的是配置一下这个,呃,咱们的va pack web pack DV server啊,好count表示的是静态文件跟目录,静态文件跟目录啊,Comprise force就表示不压缩,哎PORT8080端口号啊。好,然后最后一个注释已经写好了啊,这是一个public path表示的是虚拟一个路径啊。这些东西呢,应该呃,具备就是外派DV server,基本上只要大家用过就一定知道啊,那不知道的话也没关系,因为它大概是干嘛的,咱们现在基本上都能看见啊,咱们来看就是。我不是静态文件,咱们刚才这不写了吗?是3W啊,所以这个时候我们就要创建一个3W。
11:00
哎,然后里头呢,我们就去写一个index.html然后这个文件咱们就可以写一个对吧,就是我是index.html你好,然后他要引谁呢?对他要引谁,我看看大家能不能说对。他要引一个script,对,他是不是要去引一个虚拟杠b.JS呀。这什么,那你说老师虚拟这个文件没有啊,它真的没有,因为它是虚拟生成的吗?啊,就是它是一个虚拟打包路径啊,就是咱们一会儿这个这个src里的这个这些JS,当然我现在只创建一个JS。如果有好多GS啊,有好多GS,那这些东西都会被打包到这个虚拟路径中就行。对吧,所以这一切的一切就发生的很快。啊,就发生的很快。啊,就这个开发的这个环境,大家要会配。好,然后呢,你你你你你对你这个身份证,这再来个DV嘛,是吧,哎,然后他这儿就跑吧,派DV server就行。
12:02
看见了吧?啊,当然了,你挖派DV server一定记得要提前用杠G安装啊,哎,其实好像不用杠G安装,它能读取这个你no的modus中的这个啊,这个不一定,大家自己去试试。哎,因为老师电脑中全局就是提前杠G安装过八派DV server啊。哎,这些事情应该不难啊,那这样的话我们就可以跑这项目了,跑这个项目很简单,就是n PM run。N PM run一个DV,那n PM run一个地物的时候,实际上这个时候诶,他就会去找你的这个,找你的这个地方嘛,对吧。哎,找你这个script的这个DV运行那种挖派DVZ吗。然后wapa DV server,这个时候他就会去读这里的配置啊,就静态文件,然后呢,8080虚拟就都会走。啊,然后按回车,按回车的话,它不就开始对吧,他这有点报错。啊,报错的话,报错了,那可能真的是版本的问题啊,啊不是版本问题,是挖派C的问题。
13:02
看到没有,所以外派CR还真的给装啊,好装一下NP mi大地啊。哇,C,然后装一下。咱们看一下PPT装几啊,装三,那咱们装一下三啊。啊,那有的同学说老师我全局不是装了vapa吗?那为什么要在本地也装啊,这个其实就是NPM的一个激励啊,就是说如果说你全局装了8PA,但是呢,你项目中装8PA,那这个时候最好也得项目中把C装一下啊。啊,这个时候跑就能打包成功了,你看打包成功了吧。对吧,哎,打包成功的。结果是什么?就是你的8080。啊,你的这个8080啊,你的这个。八零。八零你看。是不是又能显示这个文字,又能弹出,哈哈,我运行了。那为什么它能弹出,哈哈,我运行了,因为这个帮点JS实际上就是一个虚拟打包的一个文件,这个文件并没有被真实生成啊,这个文件实际上是vapa DV server。
14:08
哎,再帮你去打这个JS文件到这个虚拟这个地方。明白吗?就是这么简单啊,它一切的一切很简单,并且是热更新的,它是热更新的。啊,热更新什么意思呢?比如说我在这里把这句话注了,它左边能自动更新。哎,然后我这个index index它是改变,它不更新啊,它必须是JS更新。对吧,比如说我现在log一个123,那它底下不用刷新会自动输出123,看见没有,诶,然后我现改成4561保存左边自动刷新输出456,所以你的开发体验很好啊,不仅仅是开发体验很好,而且是什么呢?而且就是说我们现在可以就是呃把这个呃就说JS文件之间可以require了,比如说我们现在写个哈哈点JS,它是不是就可以直接expert对吧?Account的一个,比如说叫呃叫。
15:01
H吧,啊,咱们随便啊,比如说叫哈,哎,等于个箭头函数,它能向外报啊。哎,Alert一个123啊。对吧,那这边的话就可以引引包啊,用import去引包啊,也可以用Y来引包,都可以用ES6这种语法可能更漂亮一点,对吧,哎,Import哈,From点。哈哈,点DS对吧?啊,当然这个是哈,啊,因为这个函数叫哈,然后我在这里可以调它嘛,这里就弹出来了啊,但是它报错了,为什么呢?哦。Expert cost一个哈,等于它啊,那这个。呃,这是点杠,哈哈。好,然后哦,这边没结构是吧。要写个结构啊,哎,然后这个哈,它就能能运行了123,哎,要写个大括号啊,或者你去写inport星呃,Port星as。哈哈,对吧,他那这个就是哈哈点哈啊。
16:02
所以这些东西都应该知道啊,就是ES6的这些啊,咱们在课程的呃,一个前提条件当中,咱们当时也提到了对吧?诶课程的前提条件咱们当时也提到过这个事儿啊,所以说啊,这个咱们就不多说了,那反正就是说这个环境很好配啊,这三个你就按照老师的这个依赖装啊,但是全局应该也不用装8PA和8PAD server啊,如果他报错,你就在全局电脑全局也按这个版本号装一下就行。好,然后外派computer JS,你就照着老师这个写就可以了啊,他大概干了什么事,我们也描述清楚了,就是在8080提供了一个静态服务啊,他能把3W文件夹的东西静态的显示出来,然后呢,可以把这里的JS文件呢虚拟打包到。这个虚拟路径当中去就可以了。好吧,哎,所以他这个视频呢,还是比较简单的啊好把这哈哈可以删了,好那咱们这个视频呢,就给大家讲解了环境的一个配置是吧,哎,好,那咱们就一个视频一个视频的啊录啊,咱们别把这视频弄得太长啊,那这个视频就到这儿,咱们下个视频开始就开始写东西了,是吧?诶。
我来说两句