00:00
啊,下面呢,咱们继续啊,之前呢,咱们讲过手动编译TS。然后呢,还演示过在Vs code当中自动编译TS,下边呢咱们要说的是通过外派打包TS啊,这样的操作呢,会更加的方便啊,然后咱们后边的TS相关的内容呢,都在这里边去讲。但是呢,我们首先要需要做一些配置操作啊,那它需要这个入口的目录啊,入口目录里边需要有mid.ts文件的,还有需要一个index.html的文件,当然还得需要web pack.con菲点GS文件里边做一些web pack相关的配置,那咱们呢一点点来啊。首先啊。在这个里边新建一个目录啊零三杠。Web pack-TS吧。那这个目录叫public。里边来上一个文件叫index.html文件啊。好,那这个代码我就复制了啊,就不再自己去手写了。啊,搞定一个关掉,下边呢,我们再给它来一个入口的目录src。
01:04
紧接着再来一个文件命点TS。好,里边随便写上一点代码就行,点right吧,嗯,哈哈,逗号,我又变帅了,嘿,变帅了啊呃。AA好,搞定保存啊。啊,紧接着呢,我们需要做web pack相关的配置啊,所以说我们需要一个目录叫build。里边来一个文件叫web pack.con飞点JS。那这里边儿这个代码也比较多啊,然后呢,我们写的都是一些最基本的,也都直接复制粘贴过来。啊,当然这里边这个代码呢,一会儿我们再做一个简单的介绍,然后详细的这个内容,如果有同学不是特别的了解是吧?呃,可以去找一找咱们之前wepad相关的课程来去看一看啊,行,我呢先把它也关掉啊,这样就够了吗?也不够啊,因为一会儿我们还要下载相关的依赖包,所以说呢,我在这。
02:02
启动个终端。NPM引杠Y。这个命令呢,会把我们对应的package点文件给它产生出来,对吧,当然这里边的代码一会我们要进行更改。然后呢,还有哦,再通过tsc杠杠引啊。把对应的TS扛飞哥点JS文件给它产生出来,这里边代码是不需要我们更改的啊,到了这儿呢,就几乎是差不多了是吧,下一步我们来看看啊,去下载对应的依赖是吧,最终呢,依赖下载完了之后,配置一下打包命令,最终再运行打包启动成功就证明是没有问题的啊好,那下载这些依赖呢,因为TS肯定是需要的了,所以说我们这里边需要下载typescript的这个包。啊,复制一下那笔记里边用的是亚啊,我呢个人习惯喜欢用NPM的方式啊,不要了杠D。那么先把type script装上啊,先单独装这么一个。
03:03
那下边呢,还有web pack。以及vipa-C,因为要对这个内容进行编译嘛,是吧,所以说这个vipe web pack-C肯定是少不了的,我把它复制一下啊。这边装完了没有,还装完了n PM in store,然后粘贴过来,但是有点小问题啊,在这个里边we派的版本已经升级了,咱们这里边不用最新版本,因为最新版本它的兼容还是不是特别好的,所以说我这边稍微给大家去配置一下啊。这个web pack它的这个版本咱们用的是什么呢?4.41.5啊这个要注意,然后呢,再往后web pack-c Li它的这个版本用的是什么呢?呃,3.3.10这个版本。还有另外一个。叫web pack-DV-R,这个将来要启动开发服务器的啊。拿过来它的这个版本是多少呢?是3.10.2啊,我呢先把他们三个装上啊。
04:03
然后呢,同时还有HTML杠杠plug这个东西是将来对我们这个什么呢?HTML的这个内容啊,要进行打包的。嗯,还有一个clean pack plug,这个东西是要清除之前打包好的JS文件的啊,还有一个TS-load,它主要是针对我这个TS的文件进行编辑处理的。还有一个括号杠en nv,这个是涉及到跨平台的命令啊,咱们一会儿都把它装一下。啊,没有完事是吧,那我先把这个复制下来吧。复制一下啊。然后拿到咱们这个里边来东西比较多啊,另外网络不是特别的快。啊,所以说呢,它装的是比较慢的啊,有的同有的时候啊,太快也不是一件好事,对不对啊,你可以慢慢的细品啊。好,我们耐心的去等待一下啊。
05:01
呃,那一会儿呢,最终我们再来一步是什么呢?如果把这医疗包都下载完了之后啊,那么我们只需要把这个呃,打包的命令再重新配置一下就可以了啊。嗯,搞定没有,哎搞定了是吧,然后来上n PM in道杠定。哎,多了一个是吧,能够把这杠D删掉。然后还有什么呢?咱们这一次把这些东西都装上吧。TS杠针对TS变异。还有什么呢,还有。港。跨平台的命令。回车都把它装一下啊。好,趁着他装的这个空闲期间啊,咱们再稍微来说一说啊,Web pack con,飞哥点GS里边的这些配置啊,大概都是什么意思,那首先上边肯定是要做一个判断嘛,你到底是生产环境还是开发环境了是吧?啊,那下边这个位置无非就是一种模式嘛,你到底是开发模式还是这个生产环境模式啊,下边这个是咱们程序的主入口目录啊,Src目录里边这个me ts就是程序主入口文件了。
06:10
那最终这个output是干嘛的呢?把我们打包后的内容放在diss的目录里边,包括产生的这个JS文件,应该是以这个P点八位的哈希值点GS这样的方式来命名的是吧?呃,那rules这个里边呢,主要是通过TS-load的这个啊包针对于TS和这个TSX文件是吧?主要是针对src目录里边的TS及这个TSS文件进行编译处理操作的啊拉,Ins这个里边啊,之前咱们也说过,他会把咱们第四目录中以前打包的GS给它清掉。那下边的这一个操作是干嘛的呢?是针对我当前的public目录当中的HTML进行打包的,那后边这个位置的。配置主要是什么呢?将来我去嗯,针对点TS啊,点TSS啊,点GS文件啊,它的扩展名进行处理的,就是说我引入什么文件可以不写它的扩展名是吧,后边的这个东西通过SS-map这个东西干嘛的呢?是可以呃知道将来我们的哪一行代码有什么问题,或者说出现什么错误,它的一个提示信息。
07:20
那DV serve这个位置是通过启动之后啊,在local host log host这个主域名啊,然后呢,用的是8081的这个端口,然后呢在浏览器里边会自动打开啊好了,包呢也装完了这个web pack当中的一些配置呢,咱们也做了一个简单的介绍,现在呢,我把它关掉还差最后的两步。那第一步做的事情就是配置一下打包目录嘛,在这儿呢啊复制一下。然后呢,我们把它放到package.jason当中这个位置来。然后呢,格式化一下啊,前面这个cross-EV啊,它这个东西主要是跨嘛,跨环境就是跨平台嘛,然后呢,因为这个命令在Windows系统里边它不认识是吧,Linux系统里边认识,所以说在这里边干了一件什么事情呢。
08:08
呃,通过什么呢?通过咱们这个,我们希望这个cross杠,因为这个命令无论是在window系统还是Linux系统里边都能够认识啊,所以说是做了这么一个配置啊,好了,那如果我运行的是DV的话,就是什么呢?生产环境是吧,我如果运行的是build,就是属于这个开发环境了啊行,现在我把这个保存一下,那最后一步了,就是说我们在终端里边通过亚DV或者亚build可以运行及打包,不过我用的不是亚,我用的是NPM,所以说我在这个里边吧。给大家去演示一下NPM状什么呢?第一位先运行一下啊。好,我们看一下能否在浏览器当中自动打开啊,慢慢的等一下,他的第一次是比较慢的啊,不像有些人。OK,在浏览器里边自动打开了是吧,哈哈,我又变帅了,而且呢,我们在这检查。
09:03
然后呢,在cons当中可以看到没什么东西是吧?没有报错,然后呢,在包里边我们可以看到有个SQ标签src引入了一个APP,点后边一坨内容是吧?点JS文件啊,这说明打包文件也是正常的了是吧?因最终编译的这个JS文件也是没有问题的啊。然后这个是运行是吧,下边我们再打个包呗。那我就在它上边,诶,在这个上边啊,指标邮件在集成终端中打开,再来一个npm RA bil打个包。我们来看一下啊。嗯,它也是啊,还是稍微有点慢一点的,不过没有关系啊,我们等一下就行,然后呢,呃,大家在学习这段内容的时候呢,跟我一样啊,能复制的复制,能粘贴的粘贴啊,这样呢不容易出错,主要是什么呢?需要考虑一下这三个包它的版本的问题啊,如果你都用最新版本,有可能会有问题啊好,那这个时候大家可以看到在这个目录里边产生了一个diss目录,里边有对应的APP,点八维哈值点GS文件是吧,还有index.html这里边呢,也会自动的去引入打包后的这个JS文件啊,我把它格式化。
10:09
这样呢,大家就可以很清楚的看到了,是吧,好保存那web pack打包GS它的相关的配置呢,简单的配置咱们就已经搞定了啊,没有什么特殊的东西好。
我来说两句