我如何`npm链接'与对等依赖关系的打字稿依赖？

Question

我有一个React/Redux打字稿项目A.我的团队决定将一些React组件和Redux代码拆分成一个NPM模块,所以我创建了另一个React/Redux TS项目B.

最初,当我尝试从A安装B时,由于类型重新声明,我得到了错误,因为A和B都依赖于相同类型的声明文件(react,redux等).所以我将B的所有@types依赖项都移动为对等依赖项.这允许我从A正确安装B.

但是,出于开发目的,我想npm link从A开始B,所以我不必经常重新编译并重新安装B.但是因为npm link创建了一个符号链接,它指向整个B项目,包括我需要的类型定义避免.

有谁知道如何解决这个难题？

Answer 1

这个问题与 typescript 没有特别关系，而是如何将两个 javascript 包链接在一起并防止库多次加载的普遍问题。如何解决这个问题的一个重要因素取决于您使用的构建/捆绑器。我认为如果你只关心重复数据删除反应，这个stackoverflow 答案非常好。

下面是一个使用 webpack 解决这个问题的例子。

第一件事是确保子包中的任何共享依赖项都是 devDependency 和 peerDependency，并且父包将它们设置为所需的依赖项和 devDependency。

A-package.json

{
  "dependencies": {
    "B": "1.0.0",
    "react": "x.x.x",
  },
  "devDependencies": {
    "@types/react": "x.x.x"
  }
}

B-package.json

{
  "version": "1.0.0",
  "peerDependencies": {
    "@types/react": "x.x.x",
    "react": "x.x.x"
  },
  "devDependencies": {
    "@types/react": "x.x.x",
    "react": "x.x.x"
  }
}

如果您从包 A 运行 webpack，则需要确保仅在适用时从包 A 的 node_modules 解析 node_modules。

const path = require('path')
module.exports = {
  // rest of your webpack condig...
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
  }
}

这也是另一个使用react-app-rewired的解决方案，它可以做同样的事情

const path = require('path')
module.exports = function override(config) {
  config.resolve = Object.assign({}, config.resolve, {
    modules: [path.resolve(__dirname, 'node_modules'), ...config.resolve.modules]
  })

  return config
}