00:01
好,那么通过刚刚的这个课程的话,我们已经把我们这个webpa,还有这个typeb script给它结合到了,哎一起,已经已经完成了一个最基本的一个开发环境,那么如果你之前学过或者使用过这个webpa的话,实际上这个知识点的话,你了解到这就可以了,因为后边的东西就纯粹是属于这个webpa的知识了,但是可能有一些同学对这个webpe还不是很熟悉,所以我们还需要做一些配置,让我们的项目的话更加的完善,还有哪些配置呢?哎,那第一个问题就是我们这个TS文件现在已经成功的转换成我们这个GS文件了,哎,但是的话,我们文件最终要运行的话,是不是还得放到网页里运行啊,所以这个时候我要想运行这个文件,我还得要创建一个这个H天L文件,那创建NL文件其实可以很简单,我直接在它里边new,诶直接一个引带点,然后script标签这一引入是不是就活了,很简单,但是。
01:01
是呢,我不想用这种方式,所以我先给它删了,为什么不想用这种方式,首先这种方式很麻烦,麻烦在哪儿?因为我是在纯手动的去创建这个文件,然后我要纯手动的去引入这个文件,我觉得有点麻烦,这是一个二一个当我这个文件发生变化了,诶现在我里边只引入了一个GS文件,那以后我可能要引GS或者引多个GS文件,或者说我以后可能要去引入CSS,引入其他文件,那我这个时候发生变化,我是不是要手动的一个一个去改呀,这样就让人感觉实在是太不优雅了,所以这个时候我就希望达到一个什么效果呢?诶我这个HT文件是由我们的这个我们自动创建,然后创建完了以后呢,这个网引入哪些资源,都是由他根据我们项目的实际情况去做的调整,诶我有两个GS,他就给我引入两个GS,我有两个。
02:01
我有十个GS就给我引入十个GS,我有CSS就给我入CSS,我没有CSS就不要给我引入,所以我要实现这个效果,那这里我就需要去使用到一个web pack的一个插件,什么插件呢?来,我们先来安装一下c n p mi-D叫做一个HTML web pack叫什么呢?Plug in啊,这个是一个bpe插件,Htmlpe plug in,它什么作用?它的效果就是帮助我们去自动的生成HTML文件,我们要做的第一件事儿就是先把它下载下来,下载完了以后你会发现package里边就多了这个配置选项了,多了它以后,我们回到我们这个web pack con里边,我们要对这个插件进行一个配置,首先我们需要引入我们这个HTM这个插件直接也是constant,我们叫做一个HTML web pag plug。Plug in这个名字呀,你随便起起什么都行,但是我习惯用这个长的了,因为会清楚一点,你说老师这名儿太长了,我记不住,我写短点行不行,短点也行啊,随你的心啊,这我直接require,一个叫HTML webpa blog in,现在我们就把这个插件引入到我们这个web pack的con这个配置文件里了,然后我们需要让这个插件有一个声效,找到我们这个后边,我们直接来有一个选项,我们先写上来配置我们这个web pack的一个插件怎么配置,有一个属性叫做一个plug ins,它是一个数组,我们直接把这个插件传进去就行,我直接调一个,因为我们要传的是一个实例对象嘛,所以我直接拗一个HTML webpa plug in直接把它传进来,那这个插件就在我们这个webpa当中生效了,它的效果就是给我们去自动的生成H文件,并且引入相关的资源,哎,不废话了,我们试一下引入好插件。
04:00
在这儿我们执行一个HT n PM run,一个这个build,我们重新对项目进行一个构建,来回车,这个时候我们看这个Dis目录下,你看刚才还只有一个帮点GS,当我们引入了这个插件以后,你这个时候你再看。诶,这块哎呀没出来是吧,我来这块我重新刷新一下。诶,你看是没加载出来,这时候是不是就多了一个引ex点啊,这个文件哪来的这个文件就是这个插件给他整出来的,诶我先删了一下,我们再演示一下啊,因为刚才一下子没出来,这效果不明显,好像我在骗你们似的,是吧?来来,咱们再来一遍APPM,一个build,我们要看什么呢?干脆把这哥们也删了啊,我们要看的是什么?这个文件确实是它自动生成的,并不是我们自己去创建去,诶稍微等一下它需要去诶编译。诶,这个时间还挺慢是吧?好,编译完了我们再来看这个目录,你看帮do.gs还有index.html,我们直接点开这个inex里面,你看诶哪什么do typeb乱七八糟的这里边都写上了,然后再往下看,你看诶我们这个sscript的标签,这个帮度点GS是不是已经给我们引入好了,诶就这么方便,以后你说我这还有文呢,还有文件它都会给你自动的去引入,实际上是很方便的一个功能,诶但是有同学说老师我现在啊,他这H,你看他这叫什么呀,这个title叫web,我不想整这个,我不想叫这个,我能不能去自定义。
05:35
当然可以,那在这里边我们要自定义也很简单,直接改一下配置文件,诶你看啊,我们之前去调的,这个时候我们是直接调的构造函数直接new的,那这个时候你要想做一些配置,我可以直接里边传一个对象,对象里可以进行你的配置,比如说你希望它的title不是这个,你改一下,诶那这是一个这个,诶我这个自定义的title,自定义的title,这样我们再去一运行,重新构建一下,构建完了以后,我们再去看这个HTR文件,这个时候你再看他这个title说诶你看是不是就变成我们这个自定义的了,哎,就是这样一个效果,那你说老师我觉得你这个是OK,是可以自定义了,但是我不能一个一个自定义啊,我这网页结构可能会比较的复杂,那我这个结构比较复杂,我不能一个一个写呀,那怎么办呢?诶其实还有一招,那比如说你希望的网页,它是有一个基本的结构的,那我就可以直接在src下,或者在任意位置,你只找。
06:35
指定一个,比如说我就叫引ex假表,我指定一个模板,哎,那比如说这个这个是我的网页的模板,网页模板,那你想你希望你的网页长什么样子,你就写什么样,你说我这有一个div div呢有一个ID,叫做一个这个BOX1 box1这写一个我是一个div,我是一个div,换句话说就是你在这儿你想写什么,你就可以直接去写什么,我们在webpa当中,我们可以把这个东西设置为我们这个模板啊什么叫模板?就是它会根据我们这个网页生成它的那个N文件,怎么整。
07:12
回到我们这个webpa con.gs在这儿呢,我就不设置title了,Title我就住了,我有一个属性叫做一个template template,我们直接把这个路径给他SC下的一个ex点,那这个时候我们这个网页就成了我们这个插件的模板,它再生成的网页就是根据这个模板来生成的,我们来看一下效果,直接还是重新构建,这个时候啊,我们看这个diss下子,你看这个网页,我们稍微等一下,还是需要构建一下。诶,看效果。哎呀,这是没刷过来是吧,我们重新打开一下。诶,这时候再看你看这个是不是是不是就是我们这个div是不是都有了,哎,Div就都有了啊,就都整个就都引过来了啊,所以我们这个HT这个插件是非常的方便的,有了它以后,我们其实要做的就是给他提供一个HTML的一个模板,然后呢,剩下的所有工作都交给他去自动的完成啊,自动完成。
08:13
那接下来我们还面临的一个问题,就是我们的一个文件的一个这个,诶这个浏览的问题,我现在想在我的网页里,想在我的浏览器里去访问我这个网页怎么办?现在的方式呢,我可以直接在这个web里边呢,去点这个浏览器,点浏览器的效果就是它会在我们这个浏览器里边去给我们打开这个网页,直接打开了,这个是通过我们这个web的一个浏览器去这个服务器去访问的,这种方式也可以没什么毛病啊,没什么毛病,但是我们其实希望有一个更加灵活的方式,什么叫更加灵活的方式呢?就是我们这个服务器啊,它跟我们的项目是有关联的,当我的项目改了以后,它给我自动的重新构建,构建完了以后,我这个浏览器干嘛呢?它自动的去刷新,让我们看到结果,这样我们开发起来是不是就很爽很舒服了啊,所以这个时候我们要说的第二个插件是我们的web pack的一个开发服务器,叫什么呢?诶叫做一个web pack。我们。
09:14
先来一个啊acn PM这来一个I,然后杠D叫做一个web pack的deer v叫做一个webpa的一个dev server webpa的开发服务器,那装它就等于其实就是在我们的项目里面安装了一个这个内置的一个这个服务器,把它装上以后,我们可以让我们的项目直接在这个服务器当中运行,而这个服务器跟我们这个webpa它们之间是关联的,它可以根据你项目的改变自动去刷新,自动刷新好这个装完了,这个东西用起来非常简单,那用的时候用装完了以后呢,我们需要在我们这个package阶里边装一个命令啊,设置一个命令,这个命令我们叫start,可以叫start啊,Start我们叫什么呢?叫做一个web pack serve serve serve,就是启动我们这个webpa的一个,然后呢,这来一个杠杠,一个open ch RO me come,点一个E,啥意思呢,就是启动我们。
10:14
这个web的服务器,并且同时用这个Chrome去打开我们这个,打开我们这个网页,那你可以直接点这个啊,或者你在这直接执行命令,直接来一个NPM一个start。苏尔回车,那这个时候它就会启动一个这个,诶一个我们这个webpad内置服务器,你看启动成功了,这浏览器是不是就自动打开了,诶自动打开了,我们稍微等一下,它需要去加载一下啊,我给这儿叠一下。我叠一下,那现在这个就是我们网页它需要加载一下啊,加载完了以后我们来看一下,打开这控制台。稍微等一下啊,因为第一次会稍微的有点慢,它需要去构建,然后去加载网页,然后去给你去运行好,这是不是就已经出来了,诶我们这刷新一下,那现在你看我们这个代代码是就打印出来了,就已经执行了,那它有什么好处,它的好处就是它是你看live reloing enable的,就是实时更新什么意思,看这了,我打开这个这个TS文件,TS你要改一下,我来一个cancel,点一个log log我们来一个什么呢?来一个哈哈,这个时候实际上他就一直在对我们这个文件进行监视,当他发现我文件进行修改了以后,它会自动对这个文件,你看update是不是更新,重新编译,它会自动对我们这个项目进行重新编完了执行,你看这哈是不是出来了,所以这个时候实际上我们在开发的时候,我就不用再去动浏览器了,浏览器往这一摆,我改完了以后,自动就能看到这个结果,是不是很方便呀,诶很方便的啊,这个呢,就是我们说的一。
11:51
就这个one pack的一个D的一个,哎,这个server装了它以后,我们再开发起来,其实就会简单许多了啊简单许多了,那好,那基本上我们大体上的插件的话,我们就都说完了,然后的话,我们还要补充两个小的问题,哪两两个什么问题,我们先给它关掉啊,关掉首先的话,哎,还是刚才那句话,我们说了这你不想整这命令,你直接点这个start前面有一个播放键啊按钮似的直接一点。
12:20
它也可以执行啊,它也可以执行,效果其实是一样的啊,我先给它停下,我在这就先不让它运行了啊,不让运行了,效果是一样的,然后呢,在这里边我们再说两个东西,再说一个插件,什么插件呢?一个插件就是我们现在的话,我们这个文件啊,我们编译的时候你注意了,我们编译的时候,它实际上是不会去删除我们原来的文件,也就是原来的文件会保留在我们这个diss目录下,实际上当我们生成新的文件,是我们新的文件,把原来的文件给它替换掉了啊,替换掉了,那我们其实还有一个插件,它可以实现什么功能呢?就是每一次编译前,先把这个Dis的目录给你自动清空,然后把这个新文件给它放进去,这样就可以确保我们Dis里边的文件都是当前最新的,避免存在有旧文件的一个情况,所以这个插件的话跟我们那个htm plug差不多,它叫什么呢?来c mi,然后杠叫做。
13:20
可哎,Web pack plug in。Plug in啊,Clean它的作用就是来清除我们这个diss的这个目录的,还是我们来装一下这个插件用法啊,跟我们这个哥们儿一模一样,一模一样,先来引入引入我们这个clean这个插件插件啊,我们直接来个cons cons,因为它不是默认的,我们就得写一个大块,可另一个web pack plug。Plu等于一个这个require require,我们叫做一个这个clean web pack拉in引入插件,然后的话,我们在这个plug in这个数组里边,我们给它注册一下,直接new一个这个clean web。
14:11
Plug它也不需要配置,引入一下就OK了,这个插件就配置齐了,配置完了以后啊,你执行的时候你可能看不出什么效果,我们直接来一个run,一个build,实际上它的效果就是它执行的时候,它会先把这个DIS4目录给你干嘛呢?给你清空,然后再去删,再去添加这些文件,那就避免了我们有旧文件,这是看不出什么效果来是吧,现在看不出效果,因为它现在我们文件没有什么太大的变化啊,这是一个事儿。好再说最后一个我们这个wipad的一个基本的配置,还有什么呢?就是我们涉及到这个模块的问题啊,模块的问题,那现在的话,我这只有一个点TS,那我这如果新加一个TS啊,比如说我加一个M1。点T呢,我们这来一个,比如说我就来一个这个我们来一个等于一个好,我现在向露这么一个量,我希望在这个index.ts当中呢,去引入这个变量,我直接impose impose谁呢?嗨,哎,然后from from谁呢,From点斜杠,我们这个MM1啊from它我想去引入这个模块,然后在这儿呢,我就是把这个hi呢打印一下,打印一下,但是这个时候我们打印的时候,你注意啊,我们去run这个Bill的时候,这个时候它实际上会存在一些这个,呃,一些这个问题。
15:27
我们来看一下效果。诶,他是不是报错了,哎,报错了,为什么报错了,为什么报错了,因为我们现在引入M1 M1它是一个模块,它是一个模块,它这扩展名什么呀,是TS,那在我们这个web派里边,它默认情况下,他不知道你的这个TS是可以作为模块使用的,也就是说他不知道哪些文件可以被引入,所以这个时候我们必须要做一个配置,告诉web webpa,诶哪些文件可以作为模块去使用,作为模块被引入,所以这个时候到我们web pack里边,我们需要对它做一个配置,哪个属性呢,叫做一个reserve reserve它用来干嘛?就是用来设置我们这个模块啊,设置我们这个,诶引用的一个模块就是哪些文件可以作为我们这个模块,它里边一个属性叫做extensions,叫做扩展名,我在这儿简单了,就直接写一个点TS,再来一个点一个GS,啥意思呢?就是告诉他,凡是以TS结尾,以GS结尾,以这两个东西作为。
16:29
改名的文件就都可以作为这个模块使用,那这个时候我们来再重新编译一下,重新去构建一下,这个候我们再看效果还报不报错了。还抱不抱团?稍微等一下是不是就不报错了,哎,就可以正常编译了,并且我们引入的时候,你看我们这些内容是不是也都去引入进来了,引入进来了啊,所以这个配置也是一个必须的,也是一个必须的,好,那经过这样一个流程的话,其实在我们这个webpa con里边,所有的这些必要的,至少我们现在来说,我们现在不考虑兼容性的问题的时候,所有的必要的配置在这里边我们都已经给它引入好了,所以你你说老师我这记不住,记不住的话,你可以把这个项目作为一个模板,诶,你给他存起来啊,一用的时候,你可以直接把这个东西当成一个模板给他拿过来拿去用就OK了,但是最好还是自己能把这个结构给它敲出来,这不难,就是东西稍微有点多,你自己呢,多敲个三五遍的,自然而然就熟悉了啊,学习我们这个编程没有任何的诀窍,就是多敲多练,练的多了自然就会了,但是实际上我正好提到这个问题,我们这个配置文件虽然写完。
17:43
了,但是它还有一个问题就是兼容性的问题,你会发现我们在这儿输出的代码的话,它实际上都属于一个这个,诶这个新版这个哪去了,这个这这这这这在这儿呢,都是一个新版本的语法,你看这是不是还有这个箭头函数呢?诶那这样的话,对于一些老的浏览器来说,它是不是就它就不灵了,哎就不好了,就不支持了,所以我们还需要引入一个工具,让这个工具帮助我们去。
18:12
改我们这个代码,把我们这个代码改成什么呢?改成我们这个不同的这个版本,以兼容更多的浏览器,那这个就是我们下边要说的一个话题,诶怎么再把Bible给他引入进来啊,好,我们先说这么多。
我来说两句