00:01
好,那刚刚呢,我们是介绍了一下这个TS编译器的这个配置,也就是我们这个TS的这个conig点杰森啊,说白了就是在讲这个杰森里写哪些置,那我们实际开发当中的话,其实直接去使用TS编译器编译代码的情况的话会有,但是实际上没有那么多,为什么呢?因为我们一般在去开发一些大型项目的时候,一般我们都需要用到这个打包工具,我不可能说我脱离打包工具,我去使用这个这个TS,所以我们一般的话,我们的TS是要结合打包工具去使用的,比如说像我们的这个用的比较多的那就是webpa,那么这节课的话,我们就来讲一下如何把我们的TS和这个webpa给它哎整合到一起,换句话说,就是如何通过我们的web去对我们的TS代码进行编译。那我在讲的过程当中呢,有的同学可有的同学可能对这个webpa比较熟悉,可能用过,有的同学可能没用过,但是没有关系啊,不管你用没用过,如果你用过的话,你很熟悉的话,你可以很快的去把它看一下,或者你直接看代码就OK了,如果你不熟悉,或者你对这个wepa你不太感冒是吧,不太喜欢用这个外派不熟悉,那你就干嘛呢?哎,你就慢慢看,哎慢慢看很多东西的话,我们在这儿可能说理解啊,给他讲透,可能时间不太够,但是的话我会把这个步骤说的比较清楚,而你要做的事儿呢,你就是按照我给你的这个步骤一步一步做,我相信你一定能把这个东西诶弄出来,好,那我们要用的话,我们还是先新建一个新的项目,哎,来演示一下这个东西,那这个项目呢,我们就叫做这个part three。
01:49
诶,第三个部分啊,第三个部分直接在我们当前窗口打开,那我们要用这个web pack的话,首先呢,我们要做的第一件事儿,诶,就是需要先生成一个那个拍K点接S,因为我们要用webpa,很明显我们要用这个NPM嘛,用NPM这个包管理器去管理我们的包,那我们要用NPM去管理我们的包,那肯定我们需要先把我们的项目加上这个package,所以我们直接来一个npm in it来什么呢?杠位啊,对我们项目进行初始化,这一句话的主要作用其实就是在我们项目下生成一个package点杰森,Package点杰森的作用呢,就是来,诶管理我们的项目是吧,告诉我们项目里边啊,我有哪些依赖呀,诶我有哪些命令给它加进来就行了,里边的信息如果你想改,你可以自己改,我我这儿的话我就不去处理了啊,然后再往下走,再往下走呢,配置文件我生成完了,那下边的话,我们就需要安装一下我们这个使用这个webpa所需要的一些依赖。
02:50
哎,那这里的安装的话,你可以用NPM安装,或者你也可以用什么呢?用CNPM安装都行啊,都行,NPM的话是我们原版的CNPM是我们国内的镜像,用哪个都行,相对来说的话,CNM可能会快一些啊,快一些你说老师我不会用CNM,百度一下其实就是一个指令就把它装上了,那我在这儿我就直接用CNPM了,Cnp mii表示install叫做安装,然后一个杠D,杠D呢叫做一个开发依赖,也就是我现在要安装的所有依赖都是我们开发所要用的一个东西啊,它的完整应该叫做CD啊,我们用杠大D就是简写了。那下边的话我们需要安装这么几个包,第一个包我们叫做web pack。
03:34
啊,Web pack webpa呢,就是我们打包工具的一个核心代码,然后呢,还有一个叫做web pack的一个c Li webpa c Li叫什么呢?是我们这个web的一个这个命令行工具,那装了这个以后,我们就可以通过命令行去使用这个web pack,还有一个我们叫做web pack,这个我们下边再待会再装吧,们先弄一个最基本的版本,后边的功能的话,我们一点点扩充啊,不着急,然后再装一个叫做type script的s cscript ts的核心包啊核心包然后还有个叫做TS啊TS嘛,是我们这个的加载器TS,通过ts load我们可以把我们的we还有我们的typescript进行一个整合,让它变成哎,变成一个这个一体的啊,一体的,也就是你必须得有它才能把这个东西在我们把这个TS的编辑器在wepe当中使用,所以我们现在就简单版本,就先下这四个依赖啊,四个依赖输入完了以。
04:34
推车注意单词别拼错了啊,然后的话,当我们输完这个命令,这个命令就会自动的执行,去网上去下载这些包,下载这些包以后的话,因为我们写了杠D嘛,它还会把我那个配置,你看这是不是就多了我们这个开发的依赖了,诶就加上去了,出现这个东西,那就证明我们这个装成功了啊,一共是四个包,电子loader typescript web pack,还有webpa的好,这装完了,那接下来我们需要来编写一个web pack的一个配置文件,Web pack的配置文件是一个这个JS文件叫做一个web pack。
05:09
哎,点一个这个comig,点一个GS啊,这是它的默认名字,你要想写一个别的名字也可以,但是建议先这么写吧,我们先不整的那么复杂,然后在这个配置文件里,我们就需要写我们这个web派D的一个配置信息,我们一步步来,首先先引入一个这个什么呢?引入一个,引入一个包,我们这个包呢,叫做一个pass pass等于一个require re require,一个什么呢?诶,我们来一个这个pass,这个呢,实际上就是一个我们这个note GS里边的一个模块,它的作用其实就是主要用来帮助我们去拼接这个,呃,路径啊,路径,然后再往下我们来正式的编写我们这个配置信息,我们直接来一个mole,叫做一个哎module,点一个这个X pose X pose,我这块这个包,我这点一下啊,这个包应还没刷出来。
06:02
Yeah。我这右键啊,我这刷新一下reload一下。因为我们这刚才是不是我这下载了几个包啊,下载了几个包的话,现在我这个node modus在这儿是不是没有出来啊,没有出来呢,应该已经下好了,只是这个编译器有问题,没刷出来,我们点一下看一下有没有。Part three。你看notedus在这儿是不是已经有了,但是在我们的这一块的话,在我们项目下边还没出来,我再刷新一下试试,如果还没有的话,我就直接给它,我给它重启一下。因为这个这个东西如果没有的话,它就待会儿我们有一些提示,它可能会出不来。OK啊,我把这个开发工具的,我给它重启一下啊。直接冲进。哎,稍微等一下啊,稍微等一下,有的时候我们在用这些开发工具的时候,无论你呢,是用这个,呃,Web stop,还是用wes code,或者是你用其他的一些开发工具,它给我们提供了一些便利,但是使用过程当中的话,也可能会出现一些诶小的bug,小的问题,所以遇到这些问题的话,可能我们最直接的处理方式呢,就是给它诶重启一下,所以我们这个前端这块,开发这块,它没有什么,这这这不算什么技巧吧,就是一小的习惯,哎,你可能执行一个命令出问题了,出问题了我们重启一下是吧,哎,把这个指令给它重新的去执行一下,哎,也可能就能把这个问题给解决了,好,那这样。
07:33
是不是就出来了,哎,那个modules,然后在这儿我们直接还是回到我们刚才的话题,写我们这个配置文件module,点一个expose,我们直接等一个这个对象,这个东西是干嘛的,我们在TS里边,我们在这个web里就是web了,叫做web pack。Webpack。刚启动起来有点卡web pack中的这个所有的这个配置信息都干嘛呢?哎,都应该写在什么呢?我们这个modu点一个expose中。
08:05
哎,都应该写到我们这个,哎,Modu第二一个expose中,然后我们下边就是顺着往下写了,一个个写吧,第一个我们叫做一个哎N垂,N垂什么东西,N叫指令,我们这个呃叫做入口文件。入口文件,什么叫入口文件呢?因为我们这个程序里边要写很多的文代码,对吧,很多的代码,那我们这儿需要指定什么呢?诶你的那个文件入口文件主文件是谁,你要从哪开始执行,那这块的话,通常我们会有一个目录。哎,目录呢,叫做src,这是我们的源码的目录啊,把源码都放到src下,然后SS下,我们可以创建一个TS文件,这个名字倒是无所谓,那我们可以直接一般的话我们可以叫一个index.tx那这个文件呢,就可以作为我们的入口文件,那这块路径这配置就简单了,那我们就可以直接去写这个路径,直接写了点斜杠src下的一个引ex.TX那这就等于是我们程序的一个诶主文件,我们的一个入口文件,那入口文件指定完了以后,我们要对这个文件进行打包,打包的实际上就是把我们这个文件输出到一个指定的一个位置,那么往哪输出呢?哎,所以这里边我们要指定什么呢?指定我们这个打包,打包文件所在的目录,也就是你这个文件打包完了,你要把它放在哪,在这儿的话,我们需要指定一个叫做output,就是你输出的位置,Output里边有一个第一个属性叫做一个pass pass是干嘛的?诶指定什么呢?诶指定。
09:37
我们这个打包后的目录。哎,你这个打包文件要放到哪,我们可以写直接点斜杠Dis这样写也可以,或者呢,因为我们这是不是已经引入了这个pass了,哎,Pass了,我们可以直接来一个pass,诶or干嘛呢?哎,我们让他去给我们拼一个路径,来一个DR,一个name逗号,我们这儿来一个什么呢?哎,来一个这个Dis,其实效果是一样的,只不过它通过这个东西呢,可以把我们这个路径给我们完整的给我们,哎,拼出来啊拼出来,然后再往下我们来一个fair name file name是什么呢?是我们打包后文件的名字。
10:15
哎,你要给这个TS文件打包,你打包以后你这个TS文件叫什么呀?哎,我们一般我们可以叫一个b dle b点一个GS啊,就是打包以后的文件,好,这个是我们的入口,还有我们的出口就执行完了,然后下边我们说了,我们的TS文件它需要执行编译的,也就是我需要把这个TS给它编译成这个GS,那么它要如何去编译呢?那这个时候我们就需要用到我们这个哎modu modu来指定什么呢?诶指定我们这个这个这个web pack打包时用的一些这个这个这个这个loader啊,或者是指定一下模块啊,用webpa打包时,诶要使用到我们这个模块,那这个module的话,我们这里边,因为我们这里个webpa里边所使用的文件的话,它会涉及到很多种,有可能有GSS文、CS文文、S文,甚至有片,有什么字体,很多很多不同的文,所以在这里面我们还需要来指定什么呢?
11:15
指定我们这个药,哎,是指定我们这个这个这个load的一个规则。哎,指令我们这个加载的一个规则,那这一块我们这个属性就叫做一个这个roses啊,入S呢,对应一个数数组,因为我们可以同时指定多个规则啊,数组后边我们直接跟着一个大括号,大括二里边,大括二里边我们先写一个test,这个test表示什么意思呢?诶,我们说了我要指定规则,比如说我现在要用的是谁呢?就是用的是我这个ts loader,那问题来了,你这个ts load对谁生效啊?哎,所以T指定什么呢?指定的是我们这个规则生效的文件。生效的文件。
12:01
诶,你这个规则对哪些文件生效,那它里边它需要指定的是一个正则表达式,因为它会通过这个正则表达式去匹配我们这个文件的一个名字,那我们说白了,我们要对谁进行编译啊,那不就是对那些以TS结尾的文件进行编译吗?所以这块先写两个斜杠,用正多表达式来表示,点TS结尾斜杠点先对它进行转义,然后TS,然后来一个Dollar符,那这就表示去匹配我们这个所有的以TS结尾的文件,然后呢,我们这儿来一个柚子,柚子那就什么意思呢?你以TS结尾的文件你怎么处理啊?哎,我们要用的是我这个TS,所以连起来意思就是我用TS去处理以TS结尾的文件,然后的话还可以啊,这里面写上注释,这是我们要使用的这个loader,然后还可以再指定一个,指定什么呢?指定一个我们这个要排除的文件文件夹,也就是说。
13:01
哪些文件你不处理啊文件夹。哎,就文件嘛,哎,那我们可以用一个这个exclude,跟我们那个这个ts conf里边exclude点类似,就是排除的作用啊,我们一般就是排除谁呢?排除我们这个文件,文件夹弄module,就是它里边的包都是我们下载的这个东西是不需要你去再去编译的,你不论是TS也好,GS也好,只要在这里边是不需要你编译的,所以我们排除一下叫做一个node modus,这就直接写就行了,只要你的路径里有这玩意儿,我就不给你编译啊,我就给你编好,那这样我们这个ts loader的话,我们就已经给它处理完了,那你想这个配置其实并不难啊,那通过这样一个配置,我们一个web pack con啊的GS的一个最基本的配置就完了啊,那这时候web就已经可以去使用了啊,就可以使用了,但是的话,我们光配置外派D还不行,因为我们这一块是不是要作为TS文件进行编译啊,哎,所以呢,我们还需要指定一个配置文件,来指定我们TS的一个编译规范TS。
14:06
编译规范呢,我们就直接在根目录下创建一个这个TS点,这是一个文件了,那这里边的配置的话,你创建完了以后,它会给你些的,我们不要它了,我就把这excclde啊,我就去掉了,不要了,我留着一个什么呢?Compel啊compeler options,我们的编译器的一个选项,但是呢,我改一下啊,我这块呢,我都改成统一改成ES6的标准,诶modeldu也是ES6,我们target呢也是ES,哎,ES6。E2015就是六啊,然后呢,Ma我们先不用,然后呢,我希望严格一点,我用一个来一个这个我们就简单的用这三个选项,对于我们来说就足够了啊,后边我们需要加什么,我们再加就行了啊,不是false字啊处可能以一个最严格的模式,这样我们就基本上就够用了,好,那这样写完了以后,我们的所有的配置基本上完成了,还有最后一件事,我们不是想打包吗?在我们的package阶里边,我们需要加一个命令。
15:04
加一个命令buildu直接来一什么呢?哎,来一个webpad啥意思呀?哎,就是我们可以通过build的这个命令来直接执行我们这个webpa,那经过这么几个步骤,我们这个TS和wed一个最基本的一个组合就完成了,我们回顾一下我们都做了什么,第一件事啊,N PM in it-Y先初始化我们的项目,第二件事我们来安装我们依赖,我们这儿总共现在安装了四个依赖web pack web pack c Li,这个ts loader,还有type script的这么几个,然后下一件事儿,编写web pack的配置文件,再往下编写ts con的配置文件,再往下修改这个package杰son,加上一个这个Bill的这个,哎,这个命令这个步骤你要不清楚,记不住的话,我在这个笔记里都写了啊,你可以参考一下我的这个笔记,这个步骤一步一步做就OK了啊,然后这写完了以后呢,我们就可以直接通过n PM run一个build来执。
16:05
顶,我们这个web pack,用我们这个web pack来对我们这个项目进行打包,我们先执行一下试试效果回车,那怎么就知道成不成功了,因为我们是把src打包到build下,如果出现打包到这个Dis下,如果出现Dis是不是就成功了,哎,你看这已经出来了。One v点6.0comp已经成功了,这么长时间出现这个是不是证明打包成功了,目录是不是也出来了?点开第四目录点GS也出来了,只不过现在它里面什么都没有,为啥没有啊,我这是没写呀,写一个吧,帮个人来一个萨萨来一个,这个AA的类型是number。然后呢,来一个BB的类型,也是number,返回值呢,也是一个number,直接return一个A加B求和的一个,然后我们来调用一下这个函数cancel.log一个这个嗯萨一个123。
17:01
123,哎呀。123逗号一个456,就写这么一个简单的一个T代码,写完了以后,我们再执行它进行一个编译。稍微等一下。诶,那这个时候是不是就又编译成功了,哎,编译成功了,当然Y派D它这个编译会比较彻底,你看因为我们这函数只用了一次,所以他就直接把这个函数给你省略了,直接把这五就给你整出来了,啊这么一个效果好,那现在的话,这样一个最最最基本的一个wepa的一个和TS一个整合,我们就给它处理完了,还是还没整完,因为后边我们还可以再去把它的功能再去给它增强,但是最基本的功能我们已经给它理完了,还是不着急,我们先停一下,自己呢,来把这个东西给它配置一下啊,来尝试一下,我们先停一下。
我来说两句