梦里Babel知多少(一)
平时开发中,经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。
之前用Vue比较多,所以以Vue-cli作为参考来分析。
第一张图是几个月前的Vue-cli生成的
第二个图是今天使用Vue-cli生成的
Babel-core
顾名思义,这是 babel
的核心代码,但是在我们构建的时候不会直接调用 babel-core
。它是一个标准库,通常服务于各种 polyfill
等库,比如 babel-runtime
, babel-plugin-transform-runtime
, babel-polyfill
等。
Babel-loader
通常在我们使用webpack的时候,我们会先安装 babel-loader
来作为加载器。
babel-preset-env
稍后介绍
cnpm i babel-loader babel-core babel-preset-env -D
这样在webpack中,可以这样
module exprots = {entry: __dirname + '/main.js',output: {path: __dirname + '/public',filename: 'bundle.js'},module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: 'babel-loader',options: {presets: ['env']}},exclude: /node_module/}]}
}
Babel-preset-es2015
之前的都是介绍的 babel-core
babel-loader
并不能转码,而当我们想使用ES6语法时候就需要用到 babel-preset-es2015
这个包可以对 es2015 代码进行转码为ES5语法。当然如果使用了ES7语法,即async await 等语法,还是不能够支持的。
安装:
cnpm i babel-preset-es2015 -D
在使用webpack构建工具时,我们通常不会在webpack.config.js里直接对 babel
进行配置。而是在根目录下创建一个 .babelrc.js
的文件。
/* webpack.config.js */module exprots = {entry: __dirname + '/main.js',output: {path: __dirname + '/public',filename: 'bundle.js'},module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: 'babel-loader'},exclude: /node_module/}]}
}
/* .babelrc.js */
{"presets": ["es2015"]
}
需要特别注意的是, babel-preset-es2015
虽然可以对ES6转码,但是它只会对ES6的语法进行转码,并不会对API进行转码。也就是说它可以对箭头函数,promise转码,但不会对Array.from,Array.find等转码。
所以为了能够使用ES6的API,我们还需要进行更深入的配置。
Babel-plugin-transform-runtime
安装:
cnpm i babel-plugin-transform-runtime -D
使用:
/* .babelrc */
{"presets": ["es2015"],"plugins": ["transform-runtime"]
}
这样就可以自由使用promise了。
但是这个方案有一些特点
特点:官方建议在 lib 上使用,因为该方案没有全局变量和 prototype
污染。
1,因为相当于是在沙箱操作,没有在全局对象中声明变量。
2,正是因为没有 prototype
污染,所以对于一些内置类型扩展的方法是没办法 polyfill
的。比如: Array.prototype.find
Array.prototype.filter
等。但是可以对静态方法进行 polyfill
。
优点: 可以按需引用。
Babel-polyfill
正是因为 babel-polyfill
的特点,让开发者通常使用 babel-polyfill
进行开发。
安装:
cnpm i babel-polyfill -D
使用:
/* main.js(入口文件) */
import 'babel-polyfill'
这样就OK啦,在使用 babel-polyfill
后,就不需要引入 babel-plugin-transform-runtime
了,并且它在浏览器支持Promise
时使用 原生的promise
,如果不支持才会使用polyfill
。
但是最大的缺点就是不能按需引用,文件比较大。
梦里Babel知多少(一)相关推荐
- Polymorphic 梦里花落知多少
Java特性 封装,继承,多态 谈到Java语言,就会自然的想到:面向对象,符合人们的思维模式.同时,它自身的特性更是被广泛的应用.三大特性:封装.继承.多态. 三大特性 ► 概念理解: 1 封装 主 ...
- 每日一皮:昨晚梦见男朋友和别的女人在逛街,梦里我的第一反应就是查源代码......
网络上女程序员发的一条微博: "昨晚梦见男朋友和别的女人在逛街,梦里我的第一反应就是查源代码,结果调试半天查不出来为什么显示的那个女人不是我,最后含泪把那个女人注释掉了,再一运行就是我男朋友 ...
- 梦里梦到的人是谁在想谁?
梦里梦到某人,某人和我,到底是谁在想谁? 假定做梦时梦里出现的人就是因为想念,那么,要想回答这个问题,我看其实不难. 1.做梦到底是怎么回事,真的是因为思念.想念吗?是谁在思念.想念谁? 做梦究竟是怎 ...
- 梦里看到你为我写的情书
梦里看到你为我写的情书 --代腾飞 2009年11月26日 于成都 夜深无数 泪光伴着蜡烛 心中的情总是压抑不住 曾经的往事一一流出 笔尖下的墨早已化作了无尽的情书 你说 要让我们曾经的朝朝暮暮在文字 ...
- 原神梦里花花种在哪种
原神梦里花花种在哪种,游戏也是即将开启新活动--梦里生花,那么玩家们所获取的"梦里花"花种又应该种植在哪里呢,相信还有些小伙伴不清楚.所以下面就为大家带来了梦里花花种的种植地点介绍 ...
- 红楼梦人物关系 python_如何用Python来理一理红楼梦里的那些关系
前言 今天,一起用 Python 来理一理红楼梦里的那些关系 不要问我为啥是红楼梦,而不是水浒三国或西游,因为我也鉴定的认为,红楼才是无可争议的中国古典小说只巅峰,且不接受反驳!而红楼梦也是我多次反复 ...
- 梦里什么都有(状压DP)
梦里什么都有 时间限制: 1000ms 内存限制: 524288KB 通过次数: 3 总提交次数: 25 问题描述 Air_H 和灰哥身为两个老大(dalao), 经常派给小弟 zbt 很多任务, z ...
- python 红楼梦 人物关系_用Python来理一理红楼梦里的这些关系
原标题:用Python来理一理红楼梦里的这些关系 最近把红楼梦又抽空看了一遍,古典中的经典,我真无法用言辞赞美她.今天,想跟大家一起用 Python 来理一理红楼梦中的的那些关系 不要问我为啥是红楼梦 ...
- 两道小学生的题----1000: 梦里的难题、1002: 拳皇
黑色的飞鸟掠过天空,我站在城中,看时间燃成灰烬,哗哗作响...... 题目描述 生化危机血腥暴力的场面对小星星的冲击很大,晚上频繁地做起了梦,梦里他担负起拯救世人消灭僵尸的重任,眼看就能拿到消除 T ...
最新文章
- 判断浏览器类型及版本
- python虚拟环境virualenv的安装与使用
- android中进度条的使用,android的进度条使用
- kafka maven没有下载_Kafka 系列(三)——Kafka 生产者详解
- Java 200+ 面试题补充 ThreadLocal 模块
- Maven工作笔记-在内网环境下开发Spring Boot(使用IDEA)
- 使用React,TypeScript和Socket.io构建聊天应用
- [转]Android限制只能在主线程中进行UI访问的实现原理
- 不做单元测试的6大借口
- mootools-1.2.1-core.js在IE中显示不了图像翻页
- 用户事件的存储与分析
- 图论及其应用 2018年期末考试 答案总结
- 基于大数据的舆情分析系统架构(架构篇)
- GET 请求参数过大导致HTTP错误码 414 / 500 的问题
- Spring实战(开发Web应用)
- nvme-cli tool 刷FW(固件)
- 在Windows Server 2003企业版下让移动硬盘自动显示盘符
- 3D打印技术让实现更多天马行空的创意
- vue在调用摄像头扫码(vue-qrcode-reader)
- 04-mysql数据备份之mysqldump命令详解