00:01
这节课呢,我们来使用一下外派。在使用之前呢,我们先了解到派的一些基本概念。它是一个静态资源打包工具。打包的时候,会以某个文件或者某多个文件作为打包的入口开始打包。然后呢,慢慢的将整个项目的所有文件啊编译在一起,组合成一个或者多个文件输出去。那么输出好的文件就是最终编译好的文件就可以在浏览器中运行了。那么这种文件我们也叫做B。简单理解呢,派就是一个打包工具。打包做什么事呢?就是做编译这个操作,既然浏览器不识别的语法,编译成浏览器能识别语法,最终可以在浏览上去的运行,那么这就是外pad要做的这个打包这个事。好,那么我派到底能做多强大的事,能做哪些事呢?所以我们对它的功能呢,也做一些基本介绍。
01:00
派呢,主要分为两种模式啊,开放模式和生产模式。开发模式呢?顾名思义就是我们在项目开发阶段的时候使用的方式。生产模式呢,就是将来代码要部署上线了,对吧,要给其他用户看了用了,那么这时候是生产模式。开发模式下的PE本身的功能仅能编译我们的这个ES6的模块化语法。生产模式下呢,除了能编译语法以外,还能压缩JS代码,诶,做了一点小小的性能提升,让代码体积更小,所以请求速度更快。好,所以它本身能处理的文件仅仅有JS文件。而遇到样式这些文件,它是处理不了的。所以我们就要学习微派的其他配置,来让它的功能更加强大。当然呢,这些配内容我们都在后面来学习,现阶段我们主要就研究一下ipad本身能干嘛。为了研究呢,我们这里呢,啊,写了个教程啊,按照流程呢,我们先创建目录,在创建一些文件,最终下载相应的依赖启动,我们就可以查看wipad的功能了。
02:09
OK,话不多说,我们就一起来实践一下。我们打开Vs code。这里呢,我创建这个科目里面啥也没有,下面呢,我们在下面去新建一些文件,诶比方说我新建一个C。这个呢,就是将来我们开发代码的源代码目录,所有代码呢,都应该写在这个SC里面,然后在这里面呢,我新建一个文件叫魅JS。这一个是我们打包的入口文件,我们目前呢,会以一个入口作为一个文件作为入口进行打包,那么这个入口文件呢,我们又叫主文件,也叫入口文件,通常来讲我会叫做mini。好,呃,那么这里面呢,先写啥不着急啊,我们再去创建一些其他模块。为了研究这个EL模块语法呢,我们专门整一点模块来去进行操作啊。
03:04
比如我定一个看DGS。一个减法的函数啊,非常简单。呃,功能就是咱们模块代码的功能呢,无所谓,你写别的也行,其实主要目的就是我们想啊,看看它能不能打包多个文件,能不能把多个文件打包在一块。好,这个呢,我们写的稍微麻烦一点。网络上三点预算符对吧?代表剩下所有参数,然后呢,进行一个累加,用reduce方法进行累加求和。然后用上一个箭头函数啊,初始化值是零,然后累加的时候呢,让它上一次的结果加上单体的结果并探出去,那么就可以了,最终模块内容记得暴露出去。好了,那么模块定义好了,我们在mid JS中引入使用。
04:00
那么引入的时候呢,文件后缀名,这个JS文件后缀名是可以省略不写的。默认情况下可以不用写JS文件后缀名,但是如果将来有什么CS,这些文件后缀名是要写全的。好,同时呢,我们打印一下看。然后再打印一下。Some。那么这里呢,我们就搭建好了一个基本的一个JS代码。那么这个JS代码呢,用了ED的模块化,所以它在一些浏览器端呢是不能运行的,我们可以测试一下。我在这里再新建一个目录加。Public呢,叫公开的,一般这里面放一些长久不变的静态资源,其中HM文件一般就放在这。我们在这里呢,去稍微写点内容。啊,我整个标题。
05:01
哈喽外拍,当然整啥都无所谓啊。OK,在这里呢,我们引入啊,手动引入我们这个src下面的这个mini JS。好,此时如果我们打开浏览器去访问,会发现在JS这个can log这里它会报错的,因为E有模块化,它在浏览器是并不识别的。睡吧。所以这就是我们为什么要学习打包工具,因为我们要使用打包工具对它进行编译,让其编译成浏览器能识别的语法。好,这个时候我们就要使用ipad了。怎么用呢?首先我们要把使用pad的包给下载下来。我要使用某个技术,我必须要把他的包给卸下来才能使用。而且在下包之前呢,我们还需要先初始化一个package文件,我们也叫做包描述文件。NPM名杠Y就好了,它立马可以初始化一个最简单的一个包描述文件,有包名,有包的版本,包的描述主文件啊主文件其实我们是魅JS啊,当然是SC下面的魅JS。
06:06
还有运行指令等等啊,这些都不重要。最关键的一个就是我们要保证PA这个包名不能叫PA。因为我们待会要下载ipad这个包,如果你报名叫外,Pad就下不下来了啊,所以这一点同学们要注意。而其他的改不改都无所谓,因为不影响你的程序运行。好了,下面我们下载两个依赖啊,一个叫外派,一个叫外派干CI。我们下载到这个啊,开发依赖中。回撤,那么这两个包呢,一外派就是我们用的啊pack c呢就是外派的指令,有了这个指令呢,我们就可以执行派的一些指令了。好,那么怎么去执行呢?我们运行NPX。NPS这个指令啊,NPM是用来下载包的,而NPS这个指定呢,它会将我们这个no MOS中的点并临时添加为环境变量,这样呢,我们就可以访问这个环境变量里面的一些应用程序,诶就是我们这个外派这个应用程序这个指定了。
07:12
所以我们在运行WiFi就能找到它。好,你要告诉我,我们前面讲过这个WiFi的概念。派会以一个文件或者多个文件作为入口。所以你在执行wipad指令的时候,你要告诉他你要从哪个文件作为入口开始打包,而我们要从的是这个魅JS,路径是SC下面的魅JS。好打包呢,它会自动输出,我们只要指定一个它的一个模式。是开发模式,是生产模式。啊,Development是开发的意思嘛,Production就是生产的意思嘛,所以一回车,那么他就会打包了。达到成功的标志呢,就是它会有一个啊,他会告诉你外派的一个版本对吧,编译,然后successful就成功了,看到这个绿色的successful说明编译成功了。
08:01
好,然后呢,画的时间是86毫秒。OK,非常啊,因为我们资源比较少,那么打包出来的文件呢,就在这个D。我们点开去看啊。那么第目录它在打包的时候呢,会加很多东西,会把yes模块语法呢,变成一些什么啊,外派和modus派和外派require这些这些变量啊,所以都变了一些内容,而且每一个这个资源它都有一个一我函数给包裹起来了。你看some d JS用个e manys用,那E函数包括了我们在研究这个打包输出的文件,不需要研究太多啊。我们并不是并不关心它打包输出的文件长什么样子,它只要能运行即可。当然了,我们这里需要看一下,就是它打包的文件啊,注意看啊,你看这个sum函数,它的确编译了EL的语法,但是EL的模块化语法,但是EL的什么箭头函数啊,三点算符这些它是没有变异的。
09:00
所以我们前面说啊,就是开发环境下呢,它仅能编译ES的模糊化语法,并不能编译其他语法,所以这一点要注意啊。好,那么最后我们测试看这个编译代码能不能运行呢,我们接下来呢,要把这个。啊,HL文件的这个。魅呢,改成第层不动的魅S,那么我们这时候再运行。哎,你看他就成功了,打印出来的结果了。所以这就是wipad的一个基本功能,开发模式下呢,它能够编译我们的E模糊化语法,然后呢,浏览器就能识别,就能运行了。这个同时我们也可以测试这个生产环境,我们只要把development改成production。在终端中按住上键,可以回到上一个你输入的指令,那么这样的我只要在这个地方做一些修改就好了。按下的就回到下一个里,但是没有的话就不会回了,我们回撤。
10:02
那么这是生产环境的指令,生产环境呢会对代码进行压缩,所以你能看到压缩后的代码非常小,它就报了一个匿名函数,防止命名冲突啊,然后呢,能以压缩的函数都进行压缩,我们一个减法函数,它直接给一个结果,我们的这个reduce函数,它直接把它变成一个普通的一个一个预算。好了,那么这就是压缩啊。那么同样的压缩的代码肯定也能运行,没有任何问题。OK,我们也可以看一下。也是没有任何问题的。好了,以上呢,这个就是PA的一个基本使用,那么大家在使用的过程中也可以参考我们这个教程,我们给了一些大概的流程,也可以参考它。那么最后呢,我们需要掌握的就是PA呢,它是一个打包工具。而打包呢,就是做bae加一些不能识别的语法,Be是能识别的语法,但是呢,他目前只能处理这个JS资源,一旦遇到什么CS资源呢,它是处理不了的。
11:06
这一点呢,我们后续可以给大家测试。对吧,那么我们也想要更好的使用这个PA,我们还要学习他如何去处理其他资源。所以接下来后面要学习的东西才是最重要的,这里面呢,我们只是大家初步体验一下外派的用法,以及外派的这个指令怎么去使用。好了,那么接下来呢,大家就可以尝试做一下啊,尝试一下每节呢,我们讲完之后呢,大家最好还是把整个内容呢练习一下,我们再往下看。OK,同学们可以去练习啦。
我来说两句