Babel是一个广泛应用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。意味着可以使用ES6编写程序,而不用担心现有环境是否支持。

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下:

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

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

然后将这些规则加入.babelrc中。

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

在特定环境的时候,可以用env选项来设置特定的配置:

{
"presets": ["env"]
}

可以设置一些选项,这里介绍常用几种:

targets  指定运行环境

targets.node  指定node版本

targets.browsers  指定浏览器版本

具体配置书写方式如下:

{
"presets": [
["env", {
"targets": {
"node": "8.9.1"
}
}],
["stage-0"]
]
}

babel配置文件.babelrc的更多相关文章

  1. babel配置文件.babelrc详解

    一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...

  2. vue-cli中的babel配置文件.babelrc详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...

  3. 深入浅出的webpack构建工具---babel之配置文件.babelrc(三)

    阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel ...

  4. WEBPACK & BABEL 打包项目

    本文首发于 BriFuture's Blog. 最近在用 Vue 重写之前的一个项目 Compass,这个项目以前是用 QML + JavaScript 在 Qt 平台上搭建的.这是我本科毕设时做的一 ...

  5. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  6. 使用node.js+babel,支持import/export语法

    如果要在node里面支持import/export default语法步骤: 1.使用npm安装 babel的客户端工具 npm init 会生成package.json文件 2.接着安装bebel客 ...

  7. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  8. webpack4 babel 篇

    demo 代码点此,如果对 babel 不熟,可以看一下babel 7 简单指北. webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 ...

  9. win10 vscode安装babel

    第一步:安装 babel-cli cd进入项目根目录,执行命令: npm install --global babel-cli 第二步:检测第一步是否成功,输入命令 babel --version,若 ...

随机推荐

  1. spyder学习记录---如何调试

    调试技巧: 当我们想单步执行某段代码(但是不进入调用的函数)时,点击运行当前行. 当我们想进入某个函数内部进行调试,在函数调用处点击进入函数或方法内运行. 当我们不想看函数内部的运行过程时,点击跳出函 ...

  2. Java程序员都需要懂的「反射」

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 今天来简单写一下Java的反射.本来没打算写反射 ...

  3. git命令清单 摘自 阮老师

    常用 Git 命令清单   作者: 阮一峰 日期: 2015年12月 9日 我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60- ...

  4. ionic2的返回按钮的编辑问题

    ionic2 返回按钮 首先可以在 app.module.ts 文件中配置. @NgModule 中的 imports 属性的 IonicModule.forRoot 第二个参数,如下: IonicM ...

  5. JMeter之If Controller深究二

    1.背景 接上文JMeter之If Controller深究一,在上文中提到压测采用的是JMeter3.1版本,本篇继续深究.基本确定问题原因后,宝路这边又做了不同版本的JMeter对比实验,这次加入 ...

  6. ORB-SLAM2 论文&代码学习 —— 概览

    转载请注明出处,谢谢 原创作者:MingruiYU 原创链接:https://www.cnblogs.com/MingruiYu/p/12347171.html *** 本文要点: ORB-SLAM2 ...

  7. [jQuery]顶级对象$(二)

    $ 是 jQuery 的缩写 <script> # 方法1. $ 是jQuery的别称 弹出提示 $(function () { alert(11) ); # 方法2 jQuery(fun ...

  8. 高并发之——不得不说的线程池与ThreadPoolExecutor类浅析

    一.抛砖引玉 既然Java中支持以多线程的方式来执行相应的任务,但为什么在JDK1.5中又提供了线程池技术呢?这个问题大家自行脑补,多动脑,肯定没坏处,哈哈哈... 说起Java中的线程池技术,在很多 ...

  9. xmppmini 项目详解:一步一步从原理跟我学实用 xmpp 技术开发 2.登录的实现

    第二章登录的实现 金庸<倚天屠龙记> 张三丰缓缓摇头,说道:“少林派累积千年,方得达成这等绝技,决非一蹴而至,就算是绝顶聪明之人,也无法自创.”他顿了一顿,又道:“我当年在少林寺中住过,只 ...

  10. mysql 查询语句的执行顺序(重重点)

    一 SELECT语句关键字的定义顺序 SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOI ...