00:00
好,咱们开始上课,那这节课呢,咱们来看,哎,模块化规范的第四种叫ES6,那讲之前呢,我先说一下,其实ES6这种模块化规范很重要啊,现在的应用最广泛的就是它。啊,因为ES本身就比较火,而且你有没有觉得其实上边这个CD和AMD其实挺烦的,相对来说。他要比common GS要烦得多。啊,为什么要先讲这两个,讲完这两个再讲ES6,哎,你会感觉。为什么?ES6为什么会来?我们先来看一下它的说明,在这儿啊。首先ES6这种模块规范,它也需要依赖的模块,需要编译打包处理。上来就说这句话,第一个ES6里边。它的语法现在还有浏览器不支持,那这个时候我们通常用ES6开发完,肯定要将ES6的语法。通过工具去转化为ES5,这样的话浏览器引擎才能识别。
01:06
第二点,当你将ES6通过工具去转化为ES5的时候,它里边自带了一些也称使用括号语法。那这个时候浏览器已经又不认识。而去打包编译块这种语法呢?我们需要依赖于上午我们用到的工具,叫ify。哎,Sorryify,我们先来看一下它的语法。就这么点儿。你看这个语法就这么点,你看看这个。哎,CMD语法没有对比就没有伤害啊,好在我们ES6里边导出模块用export。大家看我上午在敲代码的时候,有时候敲一个一,哎,我一回车是不是少个S啊,那就是因为它这个语法叫export,哎如何引入模块呢,Port。就这么点儿东西。
02:00
那我们来看一下它如何实现呢?在浏览器端。首先你要注意,我刚刚说了,要使用一个工具去转换为ES6,为ES5用到的这个工具叫B,哎BA呢有他自己的官网,我们可以去访问一下。这不是白报吗?这呢就是诶double的一个官网,它现在这还换了一下啊,换了一下好,它BA其实有很多作用,大家看这还列出来让你去学什么。E6是不是也有一些学习文档,哎,重点是我们要看一下,我我点一下这个试用,我看一下,哎,他这个改版了啊。在这跑不了,哎,他以前在这叫一个什么叫在线在线实验啊,现在叫试用,我先来带大家看一个东西。现在这儿有一个分水岭。你其实你看这你能猜出右边要写什么。
03:01
严格模式,也就说又严格模式是不是ES5里面的东西啊,右侧是ES5,它这叫在线实验室,什么意思呢?我在左侧去写ES6代码,Message等于啊。Hello。看这边。他在线也是指意思,也是它的工作原理,你用上我这个,你写ES6的代码,我是不是自动帮你转换为ES5,是不是换成word了,呃,有意思,你比那个fun。看到这没有,是不是自动帮我们转换为ES5了,哎,知道了这个以后,呃,我看看它这个改版的啊。这个界面呢,倒是比以前要好看一点,界面呢,比以前好看一点。然后呢,这有个文档,文档这有个配置,呃,我来看一下这个配置。这是说的BA的一些配置C,其实在我的那个教程里面有啊,我是看给大家找一个东西,他这有没有。
04:03
Babo RC啊,我先打到这啊,我先打到这,待会咱们要用到啊,这个是babo的官网,来来到我们的教程里面。我们首先先去创建一个pack Jason其实你应该能意识到,一旦说创建pack杰son,意味着你马上要去下载包。对不对,因为这个里面是不是要读那些依赖啊,好,那我们先收一下来,在这ES6下面,这不是空的吗?先进来一个。Pack杰森。我上午说那个问题,大家有没有去注意呢?用NPM去生成的时候,你们应该是大象线没有给你们转。对不对,好,那在这那来一个对象,这来个内,那这一把呢,我们叫他ES6,然后在这哎BA杠。就写个证明。
05:00
还有,有的同学要注意啊,在这起的名字千万不要是人家gethab上面这些常用包的名字。再有你比如说我马上是不是要下载个包,然后你这正好起个包,你会发现你下载的时候死活下载不下来。你的报名和人家你要下载的报名是有冲突的。不要用人家已有的报名。好,那这个时候呢,再来个1.0.0。做完这些工作以后,我们接着往下看来我们需要去安装一些东西。先来看这个吧,下面哎,就放到这。上面这说的是要安排G16,安装G16呢,这个不用说了吧。帮助我们去编译打包处理那些括号语法的。好,先来看这个。C Li是什么东西呢?大以前以前见过没有?这个你们以后应该会开发的时候经常会看到它C呢,它是因为单词的缩写叫。
06:06
啊。Command com应该是。我看and啊,就是command command什么意思。Line interface,这是它的全称,叫command line interface叫命令行接口。哎,这cri的全称这个工具有什么用呢?我们一旦说下载下B报这个库以后,肯定对应的里面有B的命令。就像我们上午下载完browse,是不是自动多了browseify这个命令。你下载完B多了B的命令,但是在B这有一个特点,你得需要下载这个库去帮你往出调命令。否则的话,你使用不了double的命令。其实所有的这些库。也不能说绝对啊,大部分的库,它里边的命令都得放在B-C这分装好的。
07:08
现在bab是因为他没内置的,没有这个bab-C这个库,所以没有对应的命令。比如说我们的NPM,大家现在也知道我们装完node以后,里边是不是自带NPM。一旦你抓完,你咔咔拿NPM就能用了,为什么?我给大家看一个。我找到我的note安装目录。弄的弄的呢。那应该是在这个里边来找到node,这不是这吗。这个里面你看这是不是有个NPM吗?我进来进来看哪个里边。有没有看到这有个C,哎,为什么你下来就能用NPM的命令,看看这里边的这些命令,这就是我们平时去敲的命令。
08:00
那是因为我在安装NP的时候,它自动下载的NPM。NM里边已经把我所有的命令打包放在c Li里面,所以我们能往出调。说白了,现在搬到你这个库里面,是不是没有这这个文件啊,所以得我们单独去下。这第一个。第二个叫double杠,Pre杠,ES20151,看到这个,首先我们知道这个语法是不是ES6。那这个set它表示预设的意思。而当前这个库的作用。是将诶B里边将ES6转化为ES5的所有插件打包下载下来,就是相当于把当前要去干活的工具拿到手。为什么要单独下载它呢?这是因为BA这个库里面有很多的工具库。不止说我掰的作用不只是只能转换ES6为ES5。
09:01
我们接下来要说react react react react里面有一个语法叫GXX。这是RA的特点,RA有个概念叫虚拟盗对象,创建虚拟对象就用了这个语法,说的多了也没用。你现在就知道RA有个语法叫GSX,它和普通的GS不一样。但是我编写的时候就是在GS里面直接去写。那这个时候G不认识这种语法,到时候我们也得需要BA去帮我们转这个语法为。GS。GS啊,这又是一个工具库。但是呢,在咱们当前的需求上,我们根本不需要这个库。所以呢,你现在单独的下载下来,能够去将ES6转化为ES5的库就够了,也就是说这个家伙。接下来看我们需要做哪些操作。你得去npm store全局下载,哎,这个其实我们已经下载过了,上午。
10:05
注意,Double CR你也得全局安装,这个为什么要全局安装呢?它是bab的一个命令,以后你在任何地方去用Bible的话,这个是不是已经安装好了,不需要再次安装了。再看下面这个,需要我们在当前的项目里面去装这个,哎,工具插件杠杠C-DV表示这个插件是干嘛的。什么时候用?你看到第一位了,第一位是Di就开发的意思。去开发依赖的包来,我呢,把这个拖过来,把前面这个先关了,整理一下,让他去装的。嗯。这是不是下载下来了,下载下来以后我们还要去设置一个配置文件。
11:06
这个配置文件注意了,是这样的。就叫点BRC。我先去创建一个,记住了在哪,放在你的根目录下面,和package在同一个目录下。前面这个点一定不要忘了啊,一定不要忘了,咔一进来首先这个文件你看一下这标识,它也是一个接字的文件。我先讲一个大家容易犯的错误,你再去配置这个文件的时候,不要去画蛇添足,后边加一个点尖。我拍点杰森,是不是自己要舍得写这点杰森啊,这个如果写了反而失效了。就写了点BARC配置的东西呢,就是这个东西,这是固定的。我先给大家说一下为什么要配置它。S你看后边是一个数组吧,数组里边我放了一个叫ES205的东西。担保的工作原理是它的插件,去干活之前,我会先读这个配置文件。
12:03
读这个配置文件干嘛呢?只有读了这,我才知道你让我去干什么。一旦说我看到后边对应的数组里边放的是ES2015,那我就知道,哦,我是要去转换ES6语法。你现在还只是一个他,哎,随着我们学习的深入,后边还有可能放什么,再放里边放个right。这为什么飘红?是因为这不是杰森数据吗?我刚刚不是用了个单引行吗?现在是不是好了,他一看到有RA,他就知道他要转换是一,呃,转换的是RA里面的GSX,语法能懂不?你不设置这个他干不了活,说白了这是一个什么?哎,军令就好像他在这边去领命令。好,现在我们用不上就放一,它为什么是数组呢?是因为我里面可以放放置什么多个。峰值都够,而我刚刚在官方文档上,其实我们是不是也看到这个了,点BRC。
13:05
那就是看咱们教程的在这,嗯。这个RC啊,Bible大家能理解,那我们来说一下这个RC,注意了这个点BRC也是RC文件,你们以后也能看到。什么叫RC呢?它也是单词的缩写,叫run。Control run表示是运行的意思,Control是控制你看到RC的文件,预示着它是一个运行时控制文件。就是我在运行的时候需要读的文件。运行控制文件。好,接下来我们去创建一下我们的文件目录。这一把是这样写的,在这儿去创建一个哎,叫GS文件,那么在这个下面呢,我去先来一个SC。对,SRCRC里面放的是原文件。好在这个src下边我去整一个它。
14:01
来,走你。那么我再复制一份,再来一个,嗯,这一把呢,我就把这个一给它换成二,然后再复制一份走你。写放在这儿。现在我这是不是有三个模块,那接下来我再去做一个事情看着啊,我在这来个命点GS,那这个模块我最终要干嘛。对,这叫主文件,又叫主模块,好,接下来呢,我们开始编写一下。刚刚我们说了,哎,它引入模块和暴露模块特别简单,一个是export,一个是import吧,现在我们先来一种暴露模块。暴露模块呢,我我给它起个名字,第一种方式叫分别暴露。分别暴露,首先它的语法是export,后面紧跟着的就是你想要暴露的数据,写什么都行,比如我咔暴露方式,起个名字来O。
15:00
这就相当于暴露一个函数了,然后我去conso log fo调用,哎,再来个MO1。接下来呢,我还能继续暴露,我再来个方式来,来一个什么八。那在这我去cons这个,哎,Bar调用,然后也是MODU1的。这就是为什么是分别暴露我这是不是用xbo咔咔连着暴露两个,你呢?还可以,还能继续暴露xbo,比如说你还能暴露什么,Let一个A。我这是不是相当于定了个变量,最终定义了一个数组,将数组暴露出去啊?好,这呢是分别暴露,然后我们再来到MODU2,还有一种,我叫他什么统一暴露。统一暴露的意思是上来你先咔咔,你自己整理自己的conso log fun调用这一把的什么二,这没问题吧,接下来我再去写一个方式,来个f u conso log u调用,然后呢,来一个MODU2。
16:11
现在数据是不是还没有暴露呢?接下来看着啊,在这我去暴露它export。小统一暴露的意思就是把数据打包到一个对象里面。我不知道这样写大家能不能看到。就现在用用法都是ES6,肯定是对象,要解对象的简写方式吧。懂我的意思吗?哎,懂我这就不列了啊,这是暴露对象里边有两个函数。好,那统一暴露我们也写完了,分别暴露我们也写完了,先不要管MO3,我们来到哎,我们的主文件,那么在这儿我们去写一下,在这儿呢,我们是需要引入哎其他的。模块吧,引入的方式,我先给大家说一下它这种语法。
17:00
好,它叫Emma pot pot,然后叉叉叉,然后呢,From,哎,后边。比如说是路径。能看懂吗?A po表示要引入这个呢,就相当于我们在require的时候,前面是不是let一个MODEL1等于require什么定义个变量接收你引入的值。From是告诉你来自于哪,你从哪引,后边放的是路径。应该好理解,来,我们去引入一个试试。Port,比如说我现在不知道我引入的是什么,我强调一次,我不知道他引入什么,那我是不是应该选。嗯。From,然后这传一路径啊,当前路径下的往定一没问题吧。再来一炮。二诶,大家看刚才没改的话,它这是不是背景变黄了,那是因为相当于你apo,这是不是相当于定义有个变量,这两个是不是重复定义了,好。
18:07
来个二,这来个二。直接引入了。现在引入了以后,这是灰色,那是因为你引入的东西没有使用,它就是灰色,如果使用了它就高亮了,我不知道它是啥,那么我们是不是能用万能的去给它打印下,看一下它。你看当我一打印这个是不是高亮显示了。好了,做到这一步以后。我们这代码就先写到这儿,但是呢,你想现在你如果说拿浏览器直接去跑,你比如说我去GS下面src下面找这个命点。GS,你说他能跑吗?不能跑。Unexpected token不是被期望的token这个东西是一个代表,是标识,类似于我们的什么ID。
19:02
不是被7万的表是谁啊?Import它是不是不认识,那这个时候需要我们怎么办呢?你是不是得先将ES6的语法转化为ES5?用到的工具,我们刚刚是不是也下了。叫bab往下来看,命令呢,给大家列在这个下面。在这儿。首先你多了一个BB的命令,这就不用解释了,中间这是一个杠D,你其实你发现跟包法那种形式是一样的。能懂不杠D的左边。是什么意思呢?你看啊,这一次有个特点,他是找谁GS。Src也说他并没有什么指定某一个文件,而是找它下边所有的,因为你所有的文件是不是都用的ES6的语法。那么咔咔都给你转换成什么E的。
20:02
然后这一侧我是不是指定的是输出的文件以及。目录呀。能懂吧,那我们自己也可以在这写一下,首先多了一个大的命令吧,你先去找原文件GS。GS下面的src下面就够了,你不加这个也行,中间是个杠D。这个杠地呢,我还专门查了一下,没有查到他的意思。就是我想给大家解释一下这个D是什么意思啊,我刚开始以为是憋。好像不是转换,好像也不是输出,更不是,那就是杠地。对吧,来我们知道要加这个东西,那么杠D的右边你加一个空格,它这个文件名,大家说我必须写这个吗。你是不是写什么都可以?好,先来一个build。走,你。
21:01
还记不记得我上午讲方案的时候,我说他比较老实,干完活不去说。它光标是不是自动停到那个原有的文件路径上了,而你看这个家伙double。他都告诉你了,我先找到的是GSS下面的谁,然后接头意思说我给你转换到哪。没问题吧?注意了,转换完的文件名我是不是没变?而且大家要注意,刚刚我有去创建这个必要的文件夹吗?他是不是自自己给我们生成一个呀?啊,下面这些就不解释了,那我们进来看一眼就看他吧,走你。一看到这些,就是我们熟悉的东西了。这是不是ES5的,但是我刚才说了,它转换完里边是不是包含一块二语法。如果说你就按现在的,哎,你去找什么,这应该是找。Bill的下边的我们是不是找面积S,那这个时候你去刷新一下走你对吧,发现他又说require not。
22:08
刘远以前是不是不认识他了?接下来我们又要请谁出马?就是那个不,Sorry five。B,哎,这不是这个命令吗?看我应该是找出去啊。它也是分为三部分,中间不是杠O吗?高了左边是不是找你的原文件GS下边B的下边命点GS,注意它这个是不是找到对应的文件啊,然后中间是不是杠右侧呢,就是你指定一个输出的文件。目录对不对啊,那我就给它放到这儿也行吧,好GS下跌,哎,那这样吧,我再来,我比如说我再换一个文件夹,就地速下降也可以吧。啊,这把呢,我还能给他换一下名字。
23:00
啊,比如说叫P点减走,你你会看到这有个错误,他说哎,你们说吧。这个哪哪边有错吗。有同学一看到这儿就不知道怎么去分析。哪错了?认识这个error后边的东西吧,No search file or directory,没有找到文件。或者是文件夹。刚刚我们用BA的时候,我没有创建be文件夹,它是不是自动帮我创建了一个,我故意换了一个Dis的文件,那你Dis文件现在是不是没有browse sorry,没有这种智能,它只能是在你的文件下去生成文件,而没有自动创建文件夹的功能。所以这个时候我得干嘛?是不是先整个D的文件,那这个时候来再跑一遍走你。这是不是就好了,好了以后点击一下,那这个东西是不是就是最终我们要用的。
24:06
好来,那这一把我的浏览器这一块,诶也不用它,我们应该是到第一次下接走发GS。没问题吧,再跑一遍。走,你。没问题。首先我们看到是不我报错了,但是这两个东西你会看到是两个,这是哪来的。哪来的呢,我刚刚在我的这东西太多了。这不是咱们的主农户吗?我是不是故意咳嗽落的他?刚才说了,我不知道他是什么。所以我第一个变量先来用一下,看一下,你看到是find,现在给大家讲一个事情。根据我们之前的这种思维,我是不是就相当于是引入一个模块,我定一个变量,一基数就拉倒了。但是在这儿你得这么写。看到我先选了个对象。
25:01
我得看一下一里面fo看着我怎么写。然后毛九二我也不能用。因为它是安的,肯定不能用了,你看一下么啊,这里边一个叫fun,一个叫。FUR。我先来给大家说一下,为什么我刚刚会这样写。我们之前这一波打印出来是不是安顿饭的。在ES6的这种模块化规范里边,如果说你用分别暴露这种方式,或者说是用统一暴露这种方式,它都有一个特点,要求你在引入的时候必须用对象解构赋值的形式。我这其实是用的对象的解构赋值,我为什么说我要看一下里边,它这个里边是不是有两个方程。那这里面是不是一个fu,一个FU2。
26:00
现在哎,它那种暴露方式,一个叫分别暴露,一个叫统一暴露,其实我叫他什么常规暴露。常规暴露它有个特点,你这样暴露的时候,相当于你你整体是一个什么,呃,我撤销一下啊。整体是一个容器对象,这个容器对象里面,比如说我当前有fo有八。当别人a pod想要引入的时候,哎,我在这边定义了个对象,他只是啊,打开你这道门,他并不能直接说我要接收你,里面所有东西你都得给我,你只能是什么,打开门,伸你手,一个一个去往出捞。结构复制嘛。能懂不?那在这边相当于不还是整体是export这个对象吗?指向呢?这是它里面所有的数据。能理解不?
27:02
没理解是吧。来,咱来看。首先大家刚刚看到了,我如果说直接定一个变量接收,拿到什么安顿饭的,这是人家在这设计的。你不能直接定一个变量去接收我引入的模块对象。因为我这个模块对象里面是不是有很多数据啊。我们现在还是解答你开发的,真实的开发当中,下面肯定有很多数据。这个时候你想要拿我模块对象里面的数据的时候。你得以对象解构赋值的形式去拿,说白了,我这边是一个对象容器,哎,你这边想要什么,是不是点名道姓的问我去要?理解不了。应该是能理解吧,那我问一下,如果说我这放个叉叉叉,我拿到值是什么。是因为相当于他还是问对象点属性什么,要这个属性没有啊那行。
28:03
知道了这些以后,那这样一旦引入进来,哎,颜色变暗是因为还没用呢,我是不是相当于在当前的作用下定义了这些变量。那你现在再来想一个事情,我为什么刚刚这故意和他两个不一样呢?如果说我这定义成fo行吗?就是说我在MO2这写的时候,我定义成fo行吗?行不行?或者说无所谓。行不行,你得看什么,咱们在apod这定义的,相当于是在当前的作用什么声明变量,那如果说我在这也写一个fo的话,那有一个问题。相当于是命名冲突了,我去失眠了两次,什么fo。哎,这个大家以后开发的时候要注意,那你说我现在是不是能去直接调用这些方法。FO8F,还有一个FUN2来,好,我们现在来调用这些方法了,现在问大家一个问题,如果说我现在刷新浏览器,咱们能不能看到我刚刚这个四个方法调用输出的内容。
29:13
考虑一下。我现在是要把以前写的改了。能不能看到呢?我的意思是我刷新的时候能不能看到。为什么看不到?其实我可以给你刷一下,肯定看不到。那这个时候我们来分享我现在我当前的页面引入的Q文件是哪个。你用的GS文件是BGS吧,你BGS是不是在你做这些操作之前已经是打包好的。没问题吧?这是不是我刚刚打包好的,你打包完了又去进行后续的操作,请问这个文件有变化吗?没有变化,想要再看到我们最新的解释,应该怎么办?
30:02
重新走一遍刚才的流程。第一步,你得先干嘛,将ES6转化为ES5。转完了以前的不用删啊,不用删是因为我在生成新的,把以前的干嘛了,覆盖了,转换完了接下来。再去重新打包变异。然后我们来刷新一下,是不是就出来了。这就是ES6的东西,这这点东西,ES6这个挺简单的啊,哎,使用起来特别方便。那到到这儿大家能不能听懂。行,那我停一下。
我来说两句