babel7快速入门

babel是一个可以将es6,7甚至更高的语法转换成低级浏览器或者说所有浏览器执行结果一样的一个工具,那么如果你非常不喜欢老语法或者经常使用一些es6语法本篇文章对你非常有帮助!

首先我们需要先进行安装babel7

npm i -D @babel/cli @babel/core

因为babel的执行需要依赖一个babel/core的包文件,所以我们需要安装两个包,那么呢我是不建议全局安装的因为我们一般是通过webpack和babel的一起结合进行开发的,所以安装成开发依赖即可(i:install的缩写,D:--save-dev的缩写)

那么我们安装好了就可以使用最新npm提供的一个工具npx命令进行执行babel了(npx就是专门针对与安装开发依赖包所做的一个工具,有什么用呢,老版本npm安装开发依赖想要运行命令行指令,需要到node_modules/.bin目录下运行,那么npx后面跟着你要运行的命令名称npx就会自动去本地的node_modules的.bin目录寻找运行的命令是否存在,如果不存在就去全局安装的包去寻找是否有这个命令,如果还是没有就会进行远程下载到缓存区域执行命令)

所以我们使用 npx babel -V 就可以进行查看babel的版本号了

image.png

那么楼主的babel版本是7.4.3也证明安装babel成功了,那么我们迅速写一个代码进行测试吧,赶快体验一下babel的神奇能力吧

新建一个文件抒写一些高级语法


image.png

那么楼主写的这个文件成功执行了,那么有前段基础的都知道这段代码放在低版本浏览器或者低版本node上铁定报错,然后我们使用babel命令转化一个代码让他能够让低版本浏览器认识

npx babel 01.js -o 01_trans.js
image.png

那么我们发现了一个什么情况呢,代码还是一样根本没什么变化,这是为什么呢?
我们其实现在所安装的babel就是一个只有命令行的一个空壳而已,实际上是什么都干不了的,我们还需要为babel添加一些插件让babel工作,如果没有插件babel就只能拿来敲敲命令而已,没什么实际的作用
然后我们需要安装一个 @babel/preset-env的插件这个插件的工作主要就是用来转换高级语法到es5或者以下的语法的,但是支持的高级语法有一定的限制还需要配合其他插件使用,但是我们一般使用这么一个插件也够用了

npm i -S @babel/preset-env

那么安装成功之后就可以用了吗?当然不是了,你安装了但是babel不知道你安装了啊?你得告诉babel让他使用这个插件进行解析js代码啊,那么怎么告诉babel呢,就是通过配置文件了,每一个执行babel的时候babel都会到项目的根目录寻找一个.babelrc的配置文件,那么我们就新建一个这样的配置文件呗!


image.png

大致上就是这个样子吧,然后我们在运行一下babel

npx babel 01.js -o 01_trans.js

这时候发现输出的01_trans.js我们看不懂了类似于这样


image.png

在看代码


image.png

感觉上还是已经转换成功了哈,那么楼主因为系统限制也测试不了IE到底认不认识,但肯定是可以认识的啦,毕竟我都快不认识了,哈哈哈

好了,基本的babel使用就完成了,那么我在介绍几个常用的babel的插件吧

@babel/polyfill

这个包有什么用处呢,我们要知道一点,babel仅仅只能转换高级语法而已,而高级语法新增的一些函数是无能为力的,这是浏览器内核不支持,那么babel也没办法了,而这个包就是用来解决这个问题的
就比如说es6的一些数组新函数 filter foreach reduce等等低级浏览器该不认识还是不认识而这个包就是用来解决这个问题的(个人猜测应该是通过es5语法重写了这些函数,这样大家都认识了)
说的简单点就是各个浏览器支持的js函数都是大同小异,为了让一段js代码在各个浏览器上都输出相同的结果,polyfill就做了浏览器不认识的函数就提供这样的方法让各个浏览器对于js的兼容性处在同一个水准上(代码语法肯定一样,因为babel转成了es5语法)
那么我们怎么使用呢很简单的,先安装

npm i -S @babel/polyfill

安装完成之后直接在转换后的文件(是转换成低价语法的文件)中引用一段代码

require('@babel/polyfill');

那么这个包的工作就完成了


image.png
  • @babel/runtime

  • @babel/plugin-transform-runtime

介绍这两个包就要从代码复用来说起


image.png

image.png

大家可以发现,babel给我们转换的低级语法,比如es6的class声明类在转换之后其实调用的是createClass这个babel自己定义的方法(前面说了的es6的函数,关键字属于浏览器内核的关系,babel也只能通过低级语法定义出一个解决方法,无法直接让浏览器支持最新的语法)我们思考一下,如果我们做项目了,很多文件都需要定义很多的类是不是这个createClass函数会在每个文件都创建一个呢,答案是肯定过的,对于我们来说这样代码就显得非常臃肿了,怎么办呢?就是这两个包了,这两个包可以使一些公共的函数提出来

  • @babel/runtime 就是用于提出来公共的包,但是提出来之后,代码并不会自己会引用这些包啊
  • @babel/plugin-transform-runtime 所以我们需要这个包来自动引用公共函数
    首先安装
npm i --S @babel/runtime @babel/plugin-transform-runtime

然后配置,@babel/runtime不需要配置,由@babel/plugin-transform-runtime引用,所以只需要配置他


image.png

最后使用


image.png

最后说一说babel怎么与webpack一起工作吧

首先安装loader,webpack

npm i -D babel-loader webpack webpack-cli

然后在webpack配置文件中配置规则


image.png

image.png

这里一定要注意,配置babel-loader一定要忽略node_modules文件夹不然的话就是babel也会把node_modules下的js文件也给转换,node_modules但文件数就够你转换的了,非常消耗时间和CPU,而且转换成功之后还运行不了,然后我们直接通过webpack进行打包试试

npx webpack

就是这种情况


image.png

好了,写了这么多,也只是想说,更多的还是需要自己不断的摸索,学习,那么我们下次再见!

2019年04月19日10:23:50

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,396评论 1 301
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,482评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,858评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,131评论 0 179
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,903评论 1 256
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,847评论 1 177
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,454评论 2 273
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,206评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,047评论 6 232
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,563评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,344评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,667评论 1 231
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,264评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,163评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,546评论 3 207
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,630评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,032评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,572评论 2 231
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,668评论 2 232

推荐阅读更多精彩内容