Как вывести NPM пакетов с одноранговыми зависимостями, которые допускают выборочный импорт? - PullRequest
Новая
       68

Как вывести NPM пакетов с одноранговыми зависимостями, которые допускают выборочный импорт?

0 голосов
/ 28 апреля 2020

Я публикую модуль, который использует несколько одноранговых зависимостей:

В моем пакете. json файл, который я объявляю peerDependencies: 

...
"peerDependencies": {
  "react": ">=16",
  "react-dom": ">=16",
  "@material-ui/core": ">=4",
  "@material-ui/icons": ">=4"
},
...

И в моем веб-пакете я объявляю внешние наряду с выходным форматом commonjs2 (я совсем не уверен, почему бы использовать commonjs2 вместо commonjs): 

...
output: {
  filename: 'index.js',
  libraryTarget: 'commonjs2',
  path: path.join(__dirname, output),
},
externals: {
  react: 'react',
  'react-dom': 'react-dom',
  '@material-ui/core': '@material-ui/core',
  '@material-ui/icons': '@material-ui/icons',
},
...

Кажется, что работает, что я вижу внешние НЕ включены в выходной файл. Однако, включение вывода этого пакета в мой проект приводит к НАМНОГО большему размеру пакета.

Я думаю, это потому, что вывод пакета преобразует мои операторы import в операторы require, так что в моем В проекте, в котором я использую этот пакет, одноранговые зависимости, определенные как операторы require, не могут быть оптимизированы.

Другими словами, вывод пакета вместо включения библиотеки @material-ui/core как части сборка вместо этого будет ссылаться на него как require('@material-ui/core')

Это правильно?

Как правильно упаковать зависимости между равноправными узлами, чтобы a)

  1. Они придерживаться общего формата модуля js (это необходимо)?
  2. Непрямой импорт зависимостей одноранговых узлов все еще может быть выборочным?

Я ДУМАЮ (но могу ошибаться), что в данный момент происходит следующее: 

// In my project where I consume the package
import { Thing } from '@org/package-name'

// And in @org/package-name` source code, I have
import { Card } from '@material-ui/core'

// Which gets transpiled to (more or less)
require('@material-ui/core').Card

// Which means that when I use "Thing", that I'm loading the whole of @material-ui/core

Я также пытался настроить babel с babel-plugin-transform-imports. Но я нахожу, что тогда мне придется настраивать одноранговые зависимости / внешние компоненты для каждого импорта (@material-ui/core/Card, @material-ui/core/List, et c. Et c.)

...