继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【备战春招】第14天 ES转换器babel的使用(一)

周帅帅Love
关注TA
已关注
手记 86
粉丝 5
获赞 96

课程章节: ES转换器babel的使用

课程讲师大谷

课程内容:

JS编译器babel

babel的作用是将高版本ES6语法转换为ES5的。

为什么要转换呢?

因为目前每一个浏览器对于ES的支持都不一样,不一定所有新版本的语法都支持。我们也可以都使用低版本语法,但是如果我们都用低版本语法,那么高版本的一些好的功能就无法使用出来,所以转换后就可以将高版本的优势发挥出来。等以后浏览器都兼容了高版本,那么我们就不需要再去做转换了。

安装babel

(1) 安装node.js,需要使用其npm。安装完node后,就会带有npm,所以npm不需要安装。

(2) 在dos界面,进入工程目录,生成package.json文件。

(3) 安装babel,用于转码。

(4) 安装转码规则。

(5) 创建.babelrc文件。

node安装,我们点击node官网进入,然后选择自己对应的电脑系统进行node的安装,下载后直接点下一步进行安装即可。
图片描述

安装完成后,我们在桌面创建一个文件夹,然后点击文件夹路径,输入cmd并回车,就会进入当前文件夹的cmd界面。
图片描述

进入当前文件夹的cmd界面后,我们先输入node -v查看node是否安装成功,然后再输入npm -v查看对应的npm版本,最后我们输入npm init -y命令,将这个项目进行初始化。执行这个命令后,就会发现我们的文件夹下面生成了一个package.json的文件。我们还能看到生成文件里面对应的内容。
图片描述

生成文件后,我们下一步就需要安装babel-cli,安装命令使用npm install -g babel-cli这里的-g指的是全局安装。babel转换器安装完成之后,我们第三步就需要安装es2015,使用的命令是npm install --save babel-preset-es2015,这个用来将es6转换成es5的插件,等待安装完成即可。如果我们只想把es6.js转换一个低版本的,我们就可以使用babel es6.js --presets es2015,但是这样只能转换一个而不能转换多个文件。

课程收获:

这一章主要学习了JS编译器babel的作用以及环境的搭建,我们在平时工作中写ES6语法时,有些浏览器对高版本的语法不是支持的那么好,就需要我们对高版本语法进行处理,这时候我们就需要babel转换器,通过babel我们可以将高版本转换为低版本语法,从而让浏览器兼容。babel环境的搭建需要在node环境下,所以我们需要安装nodenode自带的npm,可以让我们安装对应的依赖库。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP