09. 尚硅谷_JS模块化规范_ES6规范_基本使用.avi原创

好，咱们开始上课，那这节课呢，咱们来看，哎，模块化规范的第四种叫ES6，那讲之前呢，我先说一下，其实ES6这种模块化规范很重要啊，现在的应用最广泛的就是它。啊，因为ES本身就比较火，而且你有没有觉得其实上边这个CD和AMD其实挺烦的，相对来说。他要比common GS要烦得多。啊，为什么要先讲这两个，讲完这两个再讲ES6，哎，你会感觉。为什么？ES6为什么会来？我们先来看一下它的说明，在这儿啊。首先ES6这种模块规范，它也需要依赖的模块，需要编译打包处理。上来就说这句话，第一个ES6里边。它的语法现在还有浏览器不支持，那这个时候我们通常用ES6开发完，肯定要将ES6的语法。通过工具去转化为ES5，这样的话浏览器引擎才能识别。

第二点，当你将ES6通过工具去转化为ES5的时候，它里边自带了一些也称使用括号语法。那这个时候浏览器已经又不认识。而去打包编译块这种语法呢？我们需要依赖于上午我们用到的工具，叫ify。哎，Sorryify，我们先来看一下它的语法。就这么点儿。你看这个语法就这么点，你看看这个。哎，CMD语法没有对比就没有伤害啊，好在我们ES6里边导出模块用export。大家看我上午在敲代码的时候，有时候敲一个一，哎，我一回车是不是少个S啊，那就是因为它这个语法叫export，哎如何引入模块呢，Port。就这么点儿东西。

那我们来看一下它如何实现呢？在浏览器端。首先你要注意，我刚刚说了，要使用一个工具去转换为ES6，为ES5用到的这个工具叫B，哎BA呢有他自己的官网，我们可以去访问一下。这不是白报吗？这呢就是诶double的一个官网，它现在这还换了一下啊，换了一下好，它BA其实有很多作用，大家看这还列出来让你去学什么。E6是不是也有一些学习文档，哎，重点是我们要看一下，我我点一下这个试用，我看一下，哎，他这个改版了啊。在这跑不了，哎，他以前在这叫一个什么叫在线在线实验啊，现在叫试用，我先来带大家看一个东西。现在这儿有一个分水岭。你其实你看这你能猜出右边要写什么。

严格模式，也就说又严格模式是不是ES5里面的东西啊，右侧是ES5，它这叫在线实验室，什么意思呢？我在左侧去写ES6代码，Message等于啊。Hello。看这边。他在线也是指意思，也是它的工作原理，你用上我这个，你写ES6的代码，我是不是自动帮你转换为ES5，是不是换成word了，呃，有意思，你比那个fun。看到这没有，是不是自动帮我们转换为ES5了，哎，知道了这个以后，呃，我看看它这个改版的啊。这个界面呢，倒是比以前要好看一点，界面呢，比以前好看一点。然后呢，这有个文档，文档这有个配置，呃，我来看一下这个配置。这是说的BA的一些配置C，其实在我的那个教程里面有啊，我是看给大家找一个东西，他这有没有。

Babo RC啊，我先打到这啊，我先打到这，待会咱们要用到啊，这个是babo的官网，来来到我们的教程里面。我们首先先去创建一个pack Jason其实你应该能意识到，一旦说创建pack杰son，意味着你马上要去下载包。对不对，因为这个里面是不是要读那些依赖啊，好，那我们先收一下来，在这ES6下面，这不是空的吗？先进来一个。Pack杰森。我上午说那个问题，大家有没有去注意呢？用NPM去生成的时候，你们应该是大象线没有给你们转。对不对，好，那在这那来一个对象，这来个内，那这一把呢，我们叫他ES6，然后在这哎BA杠。就写个证明。

还有，有的同学要注意啊，在这起的名字千万不要是人家gethab上面这些常用包的名字。再有你比如说我马上是不是要下载个包，然后你这正好起个包，你会发现你下载的时候死活下载不下来。你的报名和人家你要下载的报名是有冲突的。不要用人家已有的报名。好，那这个时候呢，再来个1.0.0。做完这些工作以后，我们接着往下看来我们需要去安装一些东西。先来看这个吧，下面哎，就放到这。上面这说的是要安排G16，安装G16呢，这个不用说了吧。帮助我们去编译打包处理那些括号语法的。好，先来看这个。C Li是什么东西呢？大以前以前见过没有？这个你们以后应该会开发的时候经常会看到它C呢，它是因为单词的缩写叫。

啊。Command com应该是。我看and啊，就是command command什么意思。Line interface，这是它的全称，叫command line interface叫命令行接口。哎，这cri的全称这个工具有什么用呢？我们一旦说下载下B报这个库以后，肯定对应的里面有B的命令。就像我们上午下载完browse，是不是自动多了browseify这个命令。你下载完B多了B的命令，但是在B这有一个特点，你得需要下载这个库去帮你往出调命令。否则的话，你使用不了double的命令。其实所有的这些库。也不能说绝对啊，大部分的库，它里边的命令都得放在B-C这分装好的。

现在bab是因为他没内置的，没有这个bab-C这个库，所以没有对应的命令。比如说我们的NPM，大家现在也知道我们装完node以后，里边是不是自带NPM。一旦你抓完，你咔咔拿NPM就能用了，为什么？我给大家看一个。我找到我的note安装目录。弄的弄的呢。那应该是在这个里边来找到node，这不是这吗。这个里面你看这是不是有个NPM吗？我进来进来看哪个里边。有没有看到这有个C，哎，为什么你下来就能用NPM的命令，看看这里边的这些命令，这就是我们平时去敲的命令。

那是因为我在安装NP的时候，它自动下载的NPM。NM里边已经把我所有的命令打包放在c Li里面，所以我们能往出调。说白了，现在搬到你这个库里面，是不是没有这这个文件啊，所以得我们单独去下。这第一个。第二个叫double杠，Pre杠，ES20151，看到这个，首先我们知道这个语法是不是ES6。那这个set它表示预设的意思。而当前这个库的作用。是将诶B里边将ES6转化为ES5的所有插件打包下载下来，就是相当于把当前要去干活的工具拿到手。为什么要单独下载它呢？这是因为BA这个库里面有很多的工具库。不止说我掰的作用不只是只能转换ES6为ES5。

我们接下来要说react react react react里面有一个语法叫GXX。这是RA的特点，RA有个概念叫虚拟盗对象，创建虚拟对象就用了这个语法，说的多了也没用。你现在就知道RA有个语法叫GSX，它和普通的GS不一样。但是我编写的时候就是在GS里面直接去写。那这个时候G不认识这种语法，到时候我们也得需要BA去帮我们转这个语法为。GS。GS啊，这又是一个工具库。但是呢，在咱们当前的需求上，我们根本不需要这个库。所以呢，你现在单独的下载下来，能够去将ES6转化为ES5的库就够了，也就是说这个家伙。接下来看我们需要做哪些操作。你得去npm store全局下载，哎，这个其实我们已经下载过了，上午。

注意，Double CR你也得全局安装，这个为什么要全局安装呢？它是bab的一个命令，以后你在任何地方去用Bible的话，这个是不是已经安装好了，不需要再次安装了。再看下面这个，需要我们在当前的项目里面去装这个，哎，工具插件杠杠C-DV表示这个插件是干嘛的。什么时候用？你看到第一位了，第一位是Di就开发的意思。去开发依赖的包来，我呢，把这个拖过来，把前面这个先关了，整理一下，让他去装的。嗯。这是不是下载下来了，下载下来以后我们还要去设置一个配置文件。

这个配置文件注意了，是这样的。就叫点BRC。我先去创建一个，记住了在哪，放在你的根目录下面，和package在同一个目录下。前面这个点一定不要忘了啊，一定不要忘了，咔一进来首先这个文件你看一下这标识，它也是一个接字的文件。我先讲一个大家容易犯的错误，你再去配置这个文件的时候，不要去画蛇添足，后边加一个点尖。我拍点杰森，是不是自己要舍得写这点杰森啊，这个如果写了反而失效了。就写了点BARC配置的东西呢，就是这个东西，这是固定的。我先给大家说一下为什么要配置它。S你看后边是一个数组吧，数组里边我放了一个叫ES205的东西。担保的工作原理是它的插件，去干活之前，我会先读这个配置文件。

读这个配置文件干嘛呢？只有读了这，我才知道你让我去干什么。一旦说我看到后边对应的数组里边放的是ES2015，那我就知道，哦，我是要去转换ES6语法。你现在还只是一个他，哎，随着我们学习的深入，后边还有可能放什么，再放里边放个right。这为什么飘红？是因为这不是杰森数据吗？我刚刚不是用了个单引行吗？现在是不是好了，他一看到有RA，他就知道他要转换是一，呃，转换的是RA里面的GSX，语法能懂不？你不设置这个他干不了活，说白了这是一个什么？哎，军令就好像他在这边去领命令。好，现在我们用不上就放一，它为什么是数组呢？是因为我里面可以放放置什么多个。峰值都够，而我刚刚在官方文档上，其实我们是不是也看到这个了，点BRC。

那就是看咱们教程的在这，嗯。这个RC啊，Bible大家能理解，那我们来说一下这个RC，注意了这个点BRC也是RC文件，你们以后也能看到。什么叫RC呢？它也是单词的缩写，叫run。Control run表示是运行的意思，Control是控制你看到RC的文件，预示着它是一个运行时控制文件。就是我在运行的时候需要读的文件。运行控制文件。好，接下来我们去创建一下我们的文件目录。这一把是这样写的，在这儿去创建一个哎，叫GS文件，那么在这个下面呢，我去先来一个SC。对，SRCRC里面放的是原文件。好在这个src下边我去整一个它。

来，走你。那么我再复制一份，再来一个，嗯，这一把呢，我就把这个一给它换成二，然后再复制一份走你。写放在这儿。现在我这是不是有三个模块，那接下来我再去做一个事情看着啊，我在这来个命点GS，那这个模块我最终要干嘛。对，这叫主文件，又叫主模块，好，接下来呢，我们开始编写一下。刚刚我们说了，哎，它引入模块和暴露模块特别简单，一个是export，一个是import吧，现在我们先来一种暴露模块。暴露模块呢，我我给它起个名字，第一种方式叫分别暴露。分别暴露，首先它的语法是export，后面紧跟着的就是你想要暴露的数据，写什么都行，比如我咔暴露方式，起个名字来O。

这就相当于暴露一个函数了，然后我去conso log fo调用，哎，再来个MO1。接下来呢，我还能继续暴露，我再来个方式来，来一个什么八。那在这我去cons这个，哎，Bar调用，然后也是MODU1的。这就是为什么是分别暴露我这是不是用xbo咔咔连着暴露两个，你呢？还可以，还能继续暴露xbo，比如说你还能暴露什么，Let一个A。我这是不是相当于定了个变量，最终定义了一个数组，将数组暴露出去啊？好，这呢是分别暴露，然后我们再来到MODU2，还有一种，我叫他什么统一暴露。统一暴露的意思是上来你先咔咔，你自己整理自己的conso log fun调用这一把的什么二，这没问题吧，接下来我再去写一个方式，来个f u conso log u调用，然后呢，来一个MODU2。

现在数据是不是还没有暴露呢？接下来看着啊，在这我去暴露它export。小统一暴露的意思就是把数据打包到一个对象里面。我不知道这样写大家能不能看到。就现在用用法都是ES6，肯定是对象，要解对象的简写方式吧。懂我的意思吗？哎，懂我这就不列了啊，这是暴露对象里边有两个函数。好，那统一暴露我们也写完了，分别暴露我们也写完了，先不要管MO3，我们来到哎，我们的主文件，那么在这儿我们去写一下，在这儿呢，我们是需要引入哎其他的。模块吧，引入的方式，我先给大家说一下它这种语法。

好，它叫Emma pot pot，然后叉叉叉，然后呢，From，哎，后边。比如说是路径。能看懂吗？A po表示要引入这个呢，就相当于我们在require的时候，前面是不是let一个MODEL1等于require什么定义个变量接收你引入的值。From是告诉你来自于哪，你从哪引，后边放的是路径。应该好理解，来，我们去引入一个试试。Port，比如说我现在不知道我引入的是什么，我强调一次，我不知道他引入什么，那我是不是应该选。嗯。From，然后这传一路径啊，当前路径下的往定一没问题吧。再来一炮。二诶，大家看刚才没改的话，它这是不是背景变黄了，那是因为相当于你apo，这是不是相当于定义有个变量，这两个是不是重复定义了，好。

来个二，这来个二。直接引入了。现在引入了以后，这是灰色，那是因为你引入的东西没有使用，它就是灰色，如果使用了它就高亮了，我不知道它是啥，那么我们是不是能用万能的去给它打印下，看一下它。你看当我一打印这个是不是高亮显示了。好了，做到这一步以后。我们这代码就先写到这儿，但是呢，你想现在你如果说拿浏览器直接去跑，你比如说我去GS下面src下面找这个命点。GS，你说他能跑吗？不能跑。Unexpected token不是被期望的token这个东西是一个代表，是标识，类似于我们的什么ID。

不是被7万的表是谁啊？Import它是不是不认识，那这个时候需要我们怎么办呢？你是不是得先将ES6的语法转化为ES5？用到的工具，我们刚刚是不是也下了。叫bab往下来看，命令呢，给大家列在这个下面。在这儿。首先你多了一个BB的命令，这就不用解释了，中间这是一个杠D，你其实你发现跟包法那种形式是一样的。能懂不杠D的左边。是什么意思呢？你看啊，这一次有个特点，他是找谁GS。Src也说他并没有什么指定某一个文件，而是找它下边所有的，因为你所有的文件是不是都用的ES6的语法。那么咔咔都给你转换成什么E的。

然后这一侧我是不是指定的是输出的文件以及。目录呀。能懂吧，那我们自己也可以在这写一下，首先多了一个大的命令吧，你先去找原文件GS。GS下面的src下面就够了，你不加这个也行，中间是个杠D。这个杠地呢，我还专门查了一下，没有查到他的意思。就是我想给大家解释一下这个D是什么意思啊，我刚开始以为是憋。好像不是转换，好像也不是输出，更不是，那就是杠地。对吧，来我们知道要加这个东西，那么杠D的右边你加一个空格，它这个文件名，大家说我必须写这个吗。你是不是写什么都可以？好，先来一个build。走，你。

还记不记得我上午讲方案的时候，我说他比较老实，干完活不去说。它光标是不是自动停到那个原有的文件路径上了，而你看这个家伙double。他都告诉你了，我先找到的是GSS下面的谁，然后接头意思说我给你转换到哪。没问题吧？注意了，转换完的文件名我是不是没变？而且大家要注意，刚刚我有去创建这个必要的文件夹吗？他是不是自自己给我们生成一个呀？啊，下面这些就不解释了，那我们进来看一眼就看他吧，走你。一看到这些，就是我们熟悉的东西了。这是不是ES5的，但是我刚才说了，它转换完里边是不是包含一块二语法。如果说你就按现在的，哎，你去找什么，这应该是找。Bill的下边的我们是不是找面积S，那这个时候你去刷新一下走你对吧，发现他又说require not。

刘远以前是不是不认识他了？接下来我们又要请谁出马？就是那个不，Sorry five。B，哎，这不是这个命令吗？看我应该是找出去啊。它也是分为三部分，中间不是杠O吗？高了左边是不是找你的原文件GS下边B的下边命点GS，注意它这个是不是找到对应的文件啊，然后中间是不是杠右侧呢，就是你指定一个输出的文件。目录对不对啊，那我就给它放到这儿也行吧，好GS下跌，哎，那这样吧，我再来，我比如说我再换一个文件夹，就地速下降也可以吧。啊，这把呢，我还能给他换一下名字。

啊，比如说叫P点减走，你你会看到这有个错误，他说哎，你们说吧。这个哪哪边有错吗。有同学一看到这儿就不知道怎么去分析。哪错了？认识这个error后边的东西吧，No search file or directory，没有找到文件。或者是文件夹。刚刚我们用BA的时候，我没有创建be文件夹，它是不是自动帮我创建了一个，我故意换了一个Dis的文件，那你Dis文件现在是不是没有browse sorry，没有这种智能，它只能是在你的文件下去生成文件，而没有自动创建文件夹的功能。所以这个时候我得干嘛？是不是先整个D的文件，那这个时候来再跑一遍走你。这是不是就好了，好了以后点击一下，那这个东西是不是就是最终我们要用的。

好来，那这一把我的浏览器这一块，诶也不用它，我们应该是到第一次下接走发GS。没问题吧，再跑一遍。走，你。没问题。首先我们看到是不我报错了，但是这两个东西你会看到是两个，这是哪来的。哪来的呢，我刚刚在我的这东西太多了。这不是咱们的主农户吗？我是不是故意咳嗽落的他？刚才说了，我不知道他是什么。所以我第一个变量先来用一下，看一下，你看到是find，现在给大家讲一个事情。根据我们之前的这种思维，我是不是就相当于是引入一个模块，我定一个变量，一基数就拉倒了。但是在这儿你得这么写。看到我先选了个对象。

我得看一下一里面fo看着我怎么写。然后毛九二我也不能用。因为它是安的，肯定不能用了，你看一下么啊，这里边一个叫fun，一个叫。FUR。我先来给大家说一下，为什么我刚刚会这样写。我们之前这一波打印出来是不是安顿饭的。在ES6的这种模块化规范里边，如果说你用分别暴露这种方式，或者说是用统一暴露这种方式，它都有一个特点，要求你在引入的时候必须用对象解构赋值的形式。我这其实是用的对象的解构赋值，我为什么说我要看一下里边，它这个里边是不是有两个方程。那这里面是不是一个fu，一个FU2。

现在哎，它那种暴露方式，一个叫分别暴露，一个叫统一暴露，其实我叫他什么常规暴露。常规暴露它有个特点，你这样暴露的时候，相当于你你整体是一个什么，呃，我撤销一下啊。整体是一个容器对象，这个容器对象里面，比如说我当前有fo有八。当别人a pod想要引入的时候，哎，我在这边定义了个对象，他只是啊，打开你这道门，他并不能直接说我要接收你，里面所有东西你都得给我，你只能是什么，打开门，伸你手，一个一个去往出捞。结构复制嘛。能懂不？那在这边相当于不还是整体是export这个对象吗？指向呢？这是它里面所有的数据。能理解不？

没理解是吧。来，咱来看。首先大家刚刚看到了，我如果说直接定一个变量接收，拿到什么安顿饭的，这是人家在这设计的。你不能直接定一个变量去接收我引入的模块对象。因为我这个模块对象里面是不是有很多数据啊。我们现在还是解答你开发的，真实的开发当中，下面肯定有很多数据。这个时候你想要拿我模块对象里面的数据的时候。你得以对象解构赋值的形式去拿，说白了，我这边是一个对象容器，哎，你这边想要什么，是不是点名道姓的问我去要？理解不了。应该是能理解吧，那我问一下，如果说我这放个叉叉叉，我拿到值是什么。是因为相当于他还是问对象点属性什么，要这个属性没有啊那行。

知道了这些以后，那这样一旦引入进来，哎，颜色变暗是因为还没用呢，我是不是相当于在当前的作用下定义了这些变量。那你现在再来想一个事情，我为什么刚刚这故意和他两个不一样呢？如果说我这定义成fo行吗？就是说我在MO2这写的时候，我定义成fo行吗？行不行？或者说无所谓。行不行，你得看什么，咱们在apod这定义的，相当于是在当前的作用什么声明变量，那如果说我在这也写一个fo的话，那有一个问题。相当于是命名冲突了，我去失眠了两次，什么fo。哎，这个大家以后开发的时候要注意，那你说我现在是不是能去直接调用这些方法。FO8F，还有一个FUN2来，好，我们现在来调用这些方法了，现在问大家一个问题，如果说我现在刷新浏览器，咱们能不能看到我刚刚这个四个方法调用输出的内容。

考虑一下。我现在是要把以前写的改了。能不能看到呢？我的意思是我刷新的时候能不能看到。为什么看不到？其实我可以给你刷一下，肯定看不到。那这个时候我们来分享我现在我当前的页面引入的Q文件是哪个。你用的GS文件是BGS吧，你BGS是不是在你做这些操作之前已经是打包好的。没问题吧？这是不是我刚刚打包好的，你打包完了又去进行后续的操作，请问这个文件有变化吗？没有变化，想要再看到我们最新的解释，应该怎么办？

重新走一遍刚才的流程。第一步，你得先干嘛，将ES6转化为ES5。转完了以前的不用删啊，不用删是因为我在生成新的，把以前的干嘛了，覆盖了，转换完了接下来。再去重新打包变异。然后我们来刷新一下，是不是就出来了。这就是ES6的东西，这这点东西，ES6这个挺简单的啊，哎，使用起来特别方便。那到到这儿大家能不能听懂。行，那我停一下。