在另一React应用中复用组件遇模块导入及方法访问问题求助

问题根源 #

你遇到的问题本质是：

• CRA默认打包产出的是浏览器端的IIFE（立即执行函数），不是标准ES模块，所以TypeScript会报错“不是模块”
• 手动套export function initApp()后，sendGreetings是initApp函数内部的局部变量，外部无法直接访问

可行解决方案 #

方案1：修改CRA打包配置，输出可导入的ES模块 #

CRA默认隐藏webpack配置，我们可以用react-app-rewired来修改：

1. 安装依赖：

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

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

   const { override, adjustWebpackConfig } = require('customize-cra');
   
   module.exports = override(
     adjustWebpackConfig((config) => {
       // 配置输出为ES模块，并指定导出的模块名
       config.output.library = 'AppModule';
       config.output.libraryTarget = 'module';
       // 启用ES模块输出
       config.experiments = { ...config.experiments, outputModule: true };
       return config;
     })
   );
   

3. 修改package.json的scripts：

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

4. 重新执行npm run build，产出的main.*.js就是标准ES模块，可直接导入：

   import { AppModule } from './path/to/main.*.js';
   console.log(AppModule.sendGreetings({ greeting: 'World' }));
   

方案2：手动改造打包后的IIFE文件 #

如果不想修改CRA配置，直接修改打包后的文件，将内部模块暴露为导出对象：
替换原来的IIFE代码为：

export const AppModule = (function() {
  "use strict";
  const module = {};
  module.sendGreetings = function({ greeting }) {
    return `Hello ${greeting}`;
  };
  return module;
})();

之后就可以正常导入并访问AppModule.sendGreetings：

import { AppModule } from './main.783e0281.js';
AppModule.sendGreetings({ greeting: 'Stack Overflow' });

方案3：打包为UMD格式（兼容模块与全局变量） #

如果需要同时支持模块导入和全局访问，可配置CRA输出UMD格式：
在config-overrides.js中修改：

const { override, adjustWebpackConfig } = require('customize-cra');

module.exports = override(
  adjustWebpackConfig((config) => {
    config.output.library = 'AppModule';
    config.output.libraryTarget = 'umd';
    return config;
  })
);

打包后：

• 作为模块导入：import { AppModule } from './main.*.js';
• 浏览器全局访问：window.AppModule.sendGreetings(...)

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