背景:
最近在进行小组讨论时,组长给我们安排了一个课题,在现有的项目中使用jest进行单元测试,就jest来说,本来也不是多大的事,在单独新建一个小项目使用jest时,很顺利,但是我在项目中运行jest就开始报错(苦瓜脸),后来,在反复折腾完jest的版本周,jest能够使用了,但是我的项目却用不了了,原因尚不清楚,但在我运行项目是报了一大堆babel的错,因而感觉有可能是我babel配置的原因。对于babel,我个人一直处于一个模模糊糊的概念状态,对其从来没有一个比较明确的定义。所以呢,打算看文档仔细的研究一下babel到底是个啥东西。然后通过在这里记录一下学习中的收获。
1、babel是什么?babel用来干什么?(中间一大堆废话,可以跳过到最后一句)
babel是一个javascript编译器,啥?这是啥?jsvascript还需要编译?
确实就是字面上的意思,在实际的项目中,我们希望能够使用较新的语法来减少我们的工作量,提高我们编写代码的速度以及我们代码的可阅读性。但是现有的浏览器很有可能是不能识别这种语法的,
对于版本较老的浏览器来说,较新的语法简直就是天书,我们能读懂,浏览器读不懂,该代码也就不能正常运行。而babel就是用来将我们所写的含有较新语法的代码转换成浏览器能够看得懂的js语法。
2、babel的配置文件:
babel的配置文件有.babelrc和babel.config.json两种
结合官方文档和某些博客,下面是我自己对于这两种配置文件区别的理解。
.babelrc:配置文件只针对当前项目
.babel.config.json:会影响到node_modules中的文件,会对node_moudles进行编译。
如何在项目中两种文件都有时,会忽略掉.babelrc配置文件。
除了在以上两种配置文件中进行配置,还可以在package.json文件中进行配置。
package.json
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
3、配置文件的配置项:
目前我所接触到和用到的配置项基本上只有presets(预设)和plugins(插件)这两个。
babel本身没有代码转换的功能,主要通过插件进行代码转换,基本上目前项目中所运用到的插件都大同小异,如果没开始一个新的项目都要我们自己去手动配置,就会显得很麻烦,因此就有了预设的引入,在预设中放置好常用的babel插件,然后我们通过将预设引入配置文件,就可以避免我们每次都进行配置插件这一重复的工作了。
。。。。。好像没什么说的了,就到这吧!!!!!!!