锅炉信息网 > 锅炉知识 > 锅炉学习

Babel 预设

发布时间:

本节我们来学习 Babel 中的预设 Presets。如果我们不想手动的组合插件,可以使用 preset 作为 Babel 插件的组合,或者共享 options

本节我们来学习 Babel 中的预设 Presets。如果我们不想手动的组合插件,可以使用 preset 作为 Babel 插件的组合,或者共享 options 配置。

Babel7.8 官方的插件和预设有一百多种,如果我们一个个学习那需要大量的时间。但是我们也没必要全部学习,因为在实际使用中,常用的预设和插件也只有那几个,我们重点掌握这些常用的即可,掌握后这样其他的插件和预设就变得简单啦。

官方Preset

官方针对常用的环境编写了一些 preset,如下所示:

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

这几个 preset 是社区维护的,可以通过 npm 命令下载。我们可以根据项目需要来下载使用,例如一个普通的 vue 项目,Babel 的官方预设中,只需要配一个 @babel/preset-env 就可以啦。

Stage-X实验预设

stage-x 预置中的语法转换会随着被批准为 JavaScript 新版本的组成部分而进行相应的改变(例如 ES6/ES2015)。

TC39 将提案分为以下几个阶段:

  • Stage 0 – 设想(Strawman):只是一个想法,可能有 Babel 插件。
  • Stage 1 – 建议(Proposal):这是值得跟进的。
  • Stage 2 – 草案(Draft):初始规范。
  • Stage 3 – 候选(Candidate):完成规范并在浏览器上初步实现。
  • Stage 4 – 完成(Finished):将添加到下一个年度版本发布中。

创建preset

如果我们需要创建一个自己的 preset,只需导出一份配置即可。

示例:

可以是一份插件数组,例如:

module.exports = function() {n return {n plugins: [n "pluginA",n "pluginB",n "pluginC",n ]n };n}n

preset 可以包含其他的 preset,以及带有参数的插件:

module.exports = () => ({n presets: [n require("@babel/preset-env"),n ],n plugins: [n [require("@babel/plugin-proposal-class-properties"), { loose: true }],n require("@babel/plugin-proposal-object-rest-spread"),n ],n});n

预设的路径

如果 preset 在 npm 上,我们可以输入 preset 的名称,babel 将检查是否已经将其安装到 node_modules 目录下:

{n "presets": ["babel-preset-myPreset"]n}

或者还可以指定指向 preset 的绝对或相对路径,如下所示:

{n "presets": ["./myProject/myPreset"]n}

Preset的短名称

如果 preset 名称的前缀为 babel-preset-,我们可以使用它的短名称,也就是省略 babel-preset- 前缀。

示例:

例如 babel-preset-myPreset 短名称为 myPreset:

{n "presets": [n "babel-preset-myPreset", // 相当于myPresetn "myPreset"n ]n}

这也适用于带有冠名(scope)的 preset:

{n "presets": [n "@org/babel-preset-name", // 相当于@org/namen "@org/name" n ]n}

Preset 的排列顺序

preset 是逆序排列的,也就是从后往前排序。

示例:

我们来看下面这个例子:

{n "presets": [n "a",n "b",n "c"n ]n}n

执行顺序为 c、b 、 a,从后往前。这主要是为了确保向后兼容,由于大多数用户将 "es2015" 放在 "stage-0" 之前。

Preset的参数

插件和 preset 都可以接受参数,参数由插件名和参数对象组成一个数组,可以在配置文件中设置。

如果不指定参数,下面这几种形式都是一样的:

{n "presets": [n "presetA",n ["presetA"],n ["presetA", {}],n ]n}n

要指定参数,请传递一个以参数名作为键(key)的对象,例如:

{n "presets": [n ["@babel/preset-env", {n "loose": true,n "modules": falsen }]n ]n}n

上一篇:Tage预测器

下一篇:Jmeter分布式压测

精选推荐

  • 催化燃烧设备供应商
    催化燃烧设备供应商

    催化燃烧设备供应商,催化燃烧处理装置厂家,本装置是采用废气先进入喷淋塔过滤——干式过滤—-蜂窝活性碳吸附—脱附再生——催化燃

  • 该不该有模具供应商
    该不该有模具供应商

    今天红姐又来跟我探讨供应商的管理问题了。故事是这样的:供应商来料不良,原因是模具问题。而那个模具是我们找的一家模具供应商做的

  • 什么牌子高压锅好,高压锅哪个牌子好,高压锅什么牌子好,高压锅哪个品牌好
    什么牌子高压锅好,高压锅哪个牌子好,高

    1苏泊尔 双重安全阀门 高压锅双重安全阀,防烫把手,复合底。这款高压锅拥有双重安全阀门,更好的保证使用安全。搭载防烫伤把手,方便起

  • 高压锅啥牌子好,高压锅哪个牌子的好,什么高压锅牌子好,高压锅推荐选购指南
    高压锅啥牌子好,高压锅哪个牌子的好,什

    1、双喜阶梯型复底高压锅推荐理由:高压锅满足上蒸下煮,饭菜同时进行,方便快速,有效提升烹饪效率。多重安全防护,安全系数较高,家人使用

0