00:00
Hello,大家好,这个小节呢,我们来讲一下ES6模块化代码在项目当中的一个使用方式。在前几个小节呢,我们都是在HTML页面里边直接去引的这个入口文件。但是呢,在项目当中呢,我们往往不会这么去做,为什么呢?其主要原因还是在于兼容性这个问题啊,并不是说每一款浏览器都能像Chrome这样子能够支持啊,所有的特性啊,这是一方面,第二一方面的话呢,咱们ES6模块啊这一块呢,还不能够直接对NPM安装的一些模块做一个导入。所以说呢,我们在项目当中一般不会这样去引,而是会采用另外一种方式来做,就是通过背去做一个转换,好我们来看一下,首先呢,我们先去打开背的一个官网。BA呢是一个javascript的编辑器啊,能够将ES比较新的这个特性的语法转化为浏览器能够识别的ES5的语法啊,这样一来的话呢,我们可以将我们源代码啊,将源代码然后呢做一个啊ES就是做一个背的一个转换,变为这个浏览器可以识别语法,这里主要指的是啊ES5啊,转完之后呢,我们再对代码做一个打包,形成最终的一个单独的文件,然后页面做一个引入就OK了。
01:27
好了,然后接下来的话呢,我来给大家演示一下这个流程,首先我先新建一个文件叫home.html,我们以这个页面来为例,还是一样想把这个文件的内容呢,就把这些文件内容呢做一个引入来使用,好了我们来说一下步骤。第一步的话,我们我们先去安装一些啊工具。啊,工具呢,包括三个,第一个的话是b client啊,另外一个呢是b pre,然后en还有。
02:05
BA client是BA的一个命令行的工具,而BA pre en nv呢,这是一个预设包,能够把最新的啊,这个E就是GS的一个,就是ec msscript的一个特性啊,做一个转换,转换为咱们这个ES5的一个语法,而下边这个呢呢是一个打包工具,我们在这儿呢选用的是,而并没有选择,我们在项目当中的话呢,会选择使用去做一个打包,呃,选择它一个主要原因,因为它比较简单,而ypa这块我们还要再去做额外的一些配置,所以说我这里选择processify去做一个打包,好,我们先来安装一下。打开这个命令行,然后在这儿首先做一个初始化NP mitit杠杠,Yes。好,然后接下来的话呢,NP mi b client,然后b pre env,以及我们选择杠D就是开发依赖。
03:09
那么这块呢,安装需要点时间,我呢把它暂停一下,安装完毕,安装完毕之后呢,接下来我们就可以对代码做一个转化了啊,这是我们的源代码,就是SRCGS目录下边是我们的源代码,好,我们开始对这个文件夹里边的文件做语法转换,这里用的是背命令,好那么因为我们是局部安装,所以说的话我们要这样子,用NPX来执行BA这个命令。如果说你是全局安装,那你就可以直接使用BA了,好,因为我是选择局部用npx BA,然后呢,后边呢,第一个参数呢,是我们原文件的一个目录。好,来写一下src,写杠GS,那么下边是一个杠D的选项啊,就是我们要把啊转换完的结果存到哪个文件夹项啊,我们想的是存到disst,然后呢斜杠GS下,然后后边我们需要跟一个参数,就是杠杠present等于一个BA啊presents,然后env,然前面这加一个S啊presents预设。
04:20
啊,OK,跳一回车,其实在这儿呢,可以呢,单独做一个配置文件背RC,但是我们这主要是给大家介绍一下它的一个过程,所以说我这为了简化就直接在命令行传参了,好接下来的话,我们点开这个diss目录,点开这个文件。大家可以看一下。你会发现这个代码呢,就发生了一些改变啊,可以对比一下M1和M1。这src下边的M1呢是我们的原文件,就是我们编写代码时的一个情况,而Dis下边这个一呢,是转换之后的一个结果。大家可以看一下啊,里边的暴露语法呢,发生了一些变化啊,这个暴露语法呢,是common GS模块化规范的一个语法,那么转换完之后呢,下边咱们还再做一个事情,哎,那我这把步骤写一下啊,第二步是通过NPXBA。
05:15
然后做一个转换啊D下边GS转换完之后呢,第三步咱们需要做一个打包,就是这个文件,这个入口文件,咱们如果直接用页面去引入,它也是不能够正常去运行的,就require语法它不识别,我们可以来测试一下,在下边写一个script。OK,然后src等于啊D下边GS下边app.js保存一起来看一看,打开。刷新页面,你看一下require is not DeFine这个语法它不能识别,那下一步咱们还要再做一个打包,打包呢,我们记住是ify啊,Ify,然后它的第一个参数是入口文件Dis,斜杠下边的app.gs然后它的选项输出选项是杠O,就最终把这个文件输入出哪个位置,我们来一个D,下边直接写谁啊app.gs啊,Sorry,咱们换个名字啊,Bundle。
06:15
点7S保存啊,这是咱们的一个,呃,算是一个笔记啊,然后咱们在命令行下面运行一下NPX。Dis gs.gs-o Dis bund.gs回车。好,大家看一下啊,在Dis的目录下边就会多了一个文件叫bund.js,此时呢,这个文件咱们就已经打包好了,打包好以后我们回到home.html引入文件时,我们就去引这个diss下边的b.JS保存,然后点开浏览器来看结果。那么此时你发现呢,咱们模块一,模块二,模块三的内容就全都来了啊,我们可以呢,再来调用一下里边的方法,好,首先咱们改的时候呢,你不能改Dis,你要改的是原文件点开M1,好,Sorry,咱们点开这个AGS啊,直接去调M一点它有个方法叫teach啊,然后呢,M2呢点find job。
07:15
好,然后呢,M3呢,点default.change括弧。好了,我们把上面这三个呢,先保存掉啊,先注释掉啊,那么这样子完了之后,咱们页面它会改变吗?点开看一下刷新它是不会改变的,为什么呢?因为它这个页面引的文件是Dis下边的帮GS,而我们刚才改的是谁呀?改的是这个app.gs。所以说你现在要想看到结果呢,还要对咱们的文件做一个重新的转换和打包,好先来背。然后下边的话再来运行。OK,文件改了,改完之后咱们点开看一下,诶把你开教你开发技能是吧,帮你找工作啊改变你。
08:01
好了,那么这是当前我们给大家介绍了一下呢,使用BA来对咱们ES6代码做的一个转换,以及使用B做一个打包啊,然后最终让咱们的页面网页啊HTML来引入这个GS文件,这样一来的话呢,就是你的浏览器啊,甭管支持不支持ES6啊,都没有关系,都能够正常来运行这个结果,因为咱们这里做了转换。好,那个这个小节我们就先到这儿。
我来说两句