babelRelayPlugin、transform-runtime、passPerPreset 有啥作用？ （babel+webpack 配置）

Posted 2023-03-08

【中文标题】babelRelayPlugin、transform-runtime、passPerPreset 有啥作用？ （babel+webpack 配置）

【英文标题】：What does babelRelayPlugin, transform-runtime, passPerPreset do? (babel+webpack configuration)babelRelayPlugin、transform-runtime、passPerPreset 有什么作用？ （babel+webpack 配置）

【发布时间】：2017-08-07 13:49:39

【问题描述】：

我是 Relay 的新手，我正在查看它的 babel+webpack 配置，不知何故我需要帮助来理解它的 .babelrc - 这是代码：

  "passPerPreset": true,
  "plugins": [
    "transform-runtime"
  ],
  "presets": [
    
      "plugins": [
        "./build/babelRelayPlugin"
      ]
    ,
    "react",
    "es2015",
    "stage-0"
  ]

这是 babelRelayplugin.js 上的代码，虽然很短，但我需要帮助理解：

const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('../data/schema.json');

module.exports = getBabelRelayPlugin(schema.data);

我了解预设上的“react”，“es2015”，“stage-0”，babel将代码转换为浏览器可以理解的js。我已经完成了我的搜索，这是我拥有的信息，我不明白并感到困惑：

babelRelayPlugin - Relay 使用 babel 插件从 Relay.QL 转换 将字符串模板转换为描述每个查询的 javascript 代码和 包括来自 GraphQL 架构的数据。 passPerPreset:true - 将修改 babel 遍历的方式 插件。而不是所有插件/预设的单一遍历 合并在一起，每个预设都会得到自己的遍历。（这是什么意思？） "plugins": ["transform-runtime"] - 所有助手都会引用 模块 babel-runtime 以避免在你编译的过程中重复 输出。运行时将编译到您的构建中

如果有人帮助我了解这些是什么以及它们的作用，我将不胜感激。

【参考方案1】：

我建议您阅读 Relay 存储库的this issue，以及其中包含的链接。