TypeScript+Webpack模块开发：如何用npm link实现实时重载？

当然可行！不用每次手动执行npm run build就能实时看到代码变更的效果，我来给你梳理清楚怎么解决这个问题，还有你关心的测试项目是否需要转TypeScript的疑问：

为什么设置"module": "src/index.ts"会报错？ #

你之前尝试把module字段指向源TS文件时出现找不到模块的错误，核心原因是你的测试项目是纯JavaScript项目，无法直接解析TypeScript文件。浏览器或Node.js默认只能识别JS代码，TS文件必须经过编译转译才能被加载，所以直接引用TS源文件会导致模块解析失败。

两种实现实时重载的方案 #

方案一：类库开启实时编译，指向开发态输出（无需修改测试项目为TS） #

这种方案不用改动测试项目的技术栈，只需要调整类库的构建配置，让它自动监听代码变更并编译：

• 给类库的Webpack添加开发模式配置，启用watch模式，输出到一个专门的开发目录（比如dev-lib），同时开启source map方便调试。
• 在类库的package.json里新增一个开发脚本：

  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack --mode=development --watch"
  }
  

• 临时修改类库package.json的main字段，指向开发目录的输出文件："main": "dev-lib/qr-code-styling.js"
• 启动类库的开发脚本：npm run dev，之后你修改类库的TS代码，Webpack会自动编译到dev-lib目录
• 测试项目这边，用live-server或者自身的开发服务器（比如Webpack Dev Server）启动，当类库的dev-lib文件更新时，测试项目会自动重载页面。

方案二：将测试项目改为TypeScript，直接引用类库源文件 #

如果愿意把测试项目转为TS，这种方案更直接，无需类库提前编译：

• 给测试项目安装TypeScript相关依赖：npm install typescript ts-loader --save-dev
• 配置测试项目的tsconfig.json，通过paths字段把类库包名指向其源文件目录：

  {
    "compilerOptions": {
      "target": "ES5",
      "module": "ESNext",
      "paths": {
        "qr-code-styling": ["../qr-code-styling/src"]
      }
    }
  }
  

• 在测试项目的Webpack配置中，使用tsconfig-paths-webpack-plugin来解析上述路径配置，或者直接添加resolve.alias：

  const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  
  module.exports = {
    // ...其他配置
    resolve: {
      plugins: [new TsconfigPathsPlugin()]
    }
  }
  

• 现在测试项目里import QRCodeStyling from 'qr-code-styling'会直接指向类库的TS源文件，修改类库代码后，测试项目的开发服务器会自动感知并重载。

额外注意事项 #

• 用方案一的话，开发完成后记得把类库package.json的main字段改回原来的lib/qr-code-styling.js，避免发布错误。
• 确保类库的tsconfig.json配置了正确的target和module，保证编译后的代码能被测试项目兼容。
• 类库的依赖如果是测试项目也需要的，可以设为peerDependencies，避免重复安装依赖包。

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