同一项目能否配置两个.babelrc文件？React与Preact共存场景

当然可以实现！既然你同时在用React和Preact，而且需要针对Wishlist目录单独启用Preact的pragma: "preact.h"配置，结合你用Webpack构建+Gulp做任务管理的技术栈，有两种靠谱的方案可以选：

方案1：通过Webpack规则拆分Babel配置（推荐，兼容所有Babel版本） #

这种方式不需要修改全局.babelrc，而是在Webpack里给Wishlist目录单独配置Babel loader，实现差异化处理：

1. 打开你的webpack.config.js，添加两个Babel规则：一个处理全局文件，一个专门处理Wishlist下的文件：

module.exports = {
  // ...其他Webpack配置（entry、output等）
  module: {
    rules: [
      // 全局JS文件的Babel规则（排除Wishlist）
      {
        test: /\.js$/,
        exclude: [/node_modules/, /Wishlist\/.*/], // 把Wishlist排除在外
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["env"],
            ignore: [ "**/what-input.js", "**/HostedPCIAdapter.js", "InstantPreview/**/*.js" ],
            plugins: [ "transform-object-rest-spread", "transform-react-jsx" ]
          }
        }
      },
      // 专门针对Wishlist的Babel规则
      {
        test: /\.js$/,
        include: /Wishlist\/.*/, // 只匹配Wishlist目录下的JS文件
        use: {
          loader: 'babel-loader',
          options: {
            sourceMaps: true,
            plugins: [
              ["transform-react-jsx", { "pragma": "preact.h" }], // 启用Preact的pragma
              "transform-object-assign",
              ["transform-es2015-classes", { "loose": true }],
              "transform-es2015-arrow-functions",
              "transform-es2015-block-scoping",
              "transform-es2015-template-literals"
            ]
          }
        }
      }
    ]
  }
};

2. 确保你的Gulp任务正确调用这个Webpack配置，比如用webpack-stream的任务：

const gulp = require('gulp');
const webpack = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');

gulp.task('build-js', () => {
  return gulp.src('src/**/*.js')
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest('dist'));
});

这样Webpack会自动给Wishlist下的文件用Preact的JSX编译规则，其他文件保持React的配置不变。

方案2：用Babel的Overrides配置（Babel 7+适用） #

如果你的项目用的是Babel 7或更高版本，可以直接在.babelrc里用overrides字段，给特定路径设置单独的插件：

修改你的.babelrc如下：

{
  "presets": ["env"],
  "ignore": [ "**/what-input.js", "**/HostedPCIAdapter.js", "InstantPreview/**/*.js" ],
  "plugins": [ "transform-object-rest-spread", "transform-react-jsx" ],
  "overrides": [
    {
      "test": "./Wishlist/**/*.js", // 匹配Wishlist下的所有JS文件
      "sourceMaps": true,
      "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"
      ]
    }
  ]
}

这个方案把所有配置集中在.babelrc里，更整洁，但需要Babel版本支持overrides特性（Babel 7开始才有）。

最后注意点 #

• 记得在Wishlist的组件文件里正确导入Preact：import { h } from 'preact';（或者确保preact.h全局可用，不过局部导入更规范）。
• 如果用的是Babel 6，方案1是唯一可行的，因为Babel 6不支持overrides。

内容的提问来源于stack exchange，提问作者Sean