43-尚硅谷-尚医通-前端知识点-babel转码器

各位，我们继续来学习前端的基础知识，刚才呢，我们讲到了ES6的模块化，通过一个JS能去调用另外一个JS中的方法，但是我们刚才在测试中出现了一个错误，这里边我也解释到了，因为在node j环境中无法直接去运行ES6的模块化代码，咱需要给它转成ES5才可以执行，那我们下面就来把它做个转换。那怎么转换呢？咱需要用到一个工具，这个工具叫这个B。就是一个转码器。而这个转码器，它可以做件事情，就是把这个ES6的代码转成ES5的代码。所以咱们现在就来说这个东西。那这转码器该怎么去用，咱们来看一下啊，看到的课件中，首先第一步咱需要在我们这个环境中先装一个B布这么一个工具，那怎么装，这咱们刚才说到过啊，就是你可以用那个局半装或者选半装，因为咱们后面可能都要用到最以后就装一个选安装用个NPM，因此呢杠g buble s外，然后装完之后用bubble杠杠version能查看是否安装成功。

这就是里边的第一步。给各位写一下，首先第一步咱们先安装这个背的一个工具。给他做一个操作，那我现在给他就装一下。在这里边呢，比如我们现在啊，咱先这么来做啊，我在这里边，比如说我直接啊，咱重新打一个新的终端。然后在这个终端里边，我们用刚才咱们说那命令。N PM in的杠D加上里面这个工具叫做bubble s是一个bubble的这么一个工具。把它拿过来，咱回车。现在他就会联网进行下载，然后进行这么一个安装。

那我们来看它安装的这么一个过程啊，看它是否安装成功，安装成功之后，咱们用这个B杠杠version就可以看到。那咱们看啊，这里边我们执行之后发现好像没有成功，然后咱们看我是哪里写错了啊，我先来一个CS再看里边。N PM in斗，呃，这单词拼错了，是不是叫in斗？Int，然后加上这个杠d BA c me回车，现在应该就正确了，它会联网把这个转码工具下载下来，咱们等它联网再来完成，完成之后用命令杠杠version来查看一下，看它是否安装成功啊，那我们稍微等待一下，等他先安装成功。咱们等一会儿。啊，各位看啊，目前已经装成功了，然后咱们用命令这个背包。杠杠。

Version回车，大家看里边有没有版本的显示，如果有的话，证明就安装成功了，所以呢，目前把这个转码工具就安上了，这就是我们的第一步，用命令，我们先进行这么一个安装，这各位给他应该能够快速做到，就是我们的这个命令。给各位截到我这张图上。然后这步做到之后，咱们下面继续往下进行，咱们看下面应该干什么，现在已经做完了，然后下面呢，我这项目也做初始化，而下一步的就是咱需要在项目中呢，配置一个背部的这么一个配置文件，设置你的转码规则，而这个文件放到咱的根目录下那做配置，首先第一个这个文件名字是固定的，它叫什么？叫做点table RC，注意啊，别写错。它叫点背RC是这个名字，那我现在就做一下，我就在我这个根目录下，比如我这个下边建这么一个文件。

那来创建叫点BRC，然后在这个文件中写上咱们的这个规则，就设置我们转成是ES2015，把这段话给他就直接分过来。这样的话，咱们把这个就完成了，然后我在我的课件中给各位写一下第一步安装，然后第二步咱做法就是。第二步来编写这个配置文件，然后配置文件的名字是固定的，叫点BRC。放到我们的根目录下，然后在里边呢，有它这么一段内容，就是转成ES2015这个代码，这就是咱们的第二步操作，所以咱们现在把这个就完成了，然后完成之后我们再进入到第三步，第三步呢就来安装这个转码器，因为咱们要转成叫2015，所以把转码器需要做一个安装，用n PM in把这里头装上就可以了。

那我现在来说一下第三步。咱们就是安装这个ES2015的。转码器，那我给它叫装一下啊，N PM install BA present es2015，然后把这代码我在这里边，咱给它叫执行下。出来执行，然后咱们回车等他联网去下载咱们这个转码器。我把这个给各位截过来，就用它做一个安装就可以了。这是我们的第三步，然后咱们看啊，现在我已经执行了，应该马上能安装出来，大家看目前已经成功了，成功之后，因为我这个杠D就这个大写地是一个局板桩，所以在里面生成一个目录叫node models，是不是有这个转化工具2015，所以这是第三步，然后这步做到之后，下面我们进入到第四步，比如我们的最后一步，咱用个命令叫这个背。

然后进行一个转换，怎么转换呢？因为我现在ES6的代码是不是在S2C下呀，咱可以把这个目录下的所有文件都转成ES5的代码，那怎么转，比如我现在我在里边呢，我先建个文件夹，我随便起个名字叫这个。第然后我现在把src中那种转成ES5，放到第四个中去，这是我们的一个操作，也就是里边的第四步，我写一下。我们使用命令进行。这么一个转板。然后转码命令，就刚才咱们看到的BSRC，杠D加上你转到那个目录，这样的话就可以了，那我现在把它执行一下这个BSRC，然后里面加一个杠D加上这个。第考现在咱们就回车，然后大家看提示我们就成功了，就是没有错误提示啊，就是成功了，然后把这个给各位截出来，咱们来看一下最终的效果什么样的，因为目前这个转码应该是已经完成了。

然后咱们看啊，目前在我这里边的Dis里面是不是有两文边，咱们看两文件啊，大家看啊，之前我们一六的写法中是写这个isportportt里边用import from，然后把它转成了ES5，之后咱先看零一里面。是不是这个结构教育的PT depot跟它类似，然后看零二里，你看啊，跟刚才就不太一样了，但大家看这行。是不是叫块，所以说在S5里边是用块，引入其他文件，E6中是用port，但是他们的效果都类似，都是一样的，只是说我们换成了ES5的写法，这样的话咱就完成了这么一个转码。这么一个操作，然后转码之后，咱们下面把这个代码，我们最终再做执行，咱们看我们这个模块化可不可以，因为我现在零二里边要去调零一中的list方法，还有零一里边的C方法，刚才是因为那个node环境不能执行，咱现在都改成了ES5之后咱再预警下。

no02.gs然后咱们回车大家看。两个值是不是输出了，证明咱们在零二中就调到了零一中的方法，并且把这内容也做了输出，所以这样的话，咱们现在就完成了这么一个操作，就是关于这个ES6的模块化，包括这个背的这么一个使用，给各位给他要牢牢记住。这咱们就完成了啊，然后完成之后呢，在我课件中还写到E6中还有一种写法跟刚才其实差不多，咱就看一下啊，首先你看啊，我刚才写法的时候，把两个方法是不是写到一起啊，都是is po de破中，另外你可以分别写is po的方isport function，然后在你引入的时候，刚才咱是写个user这么一个对象名字，现在你可以在里面加个大括号，把你调的两个方号名字写进来。

都是可以的，就是不同的写法，但是效果都是一样的，所以咱们现在就完成了ES6的模块化，包括背的转码工具的使用，这个咱们就演示完成了。