00:00
来接着咱们上节课来讲,上节课呢,我们是呃,利用了这个他们GS这种模框化规范实现了在no也是在服务器的,那么这节课我们来看第三个诶,Processify也说我们这节课来实现它在浏览器的应用,好这呢有一个诶。杠pro sorryify,基于浏览器它的一个教程啊,首先呢,我们先把这些目录创建了啊,这些目录啊,找这个先来个GS文件,哎,接下来我看到这个Dis也是需要你去创建一个Dis的目录。这个Dis以后,大家你去getth上面去看别人的代码的时候,看到这个你必须得知道它里面放的是打包生成的文件。通常来说都是这样,这个不是说必须放在这儿,但是大家默认的都是会放在Dis文件夹下,有时候你也会看到这个东西。叫build build也是构建的意思,也是你对原文件进行作用,作用完的文件放在他们下面,我呢先在这儿去创建一个啊第文件。
01:09
然后呢,还需要一个src,这个src里边放置的就是我们开发的时候写的原文件啊,这个咱们都要知道,那这个时候呢,我呢在src下边来,我去创建几个模块。首先来个MODEL1,那么再来一个啊。我得把这个改了,MODU2,好。再来俩。CTRV不让我复制CTRLC来拿过来把这个。换成三,现在我们又有三个模块了,注意这一把,咱们可以把这个APP也放到src下边啊,来个APP的GS。做完这些准备工作,接下来我们要创建一个它。H ma,因为你现在是基于浏览器端实现啊,你你得和基于no也是基于服务器端实现要区分开。
02:07
可能有的同学理解不了什么叫基于服务器端,什么叫基于浏览器的。我刚刚在服务器端最终运行它,我是不是通过闹的命令来运行的,也就是说你在闹的环境下运行。基于浏览器端的意思,就是说我最终这个文件要跑在我的浏览器页面上,所以我们去创建一个它来创建一个页面。来,就放到最半边吧。这整一个。Index。好。Index有了以后,接下来我们还得去生成一个拍杰,这一把呢,我就去手动去创业一个,在我的根目录下面来一个他。然后呢,哎,首先先来一个包名,这一把呢,我们来个common GS-pro。啊,叫他。
03:00
还有一个叫version,版本号1.0.0。把这些准备工作做完以后,我们先去下载包。下载谁啊,需要大家去安装的是,首先你们第一步你们得去全局安装一次pro。然后呢,再局部安装一次,记住了,这两步都得做。可能有同学说我确定安装完不应该是在任何地方都能用的吗?哎,在他block这,他要求你两个地方都得安装。啊,然后呢,我们局部安装的时候,哎,这多了这个命令,我估计大家应该是没见过。D见过吗?我们之前说杠杠C这个属性是不是表示局部安装把依赖写入进去啊。而杠侧边又多了一个杠D。这个单词表示DEMO开发。也就是说你下载的包要是说是开发依赖的包的话,你应该加一个杠DV。
04:07
如果说是啊,运行依赖就不要他。那我先给大家说一下,什么是开发依赖,什么是运行依赖?开发依赖的意思就是当前这个包我只在开发的环境下去使用它,就是我们在程序员在开发代码的时候。什么叫运行依赖呢?你开发完了以后,你项目打包要上线,也说你在向线上环境跑的时候,又叫生产环境。啊,我们有,我们讲开发的时候有这么几种环境,开发环境,测试环境,生产环境。开发环境就是我们,哎,自己平时开发的时候,测试环境是啊,一般的测试人员他所在的的环境。而最终的生产环境代表的是我们在线上去跑的那个环境。
05:02
而现在这个工具,它只是在我们开发的时候,帮助我们去编译打包。一旦上线了,跟他没有关系了,因为他已经把活儿干完了。知道这些就够了,然后呢,全局安装我肯定是装过了,我现在需要做的只需要装一下它,但是现在要注意这个目录是不是不对。我现在应该是把处理第三个,然后把第二个关掉,怎么用呢来。粘了个啥过来,CTRLC把它拿过来,这没问题吧,回车。让他去下载。哎,下载慢的时候,你们可以在这转一转。可能会快一点。来大家看一下。我这个跟你们之前认识的有什么不一样呢?首先下载了,但是你看他写入的依赖是谁啊。
06:03
Dev dependcies我们这些写入依赖所在这个属性是不是叫dependcies啊,比如说我给大家去下载一个NPM。Install unq走你。我现在相当于是用杠杠C下载的吧。你看这两个是不一样的啊。不一样啊,你现在这个包是不是放到depends了?一看到在这个里边的包,说明它表示的是运行依赖的包。而上边这个就是开发以来的包,多了个D。就开发模式。啊,我先说一下,我如果说把这个下载到这儿,放到这儿行不行也行,没有关系,那是因为我真正运行的时候,我问一下大家这个派杰森我只读一遍他我就能这个包能发挥作用吗。不是真正运行的时候,他找的是谁啊,找我们no MOS里面对应的包吧。
07:02
这只是一个说明书。哎,表示我是一个开发依赖的包,真正运行的时候不看这看哪看这里边。这是真正你的工具。现在大家知道note modules是怎么来的吗?这个包这个文件上还有吗。没有,什么时候会有他。当你NPM到去下载包的时候,它是不是就有了。那知道了这些以后,我们往下来看这些编码呢,哎,我们就不去敲了,因为刚刚我们写的就是这些东西。这是不是相当于是暴露了一个对象啊,对象里面有个方法,那再来这个呢,是去暴露一个函数。没问题,而第三个模块我让他去分别暴露,也是用XP点叉,叉叉等于value。这相当于说报了两个函数。没问题,重点是这个APP,这我们再来一个,看如何去使用它,那我还是去let一个modulee等于啊,我发现刚才有的同学好像还是不懂这啊。
08:09
哎,在这里边走你当前路径下,我这一把APP是不是和他们在同一个目录下,那所以我这直接就是。一然后咔咔复制两份,把这个换一换。二。转业的话,这个来个三,哎,这个也来个三,那大家说现在我怎么去使用它再走一遍啊。先来看马丁一怎么去使用。那看一下毛底这一块。你得知道MODU1是一个对象。这个对象就和它是等价的。然后我们是不是得通过对象点O找出这个函数?mo1.mo调用,那马顶二呢,哎,你看。
09:00
看到这没有说明它是一个什么,本身就是个函数法,因为我这暴露的时候是相当于用这个函数把之前的Xbox去给给它覆盖了。第三个不用说了,分别暴露这种方式,我统一的最外层的接口是不是这个对象。所以我应该是啊MODU3条fo,然后再来一个八。没问题吧,现在我这个主文件有了以后,你能不能这样去运行它呢。你现在运行可以,但是你是不是又是基于浏览器的了,你是用note去跑的,而我们现在想要在哪跑呢?你浏览器端你是不是要找到对应的页面啊,找到对应的页面的话,是不是在这。大家看着我先用个标签,我去引入一下。我们你跑的时候是不是跑这个主文,主文件又叫主模块啊,那你看啊,来我找一下当前路径下。
10:05
GS下边src下边abb.gs是它吧,一落这肯定没问题。你去跑一下,你看一下检查。这就是印证了我刚才说的话,Require a not。是浏览器引擎压根不认识这个方法。这个时候我们是不是得提前需要编译打包处理啊?Be,打包处理就是对你的原文件去打包处理,对他。如何打包处理呢?我们利用的工具就叫sorryify,我刚刚是不是已经下载下来了?一旦下载下来proify,在你的当期项目,你就多了一个命令,就叫pro。而通过这个命令,我们后边要有一些配置。注意了,这个配置一共分为三部分,我们可以从中间一刀切开它。
11:00
中间这一部分和左右两边以空格连接。中间这是不是杠O,杠O的意思就是out put什么意思呢?输出,而输出的左边你看看是去找的谁。BROWSE3是不是找GS下边,RC下边是不是找到它了,这左边是我要找的是目标文件,就原文件。因为我马上要对他做出处理。右侧是我作用完了以后输出的文件路径以及文件的名字。注意这个gsd是不是找到这个空的文件了,而后面这个bad GS是什么意思呢?我给我做打包完的那个文件起了个名字,这个名字起什么都可以白通常表示是哎。打包的意思。能懂吗?那现在我们自己写怎么写,咱们是不是应该是现在你是在根目录下吧,应该找谁啊,GS下面src下面的APP等于GS,这没问题吧,然后你再想我是不是要输出写个杠O,记住了加一个什么。
12:18
空格,接下来你要指定是我输出的文件目录以及什么。名字我故意写个不要的解释。也可以开一个回车。当你看到光标重新停到这儿的时候,它已经干活了。啊,只不过是比较低调一点,他干活他不说。然后你看我点击一下这个地址的文件,大家看这多了个箭头了吧,说明里面有东西了。然后你点开看一下。现在这是不是多了个贝的GSR,来,我们进来看一下,这个肯定和原文件是不一样的。首先这个B的GS上面,这是一个内置的函数,有很长,不用去管它。
13:03
而下面这些,就是人家做出的处理。有的同学说老师我看不懂这个,这个不需要你去看懂,你只要能看懂你的原文件,这个什么才是我们开发的东西啊。而打包完那个我只需要干嘛,我在这儿引入他。也就是说,我现在浏览器真正跑的不是我的原文件,而是什么?打包生成完的这个文件,我现在是不是应该找第下面的build JS。那这个时候我们再来刷新一下页面,走你。就好了。现在common JS这种规范就应用到浏览器端了。那都不。没啥问题,那这个教程里边啊,就有这些东西啊,大家接下来要调这个来,我把这个视频先停一下。
我来说两句