babel配置文件.babelrc
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的更多相关文章
- babel配置文件.babelrc详解
一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...
- vue-cli中的babel配置文件.babelrc详解
本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...
- 深入浅出的webpack构建工具---babel之配置文件.babelrc(三)
阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel ...
- WEBPACK & BABEL 打包项目
本文首发于 BriFuture's Blog. 最近在用 Vue 重写之前的一个项目 Compass,这个项目以前是用 QML + JavaScript 在 Qt 平台上搭建的.这是我本科毕设时做的一 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
- 使用node.js+babel,支持import/export语法
如果要在node里面支持import/export default语法步骤: 1.使用npm安装 babel的客户端工具 npm init 会生成package.json文件 2.接着安装bebel客 ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
- webpack4 babel 篇
demo 代码点此,如果对 babel 不熟,可以看一下babel 7 简单指北. webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 ...
- win10 vscode安装babel
第一步:安装 babel-cli cd进入项目根目录,执行命令: npm install --global babel-cli 第二步:检测第一步是否成功,输入命令 babel --version,若 ...
随机推荐
- ssh_exchange_identification: read: Connection reset
垃圾服务器,真的佛了,明明服务器从装的系统,连接半天连接不上,但是别人的电脑就可以,要使用xshell和fileshell链接,按照软件报的错误来修复的话,根本解决不了问题,还是得命令行ssh roo ...
- java 利用POI 读取Execel数据的真实行数
java 利用poi 读execel文件的操作,读取总的数据行数一般是通过调用 sheet.getLastRowNum() ;可是这样有时候会出现一些问题,例如,当其中一行的数据的确都为空,可是其原本 ...
- HTML5与HTML4的区别-----新增的常用标签
做前端工程师这么长时间了, 对HTML5的一些标签的用法还不是很熟悉.这篇随笔算是对学过的知识的梳理.常言道,温故而知新 ~哈哈.里面有不正确的地方还望各位大牛们指正,评论. 在做网页时习惯把网页分 ...
- [Effective Java 读书笔记] 第三章类和接口 第十三 -- 十四条
第十三条 使类和成员的可访问性最小化 总得来说,我们应该尽量将成员的访问范围限制到最小!有利于解耦,开发.测试和优化都能够更加独立. 对于成员(域,方法,嵌套类和嵌套接口),有四种可能的访问级别,访问 ...
- Python3(三) 变量与运算符
一.什么是变量 变量 = [1,2] 二.变量的命名规则 字母,数字,下划线,首字母不能是数字 系统关键字 不能用在变量名中 保留关键字 区别大小写 a=1, a='1', a=(1,2), ...
- Angular RxJs:针对异步数据流编程工具
一. RxJs:针对异步数据流编程工具 1. 创建subject类对象(发送方) 2. subject.subscribe(观察者); (注册观察者对象observer,可以注册多个相当于回调函数取数 ...
- tensorflow开发环境版本组合
记录下各模块的版本 tensorflow 1.15.0 print tf.__version__ cuda 10.0.130 nvcc -v cudnn 7.6.4 ...
- git系列之---将本地的项目添加到码云仓库
1.前情: 本地写的 Demo 传到码云上面进行维护. 2.操作步骤: git init 将本地文件初始化为git 仓库,文件件会多一个 .git 文件夹[版本库]: git add . 或者 ...
- fastJson&edis
fastJson&redis 1. fastJson 1.1 依赖 <dependency> <groupId>com.alibaba</groupId> ...
- for循环嵌套练习题or99乘法表
//输出1-10之间的和 public static void whileTest(){ //定义变量用于存储不断变化的和 int sum = 0; //定义变量,用于记录不断变化的被加数 int x ...