自研NPM模块TypeScript未生效，引入应用后出现编译错误求助

错误原因 #

你的NPM模块发布的是未编译的TypeScript源文件，而安装该模块的应用的Webpack默认不会处理node_modules目录下的TS文件——因为常规NPM模块都会发布编译后的JS文件，所以应用的Webpack配置里TS loader通常会排除node_modules路径。当Webpack解析到你模块里的类型注解（比如const usersService: UsersService = ...里的: UsersService）时，识别不了这是TS语法，就会抛出解析错误。

解决方案 #

方案1：发布编译后的JS文件（推荐） #

这是NPM模块的标准做法，确保模块能在任何支持JS的环境运行：

• 在模块的tsconfig.json中配置编译输出：

  {
    "compilerOptions": {
      "outDir": "./dist", // 指定编译后文件输出目录
      "declaration": true, // 生成.d.ts类型声明文件
      "target": "ES6", // 或更低版本，根据目标环境调整
      "module": "CommonJS" // 或ESNext，对应模块系统
    },
    "include": ["src/**/*"] // 指定要编译的源文件路径
  }
  

• 运行tsc命令编译TS到JS，确保dist目录生成对应的文件
• 修改模块的package.json，指定入口文件和类型文件路径：

  {
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "files": ["dist"] // 只发布dist目录下的文件
  }
  

• 重新发布模块到NPM，应用安装新版本后即可正常加载编译后的JS文件

方案2：让应用的Webpack处理模块的TS文件 #

如果必须发布TS源文件，需要修改应用的Webpack配置，让TS loader处理你的模块：

• 调整Webpack配置中TS loader的规则，排除node_modules时跳过你的模块：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          // 排除node_modules，但不排除你的模块
          exclude: /node_modules(?!\/你的模块名)/,
          options: {
            transpileOnly: true // 可选，加快编译速度
          }
        }
      ]
    }
  };
  

• 确保应用已经安装了ts-loader、typescript等依赖（如果没有的话需要安装）

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