一.什么是babel

二.如何配置

三.配置babel-polyfill

一.什么是babel

The compiler for writing next generation JavaScript.

官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。

由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。在升级到了Babel6.x版本之后,所有的插件都是可插拔的。这也意味着你安装了Babel之后,是不能工作的,需要配置对应的.babelrc文件才能发挥完整的作用。下面就对Babel的presets和plugins配置做一个简单解析。

二.如何配置

1. 配置文件.babelrc

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

{
    "presets": [],
    "plugins": []
    }

2.   presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

3.然后将这些规则加入.babelrc

{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}

4.其实看了上面的应该也明白了,presets,也就是一堆plugins的预设,起到方便的作用。如果你不采用presets,完全可以单独引入某个功能,比如以下的设置就会引入编译箭头函数的功能。

{
"plugins": ["transform-es2015-arrow-functions"]
}
还有一些方法是presets中不提供的,这时候就需要单独引入了,介绍几个常见的插件。

transform-runtime
{
"plugins": ["transform-runtime", options]
}

主要有以下options选择。

helpers: boolean,默认true
使用babel的helper函数。

polyfill: boolean,默认true
使用babel的polyfill,但是不能完全取代babel-polyfill。

regenerator: boolean,默认true
使用babel的regenerator。

moduleName: string,默认babel-runtime
使用对应module处理。

transform-remove-console
{
"plugins": ["transform-remove-console"]
}
使用这个插件,编译后的代码都会移除console.*,妈妈再也不用担心线上代码有多余的console.log了。当然很多时候,我们如果使用webpack,会在webpack中配置。

5.Babel支持自定义的预设(presets)或插件(plugins)。如果你的插件在npm上,可以直接采用这种方式"plugins": ["babel-plugin-myPlugin"],当然,你也可以缩写,此外,你还可以采用本地的相对路径引入插件,比如"plugins": ["./node_modules/asdf/plugin"]。

presets同理,示例

{
  "presets": [
    "es2015",   //对应babel-preset-es2015
    "react",      //对应babel-preset-react
    "stage-0"   //对应babel-preset-stage-0
  ],
  "plugins": [
    "transform-decorators-legacy",  //对应babel-plugin-transform-decorators-legacy
    "transform-runtime",                  //对应babel-plugin-transform-runtime
  ]
}
6.最简配置

{
"presets": [
"es2015",
"stage-0"
],
"plugins": ["transform-runtime"]
}

当然,如果你的项目需要react或者flow这些语法的编译,请在presets里加入对应的值即可

三.babel-polyfill

babel默认只转换新的javascript句法(syntax),而不转换新的api,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

安装命令
$ npm install --save babel-polyfill

使用方式
1.require('babel-polyfill')
2.import 'babel-polyfill'
3.module.exports={
entry:["babel-polyfill","./app/js"]
}
第三种方式适用于使用webpack构建的同学,加入到webpack配置文件
Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

参考资料:
https://excaliburhan.com/post/babel-preset-and-plugins.html
https://www.jianshu.com/p/7bc7b0fadfc2
http://www.ruanyifeng.com/blog/2016/01/babel.html
https://www.cnblogs.com/liujb/p/BABEL-zhuan-ma-jie-huo.html#toc_2

说说babel的更多相关文章

  1. babel presets stage-x

    在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...

  2. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  3. Babel:JavaScript编译器

    一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...

  4. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  6. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  7. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  8. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  9. Babel 学习

    一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...

  10. 利用Babel来转化你的ES2015脚本初步

    我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...

随机推荐

  1. 【linux】【FastDFS】FastDFS安装

    前言 FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存 ...

  2. mysql修改数据库的存储引擎(InnoDB)

    查看当前的存储引擎 show engines; 基本的差别:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISAM类型的表强调的是性能,其执行数度比InnoDB类型更快,但是不 ...

  3. svn报错Item is not readable svn解决方案

    解决: 配置目录权限时如: [/]tangtx=rwyangcx=rwweishq=rw 结果组用户分别在根目录下可以正常show log,而在其子目录中show log都会提示 Item is no ...

  4. spring系列常用注解

    常见注解使用 - @SpringBootApplication,springboot的核心注解,用于开启自动配置,等效于@Configuraion.@ComponentScan和@EnableAuto ...

  5. CMD的最佳“代替品”

    让CMD成为历史 Windows用户大多都使用过"cmd",cmd被称为"阉割版"的DOS系统~ 很多用户除此之外,还喜欢Linux命令行~但是CMD的命令和L ...

  6. 如果有人问你 JFinal 如何集成 EhCache,把这篇文章甩给他

    废话不多说,就说一句:在 JFinal 中集成 EhCache,可以提高系统的并发访问速度. 可能有人会问 JFinal 是什么,EhCache 是什么,简单解释一下. JFinal 是一个基于Jav ...

  7. 『TensorFlow2.0正式版』TF2.0+Keras速成教程·零:开篇简介与环境准备

    此篇教程参考自TensorFlow 2.0 + Keras Crash Course,在原文的基础上进行了适当的总结与改编,以适应于国内开发者的理解与使用,水平有限,如果写的不对的地方欢迎大家评论指出 ...

  8. Windows10 1903错误0xc0000135解决方案

    Windows10 1903错误0xc0000135解决方案 === windows10 1903是2019年Mircosoft推出的最新版windows操作系统,但是有很多机器装上之后会存在不支持. ...

  9. js时间查询补充

    先来看下JS中的日期操作: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年 ...

  10. Executor线程池原理详解

    线程池 线程池的目的就是减少多线程创建的开销,减少资源的消耗,让系统更加的稳定.在web开发中,服务器会为了一个请求分配一个线程来处理,如果每次请求都创建一个线程,请求结束就销毁这个线程.那么在高并发 ...