38.前端技术-模块化开发（es6写法）原创

下面呢，我们来演示啊，ES6的模块化的写法，ES6的写法BS5要稍微简化一点，那我们看一下怎么来做，我们直接通过例子给各位同学做个演示。ES6的写法呢，有两种方式，咱们都做一下，那我首先我这么来做，我在里边呢，先建一个文件夹，我就叫ES6。这个杠幺啊，为了咱们操作方便，我叫这个目录。然后在ES6-幺里边。我这位置还是建两个JS文件，一个011个零二啊，咱为了区分啊，我就001. JS002.js，为了跟之前区分一下。02J，然后写完之后我这么来做，在001里边咱们定义两方法。002里边做调用，那我们看怎么做啊，在ES6中跟ES5就不太一样了，它的做法就是你可以直接加上一个叫。

加上方，再加上方法名字，比如说我加上一个A。然后A的里边呢，我就做一个输出console.log a，这是第一个方法，然后你看方法前面是不是加个表示，方法可以被别调用，如果你不加is po就是私有的，别J词调不到，这是一个写法，那比如说我可以再加个方法。这个方法我就叫这个update。然后里边输出update，这是我们写的两方法，并且设置方法可以被别的这些调用，用is po设置，不加is不能调用，这个就完成了，所以你发现啊，和刚才ES5的写法是不是要简单很多啊，并且这关键字也更好写，就加个isport。然后洗完之后在002中调用，怎么调用，第一步你先引入。

那注意这个引入啊，注意怎么写，刚才是块的，在E中用一个叫。Iport加上大括号，大括号中加上呢，你调的方法名字咱是两个A的和update，那我里边写一下A的逗号。再加上一个from，后面加上你的JS文件路径，我们加个点杠，001.js。现在完成引入，注意啊，这种写法各位看起来是不是更加奇怪？Import from，这是你的调用的方法名称，这是引入到文件路径，同样点杠不能省略，然后写完之后，下面咱就可以调用方法，因为它的方法就是两个，一个是A的，一个是update，现在就完成了，这就是ES6的写法，大家看到是不是这个写法更加的简单，更加方便。

这个咱就完成了，然后完成之后我们来做个测试，看一下效果怎么样啊，注意啊，我们测试在这个文件夹中用终端打开，然后用node002.gs回车。大家看啊，目前出了问题，你看什么问题啊，他报了错挨着有问题了。那我强调问题是什么啊，就是我刚才提到的这句话。ES6的模块化在noe中没法直接运行，就是它不支持这种写法，它只支持ES5的写法，所以咱需要把它转成ES5进行执行啊，这是一个特点，你看这里边标注这个这个符号，他告诉你啊，这句话什么样，他不认识，不知道这是什么，所以它不识别这种写法，咱需要转换才可以，所以下面呢，咱把它最后转换。转换呢，在前端中有工具叫这个背，或者可以读成B都可以啊，所以用它咱们快速转下就可以了，这个过程不需要个位记，大家了解可以了，只要你掌握这个编写的一个过程，因为咱后面会用一个前端框架，这转的过程会帮我们实现，咱通过它只是为了做一个基本的测试。

所以下面咱通过八做个转码啊，那我说一下怎么做啊，首先第一步看我这个写法。咱都说过啊，N PM install现在依赖我可以做一个全局安装，你把这句话直接复制，你先做安装。啊，那我终端打开，咱先安装一下。这个啊。直接杠杠global BB把这个安装上就是客户端。这个啊，决议的网速。然后安装之后呢，看一下它的版本，用bubble杠杠version，如果有版本号，那它就是安装成功了，我们等他完成，然后咱看一下。这里边是不是出来了，这就可以了，安装之后我们的下一步操作，咱们在这里边呢，加上一个配置文件，在项目的跟路径下，注意啊，配置文件名字，这个名字叫点BURC，名字是固定的，不能写错，那我现在创建下，在根路径下建这个文件。

RC里边加上这个内容，因为咱要转成S5，所以加上一个ES2015这个配置文件，这个完成完成之后，下面咱们安装一个转码器，就是2015的转码器，这个我用的是局部安装，就是当前的项目能用就可以了，然后咱们会撤。这个过程呢，各位自己练习的时候，通过我的课件把这复制效果做到可以了，重点把那个模画的代码给他要掌握，然后写完之后，最后咱做个转码啊，那我说下怎么做啊。首先呢，在里边我这么做，我先建一个新的文件夹。这个文件夹起个名字，我就叫这个，呃，就是B618，就在这里边做个转码，然后咱们把E6-一中的代码转成ES5，放到BES6。

杠一里面去，那说一下怎么做啊这个过程。咱们先进入到它那个上层目录，就是它的根路径下。注意目录别选错啊。然后用命令。这命令叫做。Bubble或者叫bbo，然后bubble后面的加上你那个文件夹，我们是ES6-幺，加上参数杠D，再加上BES6。杠幺，这是一个命令，那什么意思呢？它就表示啊，把你这个目录中的那种转成ES5，然后放到这个目录中去，就来做这个事情，那现在我推车。咱们看最终结果大家看啊，提示我们转码了，然后咱们到这里面看一下，多了两个文件。

这两文件咱看它最终转成效果啊。先看001里边。你看里边啊，有1POD对外可以访问，再看002里边是不是多了一个块的表示引入，就转成了ES5，然后最终我们在这个BS6-一里边再做一个最终测试啊，他要做个转码。NO002点G4。大家看两个内容是不是输出了，所以现在咱把这个就完成了啊，这是我们演示的ES6的第一种写法，只是它需要做一个转码。我再重复一遍啊，它的做法就是先定义加iport，然后引入用import，最终调用，调用之后报错，咱需要把这两端代码转成ES5进行执行，这刚才我也做了一个转码，用B进行了转换。所以这个就是ES6的第一种写法，我们就点到这里啊，就是各位啊，重点掌握模块化的编写发布过程，从里面复制能看到效果可以了，这个就说到这里。

然后这个之后呢，ES6还有另外一种写法，我也做个演示，就另一种写法啊，咱也演示一下啊，因为这个比较简单了，就快速试一下啊，首先我建个文件夹叫ES6-二。里边两个文件，比如说一个文件我叫呃1.js，就为了区分一下啊，第二个文件我叫2.js。然后写完之后在一点摘中咱们定义方法，注意它的写法比刚才跟刚才相比又简化一点，你加一个叫。一炮defat。大括号里边加上方法名字，比如说我加一个方法，咱就叫这个，呃，List方法就加这个啊，然后里边做个输出console.log。

我可以再来个方法，在这方法后面加个逗号，这方法我叫C，然后咱们比如说也做个输出，输出的内容就叫这个。我就以两个为例啊，当然你可以写更多。所以大家看啊，这就完成了，定义两个方法加上port default表示方法可以背被在这调用啊，咱放在那个一的宅子里边啊，放到这里边。在完成，然后二里用怎么用呢？同样给它加个名字，比如user。加上你的路径就是点杠1.s。然后最后通过user调用user.list方法，user.se方法现在就完成了，比刚才简化很多，因为你看刚才啊，我引入的时候是不加方法名字，这里边我直接起个user名字，通过user点进行调。

所以现在这就完成了，完成之后同样这也不能用，咱也需要做个转码，那我最后把这个咱给他也是转一下。我先进入到上层目录中，用这个叫。八宝。ES6。杠二-D。然后里边呢，我也建个新的文件夹，我叫B-二。给他转到这里面去啊，那我写一下啊BES6-二回车。然后大家看啊，里边多了咱们两文件，就是一和二，JS文件也转成了ES5，最终我们做一个测试，看最后结果啊。NOE2点G4。List save是不是都输出了？所以以上是咱们完成的这么一个演示，这咱就做到了，分别是ES5的模块化的写法，包括ES6的两种写法，这三种写法各位同学都要掌握，特别注意啊，ES6在测试时候需要用B转成ES5才能用，因为noe中本身不支持ES6的模块化。

你需要转才可以这个啊，那就完成了，所以以上是咱说的模化的操作。模块化开发，不管是前端也好，后端也好，在咱们开发中都会用到，因为这么写的话，让你的项目的层次更加清晰，结构更加分明，更利于代码的维护，所以这个我们就学到这里。