00:00
Hello,大家好,那这个小节我们来对之前所封装的这些工具函数文件做一个打包。啊,为什么要打包呢?因为单独拆开这样去用啊,非常非常麻烦,每一次还需要单独对文件做一个引入。呃,这样的话用起来不方便,所以说我们想着把这些所有的功能代码呢,全都打包成一个文件,后续如果说需要使使用的话,直接引入那一个文件就可以了。那下面的话,我们就开始来实现一下这个功能。要想实验这个功能呢?我们需要借助一个工具,就是要用pack啊,当然不一定非要使用VI pack,但是用VI pack比较方便一些。好,那么步骤的话,这已经列好了,我们只需要按照这个步骤一步一步向前推进即可。首先第一步呢,要先安装note GS啊。如果你已经安过的话,就不需要再安了啊,如果说没有安过的话,请到诺基S这个官网去做一个下载安装。啊,这是第一步,那第二步的话,我们需要借助于NPM这个应用程序去做一个项目的初始化,NPM呢是诺下边的包管理工具啊,这个不需要单独安装,只要你安装完诺基S之后,NPM就可以使用了。
01:15
好了,接下来的话,我打开咱的这个命令行,注意啊,这个动作一定要在命令行当中完成。然后呢,运行NP minit-Y。做一个初始化。这个命令运行完之后呢,会在当前文件夹下边生成一个文件叫package的JS,就是那个配置文件啊。好了,下边的话就开始安装工具了,那这里我需要说明一个小的注意点,就是你在运行这个命令的时候呢。一定要让你的文件夹是一个呃,非中文的名称,不要使用这个中文名称啊,因为如果是中文名称的话,这个命令运行是会报错的啊,这点需要额外注意一下。好,那下边我们来安装一下工具,就是vipa和vipa client,这两个必须都要安装。
02:03
少一个不行啊。好了,安装的话,这里需要花点时间,我们稍微等待一下。安装完成,安装完成之后呢,在文件夹下边会多出来一个文件夹叫note modus啊,这里边儿装的就是刚才通过NPM安装的这些工具了。呃,里边东西大家不用关心啊,就是所有所有的这个VIP相关的一些组件都会安装在这里边啊。这块就不用再管它了。好,然后呢,下边的话呢,我们开始去配置一下VIP。这里我们需要创建一个文件啊,就是pack配置文件啊,这个名字呢,必须要起成这个名字啊,叫y pack.con.gs好,我们新建一下文件,拿过来往这一放。然后里边代码呢,这里我建议也不要自个儿去写了,直接把它复制一份。然后拿过来。然后呢,我来给大家简单介绍一下啊,这都是代表什么意思,首先第一行代码呢,是引入。
03:02
引入这个note GS的内置模块。Pass这个模块啊,Pass模块呢,是可以将路径做一个处理的,它这里边儿用到一个功能,就是将相对路径转为绝对路径,要用到它,所以说的话,在这里需要把pass引进来。而mo.export呢,是对外暴露一个对象啊,这个对象呢,将交给y pack去使用啊,从里边读取相关的参数,然后呢对代码进行打包,生成最后的结果。然后呢,Mode这块啊,它是一个运行模式,有两种模式,一种是开发模式,一种是生产模式。呃,生产模式的话会对代码做一个压缩啊,开发模式的话会有相关的注释和。代码的这个缩进。呃,我们目前阶段的话,就把它设置为development就可以。然后呢,下边这个呢是in锤,In锤呢为打包的入口文件就是VIP呢,待会儿会帮我们去进行打包,打包的话它从哪开始打包。
04:02
需要设定它的一个入口的文件位置。我们现在把它设定为点杠s RC index.gs也就是说待会y pack在打包时,它会先去找这个文件啊,目前呢,咱们还没有这个文件,咱们待会再加啊,先去介绍。然后呢,这是入口,下边是出口output。Output就是说当y pack呢,把这代码都打包完毕之后,它最终输出到哪个位置,我们得告诉给y pack。呃,这里边儿包括几个属性啊,第一个是路径打包的哪个文件夹。啊,File name呢,是打包到哪个文件里边,所以他们两个最后呢,就形成了,呃,打包文件最后的存储路径。然后呢,第二第三一个呢是library library呢是设置一个对外暴露的全局对象的一个名称啊,就是说你呢,打包完之后呢,你希望能够在全局的哪个呃对象当中能够直接去使用你打包当中的一些函数或者方法。
05:04
啊,我们这儿写的是a us,当然这个名字你是可以改的啊,比如说你可以直接写一个U,这个也是可以的啊,没有问题。好,然后下边这个呢,是一个固定写法library target,然后呢,就是我们在进行模块导入的时候呢,可以使用ES6的,也可以使用commons的,也可以呢,使用这个AMD规范的啊这些语法对代码做一个导入。好,这是对这一块我们对代码呢做了一个介绍。那么下边的话,咱们去呃,写一下index.gs这个入口文件啊,新建一下这个文件。注意你的,像你注意你的创建位置啊,千万要创建对位置,要不然的话,到时候他找不到文件就会报错。好文件建好之后呢,咱们往里边呢,去写一些东西啊。这块的话,我们把代码也复制一份。OK啊。然后呢?这个代码的意思的话,就是像文档当中写入一个。
06:03
呃,字符串啊,测试自定义包,并且在控制台上输出一个test,好了,这是一个入口文件内容,呃,你别急,最后呢,咱们这个文件内容还会去做变化啊,目前咱们只是属于结构搭建这个阶段。那么写完之后呢,下边呢。咱们还需要去配置文件当中去加一个这样的属性。就是到package阶层当中。这个文件在这。杰森。到这个里边呢,咱们去添加一个属性啊。这个属性其实为了方便我们去运行命令而。去设置的啊,把它呢复制一份啊,直接把这个复制一份。然后把它拿过来。然后呢,其实这块呢,我们可以不用去讲啊,如果加上之后呢,以后我们可以通过这个Bill的冒号watch,通过这个命令啊来去。呃,使用y pack,呃去对代码做一个打包,就是如果说你要想打包,你就可以直接去运行呃,这个命令就可以了,那么这个命令该怎么去运行呢?大家看这。
07:08
我们可以在命令行当中去运行一下n PM run。加这个属性名,通过这种方式对命令做一个执行,我们来把它运行一下。好,然后在这右键粘贴敲回车。打包一下。好,大家注意观察啊,打包完成之后呢,在文件夹当中会多一个目录叫D啊,里边呢会多一个文件at硅谷杠u.GS那么这块是怎么回事呢?这块其实就是由出口的这块的设置。啊,然后呢,由它来控制的,然后这个呢,它是用来控制输出的文件夹目录的,啊,你看是Dis的目录,而这个file name呢,是最终打包的文件名称,它在这。啊好,到到这儿的话,我们把文件就已经打包完成了,打包完成之后呢,我们需要做一个测试啊,怎么测试呢,就是新建一个HTML文件啊,在test里边咱们新建一个文件。
08:07
呃,咱们写一个index.html吧,做一个测试。怎么测呢?首先需要先把那个GS文件咱们需要引进来啊,Script标签src点点杠,然后Dis at硅谷u.GS。然后呢,在里边呢,我们就可以去使用了,怎么去使用呢,我们刚才说了啊,这在全局呢,会暴露出来一个对象啊叫U啊,它这块叫A,有就是咱们这这文档里边写的是A啊,不过呢,我们在配置的时候呢,把这个名字改了叫U。所以说呢,我们这儿就用U。先呢来输出一下这个变量啊,看它那好使不好使。打开。控制台刷新页面,你看这儿。啊,没有问题,而且里边也有test这个方法,所以说在这我们可以直接去调一下test这个方法保存。
09:00
切过来刷新一面。你可以看这。啊,页面呢有内容了,而且呢,控制台也有内容。由此可证呢,这个结构就已经搭完了。呃,目前来说,我们已经能够将这个test函数打包在最终的结果文件当中了,而下一步咱们要做的事情就是把src当中的这些所有的文件啊,全都啊放到这个index.gs里边,我们开始做一个导入,然后报入就可以了。好,那这个小节呢,关于整个结构搭建,咱就先到这儿啊,我们先把它保存一下。
我来说两句