无法通过Babel与Webpack转译React组件求助

问题根源 #

1. Babel配置冲突：同时存在babel.config.js和.babelrc，两个配置的presets未合并，导致ES语法转译与React JSX转译无法同时生效。
2. Webpack未配置导出规则：生产模式下Webpack默认会优化打包结果，若未指定library配置，组件不会被暴露到全局或作为模块导出，导致外部无法调用。

修复步骤 #

1. 合并Babel配置 #

删除.babelrc文件，将@babel/preset-env合并到babel.config.js中，确保同时处理ES语法和React JSX：

// babel.config.js
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    [
      "@babel/preset-react",
      {
        "throwIfNamespace": false,
        "runtime": "automatic"
      }
    ]
  ]
}

2. 修改Webpack配置，添加Library设置 #

在output中添加library相关配置，根据需求选择导出方式：

• 全局变量导出（适合在HTML中直接通过window调用）：

// webpack.config.js
output: {
  path: path.resolve(__dirname, 'js'),
  filename: '[name].bundle.js',
  clean: true,
  library: {
    name: 'HelloWorld', // 全局变量名称
    type: 'window' // 导出到window对象
  }
},

• 模块导出（适合在其他JS文件中通过import引入）：

// webpack.config.js
output: {
  path: path.resolve(__dirname, 'js'),
  filename: '[name].bundle.js',
  clean: true,
  library: {
    type: 'module'
  },
  experiments: {
    outputModule: true // 启用ES模块输出
  }
},

3. 验证组件调用方式 #

• 全局调用（HTML中）：

<script src="./js/firstcomponent.bundle.js"></script>
<script>
  ReactDOM.createRoot(document.getElementById('root')).render(
    React.createElement(HelloWorld)
  );
</script>

• 模块调用（其他JS文件）：

import HelloWorld from './js/firstcomponent.bundle.js';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(<HelloWorld />);

4. 重新构建 #

执行构建命令：

npm run build

额外说明 #

• 开发模式下Webpack不会做激进的tree-shaking，组件可能临时导出，但无正确library配置依然无法稳定调用。
• 确保已安装所有必要依赖：@babel/core、babel-loader、@babel/preset-env、@babel/preset-react、react、react-dom、webpack、webpack-cli。

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