day04【项目前端相关基础知识二】/08-尚硅谷-谷粒学院-前端技术-babel转码器

咱们啊，就看这个bubble，首先啊，我在里边还是画张图，咱来说一下第一个bubble到底是什么。刚才我们也介绍到了啊，我这里再描述一遍八宝它是一个什么叫做转码T，就是它可以把我们那个ES6的这个代码给他转换成这个ES5的这个代码，是一个转码器，那咱为什么要这么做呢？这在昨天给大家解释过啊，这里边我再说一遍啊，就是。因为我们现在写的代码基本上都是ES6的代码，但是这个E6的代码有一个问题，就是它这个浏览器的兼容性是比较差的，就是如果说你用低版浏览器，那很多它的代码是不认识的，但是如果说你使用啊，就是如果我们使用ES5的这个代码，它的浏览器的兼容性是很好的，所以咱们用它，但是因为ES6比较简洁，所以咱一般不写ES5，而我们在开发中，我们都是怎么做的呢？咱们就是编写。

ES6的代码，然后咱们把ES6的代码给的就是转换成ES5再去运行，咱们实际中一般都是这么做，编写ES6，然后转ES5，最终执行，啊这是我们说的这个B，就是一个转码器，做这个ES6转成ES5的这么一个功能。这各位知道啊，就是BB到底是干什么的？啊，咱们做了一个说明啊，这是第一个啊，然后这个说完之后，下面给大家就来演示一下，这八宝到底该怎么去用啊，咱来做一个演示，我这课件中每一步应该都写到了啊，那咱按照步骤我们一步步来做一下啊。首先我们要做的第一步操作，因为咱要用这个bubble呢，咱需要装上这么一个bubble的这么一个工具，用它来操作，然后安装就是这个命令啊，给大家我复制过来啊，这命令不需要你记，但你知道有这步骤。

我写一下啊，就是第一步咱需要安装这么一个B的这么一个工具，那我们就使用命令进行操作，然后它的命令就是这个命令。它叫n PM install加一个叫这个杠杠global b set外啊这杠杠global就是一个叫全局安装，就是你当前环境中都可以用啊，各位把这个不需要你记，你知道这是装这么一个工具的这么一个命令杠杠global全局安装，然后咱们把这命令我们可以给它装一下啊。那我们来在里边写一下啊，首先第一个为了明显啊，我在里边重新建个文件夹，我叫这个bubble。DEMO。然后创建之后，按照我们刚才说到的这个文件夹，先做一个项目初始化啊，咱们上一个刚讲过啊，咱用这个命令。

Npm initt-Y这步必须的啊，做个初始化里边有这文件，然后初始化之后，咱们用刚才那命令把这个装上，你回车它就会联网去下载这个BB这个工具啊，这一回车可以下载，我这工具应该提前装过了，我不在这里浪费这时间了啊，各位把这个一回车就可以了，然后咱看一下是否成功，用这个命令bubble杠杠version就可以了啊，那我直接就看一下了啊，因为这个我已经装过了，我们来一个。Bubble杠杠washship展一回车。在里边如果说有版本号，那就证明bubble安装成功了啊，这个有版本号就可以了，这是我们做的第一步安装一个BB的一个工具啊，这是必须的啊，然后做完工具之后，咱项目初始化，这我已经做到了啊，然后初始化之后我们可以写代码做一个转换啊，那我们写一下啊，咱看第二步操作。

角这位置啊。我们的第二步就是咱们创建一个JS文件，呃，换个颜色啊，创建一个JS文件，然后在文件中呢，咱们编写这么一段ES6的这么一个代码啊，这是我们的第二步操作，那里边我就来创建一下啊，咱们编个文件，编写一个ES6。那我现在在这个B里边，我先建个文件夹，为了方便，这个文件夹我就叫ES6，然后在ES6里边咱建一个JS文件，我就叫零一.js啊，这是一个文件，然后在里边呢，写这么一段就是ES6的代码，这一代码我从里边就直接复制了啊，咱就写这个代码啊，就这个代码。这是ES6代码，而ES6咱们怎么看到ES6呢？咱就看一个地方啊，大家看这里咱讲到的这是不是叫箭头函数啊，这就是研六一个标志性代码啊，这是它内置一个方法，这是一个箭头函数，所以咱一会儿就把这个代码转成E5啊，这是咱做的第二步。

写一段ES6代码啊，也就是在这里边我们建了这么一个文件。啊，把这张图给大家截过来。啊，就是他。然后这个代码啊，咱写的就是这么一段基本代码，而它的标志就是里边这个箭头函数，好这些结构图了。就是。这个啊，这是ES61个标志性的写法，箭头函数。这给大家啊记过来，这是我们说的第二步操作啊，然后这步操作之后，咱下面啊，进入到我们的第三步，就是开始做这个转换了，那我写到这个位置啊，就是第三步。第三步干什么呢？咱需要创建一个这么一个叫bubble的这么一个配置文件，把配置文件需要做创建，那怎么创建啊，不需要个位D，但是你知道这个步骤啊，就是咱们在这个就是项目这个叫根目录下，也就是说啊，在这个bubble DEMO下边，咱们建一个配置文件，这配置文件的名称是固定的，它叫这个名字。

就是点BRC这么一个文件。啊，那我们来创建啊，这里边这个文件叫点8RC啊注意啊，这名字不要写错，因为之前有些同学啊，在演的时候，他怎么创建呢，他叫这个名字。叫什么叫配置点852C，注意啊，这配置不是啊，它就叫点852C啊，我说这不是效果，有同学就犯过这个错误啊，点852C这个不要写错啊，然后创建之后在里边加内容，加内容是什么？注意啊，这是一个基础内容，咱需要加这个内容啊，加下面这个内容里边多了一个ES2015，你别加他这里少东西，把这加进去啊，就是把你的这个转成ES5的这种规则。

就加你的。转换的规则啊，ES2015，这是我们写的配置文件啊，也就是里边的。第三步。配置文件注意啊，名字是固定的，叫点BRC，你不能写别的名字啊，名字就是它，然后在里边加入你的转换规则，就是这个代码。咱们啊，刚才也复制过来了，就这段啊。把这个你给它加上。这个啊，我们就做到了啊，然后这个做到之后，咱们的第三步完成了，这个完成之后，下面进入到最后两步，第四步呢，咱需要装个这个转码器，因为你要变成2015，你把转码器需要装上，第五步用这个用这个转换啊，那我们写一下啊里边的第四步。咱们就是安装这么一个ES2015的转码器。啊，2015的转码器，因为你要做这操作，而转码器咱们也是用这个命令啊，直接给它装上就可以了，用这个杠杠C就足够了啊，就是当前环境安装就可以了，这个东西啊。

把这个说过来啊，然后咱们在里边给它装一下啊，把这命令拿过来，直接回车，它就可以联网去下载这个BES2015的转码器啊，这一过程需要联网啊，当然网速我觉得各位应该都问题不大啊，只要能看到直播，应该都能下载下来。当然它这下载啊，其实有的时候跟网络还不是有特大关系，比如说有时候你网就算很快，因为它连的话可能也会失败啊，所以如果失败的话，我们就多试几次啊，现在应该成功了，然后成功之后大家看啊，在里边多了一个叫no models，就是咱下那个bubble这个东西啊，就是它那转码器的部分，如果你失败把这个文件夹删掉，再重新下一点，我现在是已经成功了啊，就多出来这么一个东西bubble。啊，这是咱说的第四步啊。

然后做完之后。这里边就是还有最后一步。啊，就是最后一步了，也是第五步。咱们就是使用命令进行这么一个。转码啊，用这个做到，而转码的命令有两种命令啊。咱都写一下啊，首先第一个命令就是根据文件转码。然后还有第二个命令。它叫做根据文件夹转码啊，就两种命令啊，不需要各位刻意去记啊，咱就做个测试，各位看一下效果就可以了，那咱们来先看一下命令啊，第一个命令就是叫bubble。然后这里边加上你的文件，就是现在你看这过程中啊，把这个文件转成文件夹中的这个文件，中间加个参数叫杠O，这是第一个命令，然后第二个就是根据文件夹，把这个文件夹中那种。转成到ES5到这个文件夹中，这个叫杠D啊，就是两种方式，那我给大家都做个演示。

啊，比如说我们这么做啊。就是现在呢，我在里边呢，先建文件夹，我就叫这个。就叫Dis dst啊，然后现在比如说我想做这个操作，我怎么做呢？我想把ES6中这个零一.js这个代码转成ES5，然后放到这个Dis里边去啊，就根据文件做个转换，那咱来测试一下啊，刚才咱看到它的参数叫杠O。啊，那我写一下啊。写法就是你写一个叫。B加上你那个转换的文件的路径，我们是ES6里边的01点这S，这是第一个加个杠O，给它转到这个叫Dis里面去，比如第中大家给他改个名字，我就叫001吧，点JS啊，这样的话就可以把E6的文件转成ES5，然后放到这里边去啊，这是它一个写的这么一个命令啊。

然后咱们回车，我们看效果啊。你注意啊，这里边如果没有任何提示，表示就成功了，然后咱们到里边看一下001就出来了，而咱们看它的区别啊。在这个零一里边有一个箭头函数，但是在001里边，箭头函数变成了是这种形式啊，它就把这个ES6转成了ES5啊，所以咱们用。这个命令做到啊，这是根据文件做个转换。大家啊，把这个给它至少可以了啊，最终转完成了，但也看到了这么基本的效果啊。就是这个样子啊，我把这个。截过来啊。这是二，就是ES6的，这是转成的ES5的这个代码啊，它就放到这个位置啊，这是第一种转方式，然后第二个要根据文件夹转码，这个给大家也做个演示啊，跟刚才其实效果是一样的啊，比如说我这么做啊，我把这个文件先删掉，咱重新转。

然后现在怎么做呢，我这么来写啊，我写个八个加个ES6，再加个叫杠B，加个叫disco。这是什么意思呢？它会把ES6文件夹中的这个文件，然后转成ES5放到D中去啊，就是根据文件夹最后转换，那咱们回车。大家看里边啊，即使我们转换了，它默认转换名字都是一样，这是第四个里边你看箭头函数就没了，然后在这里边还是原始那个颜六。这叫根据文件夹转换啊，就是这么一种形式。所以各位啊，把这个效果我给大家就是快速演示一下啊，不需要各位去记里边这个过程。但是你要要求各位要按照我这过程把效果自己能给他测出来，因为这个B咱后面不会直接去用到，但是它毕竟属于前端中一个必备的知识，各位要知道这个特点。

啊，这个啊，我们就做一个演示，我先保存一下，最后啊，我再总结一下啊这个八宝。这是第五个，我们叫做bubble。这么一个东西啊，然后最后总结一下啊，首先第一个呢，要各位要知道的是bble到底是干什么的，它是一个叫转码器，可以把咱们的ES6代码转成ES5代码啊，这是咱提到的，然后它里边啊，就是因为ES6嘛，浏览器兼容性比较差，变成ES5是比较好，但是因E6比较简单，所以咱开发中都是编写E6代码，把ES6转成ES5再去运行啊，咱们开发中都这么来做。而它怎么样一个过程，咱们演示到了第一步装这么一个工具啊，你用这命令这些执行啊，当然前提条件啊，这一步就没有写，你这些项目必须都需要初始化这些才能用，然后第一步就是啊，我们装这个工具，第二步写个ES6的代码，然后写完之后第三步啊，咱们加一个配置文件，配置文件固定的名字就叫点BRC，不能写别的名字。

第四步装个转码器，最后一步骤用命令转码啊，不管你是根据文件还是根据文件夹，这里边我都写到了啊，我课件中应该都写出来了啊，就是里边的这个过程。啊，所以这个我们就最终完成了bble的这么一个说明啊，所以大家知道bubble是什么，然后效果你能自己给他动手测试出来就可以了啊。因为这个是前端中一个技术知识。比如说以后你面试的时候，别人可能问到你啊，说你前端熟悉吗？比如说我熟悉啊，别人问你。说你前端书意哪些内容，你可以给别人说我用个buble，然后bubble是什么，给他说一遍啊，基本上就没有问题啊。毕竟咱们不是专业前端，但是这些基础知识必须都要会。这个啊，我们就演示完了B。