从node_modules导入enum时Webpack Encore编译失败如何解决？

架构老林

2026-9-26

问题根源

Webpack Encore 的默认 TypeScript Loader 配置会自动排除所有 node_modules 目录下的文件，因此你导入自研库src目录下的TS枚举时，loader不会处理该文件，才会误报要求添加enableTypeScriptLoader()。
导入同库interface正常是因为interface是纯类型定义，TS编译阶段会直接擦除，不需要生成实际运行代码，不需要loader额外处理即可生效；而enum会被编译为实际的JS对象，必须经过ts-loader处理才能被识别。

可行解决方案

分两种方案，优先推荐优化公共库配置的方式：

方案1（推荐）：优化自研库的Rollup打包配置

依赖库本身应当提供编译完成的可执行代码，而非让业务项目编译源码，操作如下：

调整Rollup配置，打包时同步输出编译后的JS产物，以及对应的.d.ts类型声明文件

在自研库的package.json中配置正确的入口字段：

{
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts"
}

业务项目中无需再导入src下的源码，直接从库根导入即可：
```
import { MyEnum } from 'myLibrary';
```
这种方式导入的是预编译好的JS文件，不需要业务项目额外处理TS，从根源避免了报错。

方案2（临时适配）：调整业务项目的Webpack Encore配置

如果暂时无法修改公共库配置，可以手动调整ts-loader的排除规则，将你的自研库设为例外：
修改webpack.config.js中的enableTypeScriptLoader配置：

Encore.enableTypeScriptLoader((tsConfig) => {
  // 原默认规则为排除所有node_modules文件，修改为排除除自研库外的node_modules文件
  tsConfig.exclude = /node_modules\/(?!myLibrary)/
})

将配置中的myLibrary替换为你的自研库在node_modules中的文件夹名称即可，配置生效后ts-loader会正常处理该库下的TS文件。