babel入门基础
背景
babel的官网说babel是下一代的js语法编译器,现在自己也在很多项目中使用了babel,可是自己对babel的认识呢,只停留在从google和别人项目中copy的配置代码上,内心感到很不安,最近花了点时间整理了一下,分享给大伙。
babel常用配置
通常在前端或node项目中,进行以下配置:
入口文件app.babel.js里面配置:
// babel
require('babel-core/register')({
presets: ['es2015', 'stage-0']
});
require('babel-polyfill');
require('./app.js');
.babelrc文件中的设置:
{
"presets": ["es2015", "stage-0"]
}
babel基础概念
1.babel-core
新的js语法之前是不存在的,需要将js代码分析抽象的语法树 ,方便各个插件分析语法进行相应的处理成低版本的js;
2.babel-register
改写了require命令,会对.js、jsx、.es、es6 后缀的模块都会先转码,但并不会对当前文件进行转码;由于该转码是实时的,所以不能用在生产环境中。
3.babelrc文件
babel-core只是生成了语法树,并没有转码,转码工作由插件完成。自从babel升级到6.x之后,babel的插件都是可以插拔的,只有设置了相应的插件,babel才能知道如何处理js代码。
.babelrc主要对presets、plugins进行设置,其中presets主要是一套预设置的插件,如es-2015、stage-0等,plugins可以让用户选取需要的单个插件。
目前babel提供了几个官方的preset,主要包括:env es2015 es2016 es2017 flow latest react 。设置presets的时候需要提前npm安装相应的插件,插件名格式:babel-preset-xxx;如下:
{ "presets": ["es2015"] }
npm install babel-preset-es2015
如果不需要一套plugins的预设置,可以通过plugins属性引入所需的plugin,比如以下的设置就会引入编译class函数的功能。
{ "plugins": ["transform-es2015-classes"] }
需要注意的是,某些插件是不被presets预置的,如常用的transform-runtime插件和transform-remove-console插件。
关于presets和plugins的优先顺序一般遵从3个原则:
- plugins优先于presets进行编译。
- plugins按照数组的index增序(从数组第一个到最后一个)进行编译。
- presets按照数组的index倒序(从数组最后一个到第一个)进行编译。
- 详细信息可以查看官方文档
4.babel-polyfill
polyfill拥有自定义的regenerator runtime 和core-js;它模拟了ES2015的环境,一般使用在应用程序中,而不是当做库和工具使用;比如说babel-node中自带了babel-polyfill,babel-polyfill为node提供了ES6的REPL环境。REPL,即read-eval-print-loop交互式解释器。详情可参考阮老师的文章。
babel几乎能翻译所有的js新语法,但是对于APIs却并非如此,如新增对象Promise、Set、Map等,静态方法Object.assign等,这就需要创造一个ES6的运行环境。
可以通过babel-polyfill来转码新API,其实现办法就是向全局变量上挂新增的对象或在原型链上增加方法,如在node环境下将Promise挂在global对象上。缺点就是污染全局变量。
还有一个避免全局污染的方法就是使用babel-runtime + babel-plugins-runtime-transform;babel-runtime 更像是分散的polyfill 模块,我们可以在自己的模块里单独引入,比如 require(‘babel-runtime/core-js/promise’) ,它们不会在全局环境添加未实现的方法,只是这样手动引用每个 polyfill 会非常麻烦。我们借助 Runtime transform 插件来自动化处理这一切。
webpack中如何使用babel
1.使用babel-runtime
需要安装babel-runtime和babel-plugin-transform-runtime
module: {
loaders: [{
loader: 'babel',
test: /.js/,
include: path.join(__dirname, 'src'),
query: {
plugins: ['transform-runtime'],
presets: [ 'es2015', 'stage-0'],
}}]
}
2.使用babel-polyfi
将babel-polyfill放在入口设置处
entry: [ 'babel-polyfill','src/index.js', ],
module: {
loaders: [{
loader: 'babel',
test: /.js/,
include: path.join(__dirname, 'src'),
query: {
presets: ['es2015', 'stage-0']
}}]
}
参考资料:
http://www.tuicool.com/articles/vmA3U3R
https://segmentfault.com/a/1190000008159877
https://github.com/brunoyang/blog/issues/20
- 【自然框架】之表单控件(一)实体类(Class)VS 字典(Dictionary)
- 跨平台后门Mokes现已加入OS X豪华午餐
- 【问底】严澜:数据挖掘入门——分词
- 机器学习-简单线性回归教程
- NSA(美国国安局)泄漏Exploit分析
- 详解Windows Shim的攻防利用
- 基于Github的源码白盒扫描工具Raptor
- 把业务逻辑变成数据结构和SQL语句的例子。自然架构改成自然框架
- 【自然框架】之通用权限(六):权限到节点
- 【自然框架】之“元数据”的威力
- 周末娱乐:讲真,这才是我所说黑客的定义!
- 数据访问函数库的使用方法(一)——添加修改数据
- 数据访问函数库的使用方法(二)—— 获取记录集和使用事务的方法
- “数据访问函数库”(DataAccessLibrary for .net2.0 )源代码下载 09.06.15更新
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android4.4开发之电池低电量告警提示原理与实现方法分析
- 浅谈android性能优化之启动过程(冷启动和热启动)
- Android拖动条的实现代码
- Devtools 老师傅养成[3] - Console 面板
- Android开发中数据库升级且表添加新列的方法
- Android冷启动实现app秒开的实现代码
- Devtools 老师傅养成[4] - Sources 面板
- android中使用Html渲染的方式实现必填项前面的*号示例
- android视频播放简单实现示例(VideoView&MediaPlayer)
- Android中SharedPreference详解及简单实例
- Devtools 老师傅养成[5] - Network 面板
- android实现上传本地图片到网络功能
- android音乐播放简单实现的简单示例(MediaPlayer)
- Android实现桌面悬浮小火箭效果
- Android数据库中事务操作方法之银行转账示例