babel-预设和插件

一、配置文件

几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5，转换工具要么使用babel-cli，要么使用webpack的babel-loader，不管使用哪种转换工具，通常都需要一个配置文件来建立转换规则（也可以在webpack的babel-loader的配置项，原理都一样）。

babel执行时默认从当前目录查找配置文件，支持的配置文件格式有：.babelrc，.babelrc.js，babel.config.js和package.json。它们的配置项都是相同，作用也是一样的，只需要选择其中一种，推荐使用.js结尾的文件，这样可以在配置文件中进行编程控制,如下：

module.exports = function (api) {api.cache(true);const presets = [ ... ];const plugins = [ ... ];return {presets,plugins};
}

也可以直接使用module.exports = {}，没有必要一定是一个function。

在编写配置文件中，最主要的就是设置plugins(插件)和presets(预设)，每个插件或预设都是一个npm包，插件和预设会在编译过程中把我们的ES6+代码转换成ES5。

二、插件和预设的关系

babel中的插件太多，以es2015为例：

@babel/plugin-transform-arrow-functions
@babel/plugin-transform-block-scoped-functions
@babel/plugin-transform-block-scoping
....

如果只采用插件的话，我们需要配置非常多的插件数组，如果项目使用了es2016又得增加一堆，而且我们压根也记不住哪个es版本里该使用哪些插件。

preset就是解决这个问题的，它是一系列插件的集合，以@babel/preset-env为例，假设项目中安装的npm包版本是2020年1月发布的，那么这个预设里包含了2020年1月以前所有进入到stage4阶段的语法转换插件。

可能有小伙伴会问，假如我设置了一个语法插件，指定某个预设里又包含了插件，此时会发生什么？这就涉及到插件和预设的执行顺序了，具体的规则如下：

插件比预设先执行
插件执行顺序是插件数组从前向后执行
预设执行顺序是预设数组从后向前执行

三、插件和预设的参数

不配置参数的情况下，每个插件或预设都是数组中的一个字符串成员，例：preset:["@babel/preset-env","@babel/preset-react"]，如果某个插件或预设需要配置参数，成员项就需要由字符串换成一个数组，数组的第一项是插件或预设的名称字符串，第二项为对象，该对象用来设置插件或预设的参数，格式如下：

  {"presets": [["@babel/preset-env",{"useBuiltIns": "entry"}]]}

四、插件和预设的简写

插件或可以在配置文件里用简写名称，如果插件的npm包名称的前缀为 babel-plugin-，可以省略前缀。例如"plugins": ["babel-plugin-transform-decorators-legacy"]可以简写为"plugins": ["transform-decorators-legacy"]。

如果npm包名称的前缀带有作用域@，例如@scope/babel-plugin-xxx,短名称可以写成@scope/xxx。

到babel7版本时，官方的插件大多采用@babel/plugin-xxx格式的，没有明确说明是否可以省略@babel/plugin-，遇到这中npm包时，最好还是采用全称写法比较稳妥。

预设的短名称规则跟插件差不多，前缀为babel-preset-或带有作用域的包@scope/babel-preset-xxx的可以省略掉babel-preset-。

babel7里@babel/preset-前缀开头的包，例如@babel/preset-env的短名称是@babel/env，官方并没有给出明确说明以@babel/preset-xxx卡头的包是否都可以采用简写，因此最好还是采用全称。

五、混乱的babel6预设

如果直接接触babel7的前端同事都知道es预设直接用@babel/preset-env就行了，但是如果要维护和迭代基于babel6的项目呢？各个项目中使用的可能都不一样，babel-preset-es20xx、babel-preset-stage-x、babel-preset-latest这些预设是啥意思？

babel-preset-es20xx: TC39每年发布的、进入标准的ES语法转换器预设，最后一个预设是babel-preset-es2017，不再更新。

babel-preset-stage-x： TC39每年草案阶段的ES语法转换器预设。x的值是0到3，babel7时已废弃，不再更新。

babel-preset-latest： TC39每年发布的、进入标准的ES语法转换器预设。在babel6时等于babel-preset-es2015、babel-preset-es2016、babel-preset-es2017。该包从 v2 开始，需要@babel/core@^7.0.0，也就是需要babel7才能使用，既然要升级到babel7，不如使用更加强大的@babel/preset-env。

babel-预设和插件相关推荐

可以直接在FCPX软件里加载管理预览使用LUTs调色预设的插件–LUT Gallery
我们在网站上分享了很多LUTs调色预设,但是很多人不知道怎么在FCPX使用这些预设,今天就为大家介绍这款可以直接在FCPX软件里加载管理预览使用LUTs调色预设的插件–LUT Gallery.插件安装 ...
Babel常用的插件
Babel常用的插件 1. @babel-plugin-dynamic-import-node 作用:在开发环境下解决vue热加载编译速度慢的问题. 2. @babel/plugin-syntax-d ...
sublime 插件安装；sublime的 babel、sublime-jsfmt插件
前提: 在开发过程中,使用到es6语法,sublime不能够自动的识别代码,不能高亮等: babel是一个更好显示高亮,和代码格式的插件,并且 sublime-jsfmt让更好: 安装sublime ...
Koa2仿知乎服务端项目：Webpack配置
项目简介该项目为一个后端项目,该项目仿"知乎",模拟实现了: JWT用户认证.授权模块上传图片模块个人资料模块关注与粉丝模块话题模块问题模块答案模块评论模块共计4 ...
html引入babel-polyfill,babel-polyfill
babel-polyfill在Babel7以后名字是@babel/polyfill.在引入polyfill一节,我们学习了polyfill的入门知识,在本节将会深入讲解. polyfill广义上讲是为 ...
为什么我们删除Babel的舞台预设：实验性提案的明确选择加入
by Henry Zhu 朱Henry 为什么我们删除Babel的舞台预设:实验性提案的明确选择加入 (Why We Removed Babel's Stage Presets: Explicit O ...
ae字体预设下载_AE超强文字预设包（附插件和教程）Videohive 2D Text Preset Pack for Animation Composer Plug-in...
[预设介绍] 一套非常强大的文字动画预设包,作者还为这套强大的预设制作了Animation Composer独立控制插件, 能够更好的使用预设,预设超过1000种,能用于转场和特效中, 在插件中直接使 ...
FCPX插件：LUT Gallery for mac(LUTS调色预设预览管理）及安装教程
LUT Gallery是一个LUTS调色预设预览管理插件,可以在FCPX中直接预览选择需要的LUTS预设,以文件夹的形式整理管理预设,选择应用预设并调节预设的浓度.包含一个白平衡插件,配合使用可以调节 ...
babel 插件为react元素自动添加属性
原文链接: babel 插件为react元素自动添加属性上一篇: clip-path 绘制css常见图形制作有趣的动画下一篇: js 生成器协程参考 https://www.imliyan. ...
FCPX插件:直线图形矩形线条路径动画预设
本次小编为您带来直线图形矩形线条路径动画预设,这是一套适用于Final Cut Pro的字幕插件.线条路径动画预设 Mac插件包含了直线,波浪线,三角形,矩形,圆形,八角形以及环线等多种形状.直线图形 ...

babel-预设和插件

babel-预设和插件相关推荐

最新文章

热门文章