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. centos6.5下oracle11g下OGG单向复制

    命名规范: local==> l remote==> r extract==> x data pump==> p ------------------------------- ...

  2. 使用DIV实现页面的遮罩效果

    Div实现页面的遮罩 之前没动手搞过,项目有个需求刚好可以用到,就想着去试下,结果发现自己都理解的有问题了. 遮罩的实现是使用opacity或者IE下的filter滤镜来设置透明度的,而且一个div必 ...

  3. Linux bash管道符“|”使用介绍与例子

    https://blog.csdn.net/wangqianyilynn/article/details/75576815

  4. OSPF笔记——LSA及其字段,及其作用

    Link State ID Link State ID remains at 32 bits in length, Link State ID has shed any addressing sema ...

  5. Day5前端学习之路——盒模型和浮动

    盒子模型 浮动float 一.盒子模型 (1)content内容区 width和height是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其他框,也可以使用min-width.max- ...

  6. Windows2008R2搭建共享存储服务器

    说明: 为了方便公司个部门软件.项目.文档等资料的归档和保存,实现公司内部资料共享及重要资料备份,防止因个人计算机系统故障或硬件故障导致数据丢失而造成数据无法恢复的损失,特建立共享服务器 1.在共享服 ...

  7. thinkPHP中Model的字段映射问题

    在model定义中不要自己定义相应的字段变量,因为一旦定义,之后的赋值会直接赋给自己定义的属性,但实际上model抽象类重写了__set()方法,将未定义的属性存入了$data里面,写入数据库是也会从 ...

  8. 前端之gojs插件的基本使用

    gojs是一个前端插件,可以通过代码动态的生成流程图,各自展示图 参考网址:https://gojs.net/latest/index.html 如果你想使用,需要先下载对应的文件 我们能用的到的其实 ...

  9. 在虚拟机中使用NetToPLCSim和PLC相连.

    1,虚拟机...系统Win10...里面安装了VS. 2,本机...系统Win10...里面安装了博图15. 3,转换软件:NetToPLCSIM. 4,本机和虚拟机连接同一个路由器.注意: 5,设置 ...

  10. python3-cookbook笔记:第十章 模块与包

    python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...