04. 尚硅谷_JS模块化规范_commonjs基于浏览器端应用.avi原创

来接着咱们上节课来讲，上节课呢，我们是呃，利用了这个他们GS这种模框化规范实现了在no也是在服务器的，那么这节课我们来看第三个诶，Processify也说我们这节课来实现它在浏览器的应用，好这呢有一个诶。杠pro sorryify，基于浏览器它的一个教程啊，首先呢，我们先把这些目录创建了啊，这些目录啊，找这个先来个GS文件，哎，接下来我看到这个Dis也是需要你去创建一个Dis的目录。这个Dis以后，大家你去getth上面去看别人的代码的时候，看到这个你必须得知道它里面放的是打包生成的文件。通常来说都是这样，这个不是说必须放在这儿，但是大家默认的都是会放在Dis文件夹下，有时候你也会看到这个东西。叫build build也是构建的意思，也是你对原文件进行作用，作用完的文件放在他们下面，我呢先在这儿去创建一个啊第文件。

然后呢，还需要一个src，这个src里边放置的就是我们开发的时候写的原文件啊，这个咱们都要知道，那这个时候呢，我呢在src下边来，我去创建几个模块。首先来个MODEL1，那么再来一个啊。我得把这个改了，MODU2，好。再来俩。CTRV不让我复制CTRLC来拿过来把这个。换成三，现在我们又有三个模块了，注意这一把，咱们可以把这个APP也放到src下边啊，来个APP的GS。做完这些准备工作，接下来我们要创建一个它。H ma，因为你现在是基于浏览器端实现啊，你你得和基于no也是基于服务器端实现要区分开。

可能有的同学理解不了什么叫基于服务器端，什么叫基于浏览器的。我刚刚在服务器端最终运行它，我是不是通过闹的命令来运行的，也就是说你在闹的环境下运行。基于浏览器端的意思，就是说我最终这个文件要跑在我的浏览器页面上，所以我们去创建一个它来创建一个页面。来，就放到最半边吧。这整一个。Index。好。Index有了以后，接下来我们还得去生成一个拍杰，这一把呢，我就去手动去创业一个，在我的根目录下面来一个他。然后呢，哎，首先先来一个包名，这一把呢，我们来个common GS-pro。啊，叫他。

还有一个叫version，版本号1.0.0。把这些准备工作做完以后，我们先去下载包。下载谁啊，需要大家去安装的是，首先你们第一步你们得去全局安装一次pro。然后呢，再局部安装一次，记住了，这两步都得做。可能有同学说我确定安装完不应该是在任何地方都能用的吗？哎，在他block这，他要求你两个地方都得安装。啊，然后呢，我们局部安装的时候，哎，这多了这个命令，我估计大家应该是没见过。D见过吗？我们之前说杠杠C这个属性是不是表示局部安装把依赖写入进去啊。而杠侧边又多了一个杠D。这个单词表示DEMO开发。也就是说你下载的包要是说是开发依赖的包的话，你应该加一个杠DV。

如果说是啊，运行依赖就不要他。那我先给大家说一下，什么是开发依赖，什么是运行依赖？开发依赖的意思就是当前这个包我只在开发的环境下去使用它，就是我们在程序员在开发代码的时候。什么叫运行依赖呢？你开发完了以后，你项目打包要上线，也说你在向线上环境跑的时候，又叫生产环境。啊，我们有，我们讲开发的时候有这么几种环境，开发环境，测试环境，生产环境。开发环境就是我们，哎，自己平时开发的时候，测试环境是啊，一般的测试人员他所在的的环境。而最终的生产环境代表的是我们在线上去跑的那个环境。

而现在这个工具，它只是在我们开发的时候，帮助我们去编译打包。一旦上线了，跟他没有关系了，因为他已经把活儿干完了。知道这些就够了，然后呢，全局安装我肯定是装过了，我现在需要做的只需要装一下它，但是现在要注意这个目录是不是不对。我现在应该是把处理第三个，然后把第二个关掉，怎么用呢来。粘了个啥过来，CTRLC把它拿过来，这没问题吧，回车。让他去下载。哎，下载慢的时候，你们可以在这转一转。可能会快一点。来大家看一下。我这个跟你们之前认识的有什么不一样呢？首先下载了，但是你看他写入的依赖是谁啊。

Dev dependcies我们这些写入依赖所在这个属性是不是叫dependcies啊，比如说我给大家去下载一个NPM。Install unq走你。我现在相当于是用杠杠C下载的吧。你看这两个是不一样的啊。不一样啊，你现在这个包是不是放到depends了？一看到在这个里边的包，说明它表示的是运行依赖的包。而上边这个就是开发以来的包，多了个D。就开发模式。啊，我先说一下，我如果说把这个下载到这儿，放到这儿行不行也行，没有关系，那是因为我真正运行的时候，我问一下大家这个派杰森我只读一遍他我就能这个包能发挥作用吗。不是真正运行的时候，他找的是谁啊，找我们no MOS里面对应的包吧。

这只是一个说明书。哎，表示我是一个开发依赖的包，真正运行的时候不看这看哪看这里边。这是真正你的工具。现在大家知道note modules是怎么来的吗？这个包这个文件上还有吗。没有，什么时候会有他。当你NPM到去下载包的时候，它是不是就有了。那知道了这些以后，我们往下来看这些编码呢，哎，我们就不去敲了，因为刚刚我们写的就是这些东西。这是不是相当于是暴露了一个对象啊，对象里面有个方法，那再来这个呢，是去暴露一个函数。没问题，而第三个模块我让他去分别暴露，也是用XP点叉，叉叉等于value。这相当于说报了两个函数。没问题，重点是这个APP，这我们再来一个，看如何去使用它，那我还是去let一个modulee等于啊，我发现刚才有的同学好像还是不懂这啊。

哎，在这里边走你当前路径下，我这一把APP是不是和他们在同一个目录下，那所以我这直接就是。一然后咔咔复制两份，把这个换一换。二。转业的话，这个来个三，哎，这个也来个三，那大家说现在我怎么去使用它再走一遍啊。先来看马丁一怎么去使用。那看一下毛底这一块。你得知道MODU1是一个对象。这个对象就和它是等价的。然后我们是不是得通过对象点O找出这个函数？mo1.mo调用，那马顶二呢，哎，你看。

看到这没有说明它是一个什么，本身就是个函数法，因为我这暴露的时候是相当于用这个函数把之前的Xbox去给给它覆盖了。第三个不用说了，分别暴露这种方式，我统一的最外层的接口是不是这个对象。所以我应该是啊MODU3条fo，然后再来一个八。没问题吧，现在我这个主文件有了以后，你能不能这样去运行它呢。你现在运行可以，但是你是不是又是基于浏览器的了，你是用note去跑的，而我们现在想要在哪跑呢？你浏览器端你是不是要找到对应的页面啊，找到对应的页面的话，是不是在这。大家看着我先用个标签，我去引入一下。我们你跑的时候是不是跑这个主文，主文件又叫主模块啊，那你看啊，来我找一下当前路径下。

GS下边src下边abb.gs是它吧，一落这肯定没问题。你去跑一下，你看一下检查。这就是印证了我刚才说的话，Require a not。是浏览器引擎压根不认识这个方法。这个时候我们是不是得提前需要编译打包处理啊？Be，打包处理就是对你的原文件去打包处理，对他。如何打包处理呢？我们利用的工具就叫sorryify，我刚刚是不是已经下载下来了？一旦下载下来proify，在你的当期项目，你就多了一个命令，就叫pro。而通过这个命令，我们后边要有一些配置。注意了，这个配置一共分为三部分，我们可以从中间一刀切开它。

中间这一部分和左右两边以空格连接。中间这是不是杠O，杠O的意思就是out put什么意思呢？输出，而输出的左边你看看是去找的谁。BROWSE3是不是找GS下边，RC下边是不是找到它了，这左边是我要找的是目标文件，就原文件。因为我马上要对他做出处理。右侧是我作用完了以后输出的文件路径以及文件的名字。注意这个gsd是不是找到这个空的文件了，而后面这个bad GS是什么意思呢？我给我做打包完的那个文件起了个名字，这个名字起什么都可以白通常表示是哎。打包的意思。能懂吗？那现在我们自己写怎么写，咱们是不是应该是现在你是在根目录下吧，应该找谁啊，GS下面src下面的APP等于GS，这没问题吧，然后你再想我是不是要输出写个杠O，记住了加一个什么。

空格，接下来你要指定是我输出的文件目录以及什么。名字我故意写个不要的解释。也可以开一个回车。当你看到光标重新停到这儿的时候，它已经干活了。啊，只不过是比较低调一点，他干活他不说。然后你看我点击一下这个地址的文件，大家看这多了个箭头了吧，说明里面有东西了。然后你点开看一下。现在这是不是多了个贝的GSR，来，我们进来看一下，这个肯定和原文件是不一样的。首先这个B的GS上面，这是一个内置的函数，有很长，不用去管它。

而下面这些，就是人家做出的处理。有的同学说老师我看不懂这个，这个不需要你去看懂，你只要能看懂你的原文件，这个什么才是我们开发的东西啊。而打包完那个我只需要干嘛，我在这儿引入他。也就是说，我现在浏览器真正跑的不是我的原文件，而是什么？打包生成完的这个文件，我现在是不是应该找第下面的build JS。那这个时候我们再来刷新一下页面，走你。就好了。现在common JS这种规范就应用到浏览器端了。那都不。没啥问题，那这个教程里边啊，就有这些东西啊，大家接下来要调这个来，我把这个视频先停一下。