reactjs - 我如何 `npm link` 与对等依赖项的 typescript 依赖项？

Question

我有一个 React/Redux typescript 项目 A。我的团队决定将一些 React 组件和 Redux 代码拆分到一个 NPM 模块中，因此我创建了另一个 React/Redux TS 项目 B。

最初，当我尝试从 A 安装 B 时，由于类型重新声明而出现错误，因为 A 和 B 都依赖于相同的类型声明文件(react、redux 等)。所以我将 B 的所有 @types 依赖项都移动为对等依赖项。这使我能够从 A 正确安装 B。

但是，出于开发目的，我想从 A npm link 到 B，这样我就不必经常重新编译和重新安装 B。但是因为 npm link 创建一个符号链接(symbolic link)，它指向整个 B 项目，包括我需要避免的类型定义。

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

Answer 1

这个问题与 typescript 没有特别的关系，而是一个关于如何将两个 javascript 包链接在一起并防止库多次加载的一般问题。如何解决这个问题的一个重要因素取决于您使用的构建/ bundler 。我觉得这个stackoverflow answer如果您只关心重复数据删除 react ，那就太好了。

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

首先要确保您的子包中的任何共享依赖项都是 devDependencies 和 peerDependencies，并且您的父包将它们设置为所需的依赖项和 devDependencies。

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
}