Как я могу связать зависимость "npm link" a typescript с одноранговыми зависимостями?

У меня есть проект React/Redux typescript A. Моя команда решила разделить часть компонентов React и код Redux в модуле NPM, поэтому я создал еще один проект B проекта React/Redux.

Изначально, когда я пытался установить B из A, у меня возникли ошибки из-за переоценок типов, поскольку оба A и B зависят от файлов объявлений того же типа (реакция, сокращение и т.д.). Поэтому я переместил все зависимости B @types как одноранговые зависимости. Это позволяет мне правильно установить B из A.

Однако для целей разработки я хотел бы npm link от B от A, поэтому мне не приходится постоянно перекомпилировать и повторно установить B. Но поскольку npm link создает символическую ссылку, он указывает на весь проект B, включая определения типов, которые мне нужно избегать.

Ответы

Ответ 1

Эта проблема не связана, в частности, с машинописным шрифтом, но является общей проблемой того, как связать два пакета javascript вместе и предотвратить загрузку библиотек несколько раз. Решающий фактор зависит от того, какую сборку/компоновщик вы используете. Я думаю, что этот ответ на стекопоток довольно хорош, если вы заботитесь только о реакции дедупликации.

Вот пример решения этой проблемы с помощью веб-пакета.

Прежде всего, убедитесь, что любые общие зависимости в вашем дочернем пакете являются 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, вам нужно обязательно разрешить node_modules, если это применимо только из пакета A node_modules.

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

Вот еще одно решение, использующее response-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
}