Webpack引入同构TypeScript库时出现「导出未找到」警告排查

出现该警告的核心原因是模块解析歧义：

• 仅通过browser/main/types字段配置入口，Webpack等工具在解析模块时无法明确关联不同环境的代码文件与类型文件，导致解析过程中误判模块无导出。
• 旧版模块解析逻辑存在优先级问题，即使浏览器应用应该加载browser字段指定的文件，Webpack在某些阶段仍可能解析到不符合预期的入口，触发导出缺失警告。

1. 完善package.json的exports字段 #

在myLib/package.json中添加exports字段，明确指定不同环境的入口路径（保留原browser/main/types字段做向下兼容）：

"exports": {
  ".": {
    "browser": "./dist/browser.js",
    "node": "./dist/node.js",
    "types": "./dist/types.d.ts"
  }
},
"main": "./dist/node.js",
"browser": "./dist/browser.js",
"types": "./dist/types.d.ts"

该字段会给Webpack等工具明确的模块解析规则，消除环境入口的歧义。

2. 确保Webpack打包产物正确导出 #

修改myLib/webpack.config.js的output配置，使用UMD格式打包，兼容多种模块系统：

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist'),
  library: {
    name: 'myLib',
    type: 'umd'
  },
  clean: true
}

UMD格式会确保代码在CommonJS、AMD、全局变量等场景下都能正确导出myFunc，避免Webpack解析时判定模块无导出。

3. 验证类型声明文件完整性 #

确认myLib/dist/types.d.ts包含正确的导出声明：

export declare function myFunc(input: string): string;

若类型文件未正确生成，检查myLib/tsconfig.json的include和declaration配置，确保src/common/types.ts的类型被正确合并到声明文件中。

4. 重新构建验证 #

按原步骤重新构建库和应用：

npm install @microsoft/rush
rush install
rush update
cd myLib
rushx build
cd ../myApp
rushx build

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