自定义npm包shared-header引入时JSX语法Babel编译错误解决

核心原因 #

问题出在共享包未预编译。react-scripts（底层webpack）默认仅编译项目自身src目录的代码，不会处理node_modules中的第三方包代码。你的shared-header包中未转译的JSX代码，在pricing-project构建时会被当成普通JS解析，触发语法错误。

方案一：预编译共享包（推荐，多团队共享场景首选） #

让共享包本身输出编译后的代码，其他引入方无需额外配置：

• 1. 在shared-header项目安装babel依赖：

  npm install --save-dev @babel/core @babel/cli @babel/preset-react
  

• 2. 在shared-header根目录创建.babelrc配置文件：

  {
    "presets": ["@babel/preset-react"]
  }
  

• 3. 修改shared-header的package.json：
  • 添加编译脚本到scripts：

    "scripts": {
      "build": "babel src --out-dir dist"
    }
    

  • 将入口字段main指向编译后的目录：

    "main": "dist/index.js"
    

• 4. 执行编译并发布/使用：

  npm run build
  

  本地开发可通过npm link测试，发布时确保dist目录被包含在npm包中（检查.npmignore，不要排除dist）。

方案二：让业务项目编译共享包代码（仅本地开发临时用） #

如果不想预编译共享包，可通过react-app-rewired修改pricing-project的webpack配置，让babel处理shared-header的代码：

• 1. 安装依赖：

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

• 2. 在pricing-project根目录创建config-overrides.js：

  const { override, babelInclude } = require('customize-cra');
  const path = require('path');
  
  module.exports = override(
    babelInclude([
      path.resolve('src'), // 保留自身项目代码的编译
      path.resolve('../shared-header/src') // 本地开发时指向共享包的src目录；如果是npm安装的包，改为path.resolve('node_modules/shared-header/src')
    ])
  );
  

• 3. 修改pricing-project的package.json脚本，替换react-scripts为react-app-rewired：

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

• 4. 重启pricing-project的开发服务即可生效。

为什么之前的配置无效？ #

• pricing-project中的babel配置仅作用于自身src目录代码，webpack不会默认处理node_modules里的包。
• shared-header的babel配置只是开发阶段的工具配置，npm包不会自动执行编译，必须手动编译并指定编译后的入口文件。

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