课程名称:4小时快速体验ES6-10的强大
课程章节: ES转换器babel的使用
课程讲师:大谷
课程内容:
上章文章中我们安装完成相关配置后,对应的文件夹下面会生成下面几个文件,node_modules
是生成的一些依赖库,package
是我们需要修改的配置文件,package-lock
想当于一个备份文件。
相关命令执行后,我们现在开始转换单个js
文件,我们先在目录下建立一个src
文件夹,用来保存一些源文件。我们在src
文件夹下面创建一个js1.js
,我们在js
里面写一个箭头函数,返回结果666
,将这个文件转换为es5
老版本的写法。在当前文件的cmd下执行babel src/js1.js --presets es2015
命令。执行完成后就能看到我们转换后的代码时什么样的。如果我们将转换后的代码保存到另一个文件中,我们执行babel src/js1.js -o src/js2.js --presets es2015
命令,执行完成后就会发现src
目录下会生成一个js2.js
文件,里面存放的就是我们转换后的代码。
如果我们想要实现src
文件夹里面的js
文件都进行转换。我们就重新创建一个dist
文件,用来存放所有转换过来的文件。执行babel src -d dist --presets es2015
命令,意思是将src
目录的内容降到低版本后都保存到dist
文件夹里面。-d
表示按目录进行转换。
我们想要实现自动化打包转换,而不是每次转换都通过一个命令,这样我们就可以通过新建一个.babelrc
文件来实现,里面写上{"parents": ["es2015"],"plugins": []}
这行代码,除此之外,我们还要在package.json
文件夹中的scripts
标签下配置"build": "babel src -d dist"
,这样我们就可以在vscode
终端执行npm run build
,这样我们每次转换的时候,只需要执行这个命令即可。
课程收获:
这一章主要学习了ES
转换器的相关命令,首先我们知道每个文件夹的含义是什么,然后我们通过在cmd
执行的命令将高版本语法转化为低版本的语法,其中不仅可以转换单个文件,还可以对整个目录进行转换,单个文件转换字母是-o
,目前的转换字母是-d
。最后我们还通过配置package.json
和新建.babelrc
文件的配置,实现了通过npm run build
打包命令来转化对应的文件或者目录,这种方法更像我们在框架中使用的命令。