00:00
上节课呢,我们已经写好了生产模式的配置,当然前面我们也写好了开放模式配置。那么经过对比呢,我们发现啊,就是开发模式的配置和生产模式配置呢,有很多内容是非常相近的。可以说是一模一样。所以我们这里相当于是出现了很多重复代码,我们想尽可能的去复用代码。对吧,所以我们呢,决定去合并开发和生产模式的配置,从而让代码的复用性更强,让配置的复用性更强,从而减少代码体积。好了,那么这个怎么做呢?我们来看啊,原来的文件我还是不删除,这个呢,可以留给大家将来自己去看啊。我定义一个新的配置文件叫WiFid computers,我打算在这里合并这两个下面的文件。好,我们复制其中一份进来,我们来合并啊,我们得走,我们从上到下一点看啊,首先第一个啊,处理样式这里。
01:00
开发模式下它得用style loader,而生产模式下得用这个minis plug上面的loader对来提取成单独文件,所以两个模式呢,它用的load是不一样的。那么这里带来的第一个问题就是,我怎么知道当前运行的环境是开放模式还是生产模式呢?同学们可以思考一下。好,接下来我们就揭晓答案了。那么问题就是我们之前在运行的时候已经通过cross env定义了个环境变量,将noe env,它的值是development,代表开发模式,对吧?它的值是production,代表生产模式。所以我们已经能通过这个no UV来区分了。那么问题来了,这个no硬又怎么获取呢?我们一起来看啊。广东有个process点烟v.no的env对吧。那么这个就是获取这个漏的运行的时候啊,进程上面的环境变量的一个东西。
02:06
进程对吧,V就是environment环境,那么这个就是环境变量,我们弄的UV,我们可以尝试打印它啊。打印它的值,我们来看效果。好,这个时候呢,我们需要做的是就是把我们的这个配置文件的指令啊,都改成cons。好,现在它能不能启动没关系啊,我们打包一下我们PM3。我们运行如果错误也没关系,我们主要是看打印结果。诶,你看开发环境下打印的值是development OK,别的运能不能运行那就不重要了。我们再看偏必要的。生产模式,诶,打印的只是production OK,他打不打包也无关紧要了。所以我们可以通过这个process env.no nv来获取到process定义的这个环境变量,从而来区分它的值。
03:02
我们判断它是不是production。那么就看它的值是不是等于production。OK。我们这里是获取啊。好了,那么有了这个直角区分了,那这里就直接写,如果你是生产模式下,对吧,你就用这个load,没关系,OK,开放模式下我们得写style。诶,这样就能完美解决这个问题,生产模式用这个提取CS成单独文件的一个差load,那么开放模式下用style load把styleo创建style标签去生产。好,接下来往下走啊,然后pass呢是输出路径,那么这里我们也可以指定一下,生产模式下呢,输出到第层下去,开发模式下呢,它可以是按DeFine。
04:01
然后这个文件命名这里呢,也是如此啊。生产模式下这样命名没任何问题,开发模式下呢,要做的就是在它的这个去掉这个c hush。好了,那么下面这里也是如此。那么我们要做的加个串。OK,然后这一块呢,不管生产还是开发都一样,没必要啊,肯定处的话呢,你这个改或者不改都没关系,因为即使是开发模式,它清楚也没关系,它也清不了东西啊,所以这里为触的话,你可以改也可以不改。往下走,我们继续往下走。好,这里涉及到BI罗的啊,开发模式下呢,我们希望有这个HRMR功能,所以我们BI这里需要加载一个插件。来,我们来看一下这个插件啊。插件需要引入。
05:04
我们要解决这个HR功能的一些问题,OK,然后呢,在这里需要加载一个插件。那么这个插件呢,注意在生产模式下是不需要的,所以怎么办呢?所以我们这里要加个判断。如果,如果是生产模式下,他当然不要啊。那么我们这里要取个法。要用个语。对吧,如果不是生产模式,诶,咱们就用这个插件,如果是生产模式,那么取出取呃法就是false false呢,后面这个就进不来,那么我们最后呢,Force的话,不能在parks里面放一个职位,False的东西会报错的,我们把它过滤掉就好了。哎,这样就可以过滤掉了啊,所以生产模式下呢,这里不会加载它的数组,里面就是空数组,那么开发模式下呢,因为它为false取法就是处处的话,就会返回第二项值,就有值,有值过滤就不生效。
06:11
好,往下走,往下走。呃,那么这一块呢,我们这个插件呢,只要是在生产环境下使用,所以我们一样的生产环境下使用这个插件。Copy的话呢,也是生产环境下去复制就好了,开发模式下不用复制啊。OK,然后呢,接下来我们再看啊,那么我们需要用的这个HR功能的话呢,也需要用这个插件,所以在这里还需要用调用一下。OK,那么它是在开发模式下使用,所以我们只要生产模式取可法就好了。然后最后呢,下面这插件有可能有有可能没有,所以我们在这里也是要过滤。如果都有的话,就不需要过滤啊,有可能有可能没有要过滤,然后这里呢,到底用什么值,我们直接写啊,生产模式下用,Production开发模式下用。
07:13
Ma也是生产模式效应。开发模式下用。OK,然后呢,这个minimize呢,就是压缩啊,压缩呢,我生产模式下才需要开发模式不需要,那怎么办呢?我们有个minimize的一个选项啊,它是控制我们到底它的它的值为错。啊呃,是否需要进行压缩。对吧,它处就要,False就不要,而一旦production为true,它就会进要压缩,如果为false,那么下面的选项都不会用。所以通过这个选项就可以直接控制了,会比较方便一点。
08:00
好了,那么到这里呢,我们就把生产和开发的模式的配置了,当然最后还差一个低于so的配置,我们要引进来,低于so配置呢,和生产模式的配置放一起是没有关系的,因为是因为低于serve的这个配置需要我们运行指定的时候加一个serve选项,它才会激活这个配置,如果你没有加serve,这个配置是不会激活的。所以我们只要通过运行指定的方式来控制它,就会以控制到底低于so能不能用了。好了,那么指令的我们这前面也已经配置好了。诶,我们开发模式下呢,它是用serve,所以会激活DV server的配置,生产模式下没有,所以它会打包出来,他们用的都是同一个JS文件,诶接下来我们可以运行来看效果啊。NPM3呢,运行的是开发模式下的这个环境。所以它呢会启动DB server,然后呢热更新对吧,刷新也是没问题的。
09:01
OK,我们终止掉n PM run的,那么这时候会进行生产模式的打包。当然也是没有问题的,OK,打包成功没有问题。那么这样呢,我们就配置好了,所以实际上呢,我们只需要一个配置文件就可以了,在这一个位置配置文件中呢,我们通过这个process.env.Nov来对它的这个模式进行判断。然后呢,判断它是生产给生产的配置,判断它是开发给开发的配置,我们只要这样对吧,这样3.3元运算符,或者是通过过滤的方式,那么最终就可以达到我们想的需求。好了,那么这里呢,我们就把这两个配置合并了,合并成一个文件代码呢,就更加可复用。OK,那么接下来呢,大家可以尝试自己做一下,那么做的过程中呢,建议大家从上到下异地里去看。
10:00
看测完之后呢,最后运行一下看看效果对吧,也可以把之前的DV配置和PD配置再进行对比,最后再检查一下看有没有疏漏的。好了,那么这以上呢,就是我们把D和PD,也就是。开发和生产模式配置进行合并,形成一个配置文件。
我来说两句