Babel编译create-react-app组件失败：仅复制代码未打包依赖

你的问题核心是Babel仅负责代码转译，不会处理依赖打包——它只会把JSX/ES6+语法转成浏览器兼容的代码，但不会把AccountComponent依赖的其他内部组件、第三方库（比如React）打包进输出文件里。下面是具体的修复步骤：

1. 替换Babel脚本为打包工具（推荐Rollup，配置更轻量化） #

安装Rollup及必要插件 #

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-babel @rollup/plugin-commonjs rollup-plugin-terser --save-dev

创建Rollup配置文件rollup.config.js #

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from 'rollup-plugin-terser';

export default {
  input: 'src/standalone/index.js',
  output: [
    // 输出ES模块（适配现代构建工具）
    {
      file: 'dist/account-component.esm.js',
      format: 'esm',
      sourcemap: true
    },
    // 输出UMD模块（适配浏览器直接引入或CommonJS环境）
    {
      file: 'dist/account-component.umd.js',
      format: 'umd',
      name: 'AccountComponent',
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      },
      sourcemap: true
    }
  ],
  external: ['react', 'react-dom'], // 标记React为外部依赖，由组件使用者自行提供
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    }),
    terser() // 可选，用于压缩代码体积
  ]
};

更新package.json的编译脚本 #

把原来的standalone脚本替换为：

"scripts": {
  "standalone": "rm -rf dist && rollup -c"
}

2. 完善package.json的发布配置（可选但关键） #

如果要将组件发布到npm或供其他项目引用，需添加以下字段，确保使用者的构建工具能正确识别：

"main": "dist/account-component.umd.js",
"module": "dist/account-component.esm.js",
"peerDependencies": {
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}

• peerDependencies：声明组件依赖的React版本范围，避免使用者项目中出现多个React实例。

3. 验证打包结果 #

执行npm run standalone后，dist目录会生成两个文件：

• account-component.esm.js：供Vite、Webpack 5等现代构建工具导入使用
• account-component.umd.js：可直接通过<script>标签在浏览器引入，或在Node.js环境中使用

此时打包后的文件会包含AccountComponent及其依赖的内部组件，同时将React等公共库标记为外部依赖，既保证组件可独立使用，又不会重复打包冗余代码。

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