VS2017中React共享组件TypeScript项目架构及热重载问题求助

我之前刚好碰到过和你几乎一模一样的场景——VS里的类库项目要生成TS接口，还要跨项目共享，同时保留热重载，试了npm link、文件复制各种坑，终于摸索出几个可行的办法：

方案1：统一根目录TS配置（最省心的基础方案） #

这个方案从根源上解决TS2339这类配置冲突问题，同时完美保留热重载：

• 把SharedComponents里的package.json、tsconfig.json、tslint.json全部迁移到解决方案根目录（也就是和.sln同层级的/src文件夹下），让三个项目共享一套TypeScript配置，避免模块扩充时的解析差异。
• 在PublicClient和Admin的tsconfig.json中，通过include字段引入SharedComponents的TS文件路径：

  "include": [
    "./src/**/*",
    "../SharedComponents/src/**/*"
  ]
  

• 热重载方面，webpack-dev-server会自动监听include范围内的所有文件改动，只要路径配置正确，修改SharedComponents里的任何文件，客户端项目的dev server都会立刻触发热重载。
• 补充：TypeLite的配置可以留在SharedComponents项目里，生成的TS接口直接输出到该项目的src目录，其他项目直接通过相对路径或别名引用即可。

方案2：webpack别名+TS路径映射（保留独立配置的折中方案） #

如果不想改动SharedComponents的独立配置结构，可以用这个方案：

• 在PublicClient和Admin的webpack配置中，给SharedComponents设置别名：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    resolve: {
      alias: {
        '@shared': path.resolve(__dirname, '../SharedComponents/src')
      }
    },
    watchOptions: {
      ignored: /node_modules/,
      // 监听SharedComponents目录的文件变化
      contentBase: path.resolve(__dirname, '../SharedComponents/src')
    }
  }
  

• 同时在两个客户端项目的tsconfig.json中添加paths配置，让TS编译器识别这个别名：

  "compilerOptions": {
    // ...其他配置
    "paths": {
      "@shared/*": ["../SharedComponents/src/*"]
    }
  }
  

• 这样既保留了SharedComponents的独立配置，又解决了模块解析错误，webpack-dev-server也能监听共享组件的文件变化，热重载正常工作。

方案3：Lerna多项目管理（适合长期维护的大型项目） #

如果你的项目后续会扩展更多子项目，Lerna能帮你更高效地管理依赖和脚本：

• 初始化Lerna后，把PublicClient、Admin、SharedComponents都放在packages目录下作为子包，在根目录的lerna.json里开启工作区模式：

  {
    "packages": ["packages/*"],
    "version": "independent",
    "useWorkspaces": true
  }
  

• 所有子包共享根目录的node_modules，彻底避免npm link带来的依赖移动问题。
• 配置统一的dev脚本，让启动dev server时同时监听所有子包的文件变化，热重载功能不受影响。TypeLite的生成脚本可以放在SharedComponents的package.json里，通过Lerna命令统一执行。

我当时最终用的是方案1，配置最简单，解决TS错误的同时完全保留了热重载，后续维护成本也很低。方案2适合不想改动原有项目结构的场景，方案3则更适合长期迭代的大型多项目架构。

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