无法从WebPack打包的JavaScript文件中导入类，寻求技术帮助

1. 确保Webpack输出ES模块格式 #

浏览器的type="module"脚本仅支持ES模块导入，而Webpack默认输出的是IIFE或CommonJS格式，这会导致导入失败。修改你的webpack.config.js，配置输出ES模块：

module.exports = {
  entry: './client.js',
  output: {
    filename: 'main.js',
    path: __dirname + '/dist',
    // 指定输出为ES模块
    library: {
      type: 'module',
    },
  },
  // 启用ES模块输出实验特性（Webpack 5+需要）
  experiments: {
    outputModule: true,
  },
  mode: 'development', // 或 'production'
};

2. 统一使用ES模块语法 #

你的client.js混用了require和export default，虽然Webpack能处理，但统一使用ES模块语法更稳妥，避免潜在问题：

// 替换require为import
import { HelloRequest, HelloReply } from './greet_pb.js';
import { GreeterClient } from './greet_grpc_web_pb.js';

export default class Greeter {
    HelloRequest = HelloRequest;
    HelloReply = HelloReply;
    GreeterClient = GreeterClient;
}

3. 验证打包后的导出正确性 #

重新执行webpack打包命令，打开dist/main.js文件，确认文件末尾存在类似以下的导出语句：

export default Greeter;

如果没有，检查Webpack配置是否生效，或升级到Webpack 5（Webpack 4对ES模块输出支持有限）。

4. 正确在HTML中导入并测试 #

确保HTML中的脚本路径正确，并且添加测试代码验证功能：

<!DOCTYPE html>
<html>
<head>
  <title>gRPC-Web Test</title>
</head>
<body>
  <script type="module">
    // 导入打包后的模块
    import Greeter from './dist/main.js';

    // 初始化客户端并发起请求
    const client = new Greeter.GreeterClient('http://localhost:8080');
    const request = new Greeter.HelloRequest();
    request.setName('World');

    client.sayHello(request, {}, (err, response) => {
      if (err) {
        console.error('请求失败:', err);
      } else {
        console.log('响应:', response.getMessage());
      }
    });
  </script>
</body>
</html>

5. 排查其他可能问题 #

• 确认已安装@grpc/grpc-web依赖：执行npm install @grpc/grpc-web，确保gRPC-Web的运行时被打包进输出文件。
• 检查浏览器控制台错误：如果导入失败，打开浏览器开发者工具的Console面板，查看具体错误信息（比如路径错误、模块导出不存在等）。
• 避免直接导入未打包的client.js：浏览器原生不支持require语法，直接导入会报错，必须使用Webpack打包后的文件。

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