我可以在一个项目中有 2 个 babelrc 文件吗？答案

【问题标题】：Can I have 2 babelrc files in one project?我可以在一个项目中有 2 个 babelrc 文件吗？
【发布时间】：2018-11-05 22:47:45
【问题描述】：

我正在尝试将 react 添加到一个非常大的解决方案中，但站点上的一个组件使用了 preact。我当前的 .bablerc 是

{
  "presets": ["env"],
  "ignore": [
      "**/what-input.js",
      "**/HostedPCIAdapter.js",
      "InstantPreview/**/*.js",
      "Wishlist/**/*.js"
    ],
  "plugins": [
    "transform-object-rest-spread",
    "transform-react-jsx"
  ]
}

原始 .baberc 看起来像这样：

{
"sourceMaps": true,
"presets": [],
"plugins": [
[
    "transform-react-jsx",
{
    "pragma": "preact.h"
} 
],
"transform-object-assign",
[
    "transform-es2015-classes",
    {
        "loose": true 
    }
],
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-template-literals"
]

}

那么我可以只为愿望清单功能添加 pragma 吗？任何帮助，将不胜感激。我使用 gulp 作为 taskrunner 和 webpack 来构建我的资产。

【问题讨论】：

你试过了吗？应该不是问题，具体取决于构建方式，但当然也有解决方法
但是我不需要它们都放在根目录吗？我想我可以制作一个 bable rc 生成脚本，但是 react 是用 gulp-webpack 构建的，而 preact 是通过 gulp-babel 构建的。我很想更新 preact 代码以做出反应，但在我的截止日期前工作量太大。
确保将它们都放在根目录上，只是不要将它们完全命名为.babelrc。您不需要花哨的脚本，只需在构建之前cp .preact.babelrc .babelrc 或其他东西。再次，这种取决于您的构建管道的预期，但这对我来说似乎很容易
gulp 按顺序运行...只需直接在您的 gulpfile 中重命名文件，然后重命名另一个，然后删除末尾的 .babelrc 进行清理
如果您发布您的 gulpfile，向您展示我的简单解决方案可能会更容易

标签： javascript reactjs babeljs preact

【解决方案1】：

Babel 文件可以嵌套在具有独特设置的子目录中，这是非常酷的东西。

如果你有这样的文件夹结构：

app
    reactCode
        .babelrc
        index.js
    preactCode
        .babelrc
        index.js

你可以为分支添加一个单独的 .babelrc 文件。我认为这并不理想，但如果您正在使用具有许多不同框架和要求的大型整体解决方案，它肯定可以修复许多错误和 QA 工作。

【讨论】：