.babelrc

    babel是一种js语法编译器,在前端开发过程中,由于浏览器的版本和兼容性问题,很多js的新方法和特性的使用都受到了限制。使用babel可以将代码中js代码编译成兼容绝大多数主流浏览器的代码。

        babel6.X版本之后,所有的插件都是可插拔的,也就是说只安装babel依然无法正常的工作,我们需要配置对应的.babelrc文件才能起作用。

        .babelrc文件需要的配置项主要有预设(presets)和插件(plugins)。

        1、预设(presets)的作用是为babel安装指定的插件,插件命名采用babel-preset-xxx的形式,安装时使用npm安装,如npm install babel-preset-es2015。之后在.babelrc文件里进行配置,如图所示:

        其中xxx是npm安装时的插件名,options是插件相应的参数,主要参数有

        a)targets:{[string]:number},默认{}  指定需要支持的环境,如chrome、safari、ie等,甚至可以指定版本,如node:6.5,或者node:current表示使用当前的版本。

        b)browers:Array|string 默认[],浏览器列表,(不太理解,后续再研究)。

        c)loose:boolean,默认false  是否使用宽松模式,如果设置为true,只要plugins中的插件允许,都会采用宽松模式。

        d)debug:boolean 默认false 编译时是否去掉console.log。

        e)whitelist 默认[],设置一直引入的plugins列表。

        2、插件(plugins)

        presets是插件plugins的预设,也就是说直接需要不需要的插件一起引入,如果不想使用presets,可以单独使用plugins对某个功能进行单独的引入。另外,有一些方法是presets中不提供的,如果要使用就需要单独引用了,比如:

        a)transform-runtime:解决编译中产生的重复的工具函数,减小代码体积。

        b)transform-remove-console:编译后的代码会移除console.*

        plugins/presets排序遵循下列标准: 

        1、plugins会先于presets进行编译

        2、plugins会按照数组index的增序进行编译

        3、presets会按照数组index的降序进行编译

注:

check-es2015-constants // 检验const常量是否被重新赋值

transform-es2015-arrow-functions // 编译箭头函数

transform-es2015-block-scoped-functions // 函数声明在作用域内

transform-es2015-block-scoping // 编译const和let

transform-es2015-classes // 编译class

transform-es2015-computed-properties // 编译计算对象属性

transform-es2015-destructuring // 编译解构赋值

transform-es2015-duplicate-keys // 编译对象中重复的key,其实是转换成计算对象属性

transform-es2015-for-of // 编译for...of

transform-es2015-function-name // 将function.name语义应用于所有的function

transform-es2015-literals // 编译整数(8进制/16进制)和unicode

transform-es2015-modules-commonjs // 将modules编译成commonjs

transform-es2015-object-super // 编译super

transform-es2015-parameters // 编译参数,包括默认参数,不定参数和解构参数

transform-es2015-shorthand-properties // 编译属性缩写

transform-es2015-spread // 编译展开运算符

transform-es2015-sticky-regex // 正则添加sticky属性

transform-es2015-template-literals // 编译模版字符串

transform-es2015-typeof-symbol // 编译Symbol类型

transform-es2015-unicode-regex // 正则添加unicode模式

transform-regenerator // 编译generator函数

transform-exponentiation-operator // 编译幂运算符

syntax-trailing-function-commas // function最后一个参数允许使用逗号

transform-async-to-generator // 把async函数转化成generator函数



使用:

配置:

 引入:

使用:

 

这个macros就是为了那些简短的属性不值得写到一个单独的style.js里的样式使用的。 

  • 8
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
.babelrc文件是用来配置Babel编译器的设置的文件。Babel是一个用于转译JavaScript代码的工具,它可以将较新版本的JavaScript代码转换为较旧版本的代码,以便在不支持较新语法和特性的环境中运行。.babelrc文件主要用于指定Babel编译器的插件和预设(presets)的配置。 在.babelrc文件中,可以使用presets来指定一组预设,这些预设定义了需要转换的语法和插件集合,从而根据需求进行定制化的代码转换。同时,也可以使用plugins来指定单个插件,以实现更细粒度的代码转换。 配置文件中的内容可以根据具体项目的需求进行修改。一般来说,可以根据需要选择不同的预设和插件,例如ES6、React、TypeScript等。通过配置.babelrc文件,可以使Babel根据这些配置自动进行代码转换,以满足项目的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [.babelrc详解](https://blog.csdn.net/xiaokanfuchen86/article/details/106342814)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-cli脚手架的.babelrc文件用法说明](https://download.csdn.net/download/weixin_38546817/12923445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [babel之配置文件.babelrc入门详解](https://blog.csdn.net/weixin_34221332/article/details/88008699)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值