在Create React App v5中使用PixiJS v7.x.x时遭遇Webpack+Babel插件错误

使用Create React App v5.0.1 + PixiJS v7.0.4启动项目时，出现如下编译错误：

ERROR in ./node_modules/@pixi/core/lib/textures/resources/ImageBitmapResource.mjs
提示使用@babel/plugin-transform-parameters时，箭头函数中的super()需配合@babel/plugin-transform-classes编译类。

直接安装上述Babel插件无法解决问题，降级到PixiJS v6.5.8可正常运行，以下是适配v7.x.x的解决方案：

方案一：使用Craco修改Babel配置 #

Craco是无需eject即可修改Create React App配置的工具，操作步骤如下：

1. 安装依赖

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js文件，添加配置：

module.exports = {
  babel: {
    plugins: ["@babel/plugin-transform-classes", "@babel/plugin-transform-parameters"],
    loaderOptions: {
      // 取消排除node_modules，确保PixiJS代码被Babel处理
      exclude: false
    }
  }
};

3. 修改package.json中的启动脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 重新启动项目：

npm start

方案二：使用react-app-rewired + customize-cra #

这是另一套无需eject的CRA配置修改方案：

1. 安装依赖

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件：

const { override, addBabelPlugins } = require("customize-cra");

module.exports = override(
  addBabelPlugins("@babel/plugin-transform-classes", "@babel/plugin-transform-parameters"),
  // 配置Webpack仅转译@pixi开头的node_modules包
  (config) => {
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneRule => {
          if (oneRule.test && oneRule.test.toString().includes("js|mjs|jsx")) {
            oneRule.exclude = /node_modules\/(?!@pixi)/;
          }
        });
      }
    });
    return config;
  }
);

3. 修改package.json中的脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 重启项目即可。

原因说明 #

Create React App v5默认跳过node_modules目录的Babel转译，而PixiJS v7的部分核心模块使用了需要@babel/plugin-transform-classes和@babel/plugin-transform-parameters处理的类语法。直接安装插件无法生效是因为插件未作用到PixiJS的代码上，通过上述工具修改配置后，可让Babel处理PixiJS相关模块并加载所需插件，从而解决编译错误。

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