Как заставить библиотеку компонентов реагировать на сбор вишни, например, loda sh & date / fns - PullRequest
Новая
       42

Как заставить библиотеку компонентов реагировать на сбор вишни, например, loda sh & date / fns

1 голос
/ 25 марта 2020

Я создал одну маленькую библиотеку, которая включает в себя 20-25 различных компонентов, и создал пакет npm.

Мой проект реагирования, где я хочу использовать эти компоненты, имеет много страниц [маршрутов]. использовалась отложенная загрузка, поэтому каждая страница имеет свой собственный пакет.

, но когда я пишу заявление на моей домашней странице [App.js]. 

    import { MyModal } from 'my-react-lib';

каждый компонент загружается в пакет домашней страницы. так что мои начальные показатели загрузки хуже. [Первоначальный размер пакета 2 МБ]

Я прочитал концепцию встряхивания дерева и попытался реализовать событие в веб-пакете и даже с накоплением, но они делают только пакет. js, но не в соответствии с требованиями шахты.

Я готов добиться сбора урожая вишни, как импорт-экспорт. как и date-fns & loda sh. 

      import format from 'date-fns/format';
      import debounce from 'lodash/debounce';

как этого добиться? 

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';

Ответы [ 2 ]

2 голосов
/ 29 марта 2020

Накопительный пакет позволяет вам разбить вашу библиотеку на несколько независимых кусков . Вы должны предоставить объект, сопоставляющий имена с точками входа, свойству input конфигурации объединения. Выглядит это так: 

input: {
    index: 'src/index.js',
    theme: 'src/Theme',
    badge: 'src/components/Badge',
    contentCard: 'src/components/ContentCard',
    card: 'src/elements/Card',
    icon: 'src/elements/Icon',
    ...

src/index.js выглядит так: 

export { default as Theme } from './Theme'
export { default as Badge } from './components/Badge'
...

Посмотрите документацию накопительного пакета: https://rollupjs.org/guide/en/#input

Выход устанавливается в каталог: 

output: [
  {
    dir: 'dist/es',
    format: 'es',
  },
],

Затем вы объявляете точку входа в вашем пакете. json следующим образом: 

"module": "dist/es/index.js",

Модули вашей библиотеки могут быть импортированы: 

import { Theme, Badge } from 'your-component-library'
1 голос
/ 25 марта 2020

Вам может потребоваться упаковать их отдельно.

Например, Material-UI , его много. Когда мы используем его обычным образом 

npm install @material-ui/core

Если вы посмотрите на их источник , вы обнаружите, что существует несколько пакетов, каждый со своим собственным package.json файлом

Например, @ material-ui / core pacakge. json

{
  "name": "@material-ui/core",
  "version": "4.9.7",
  "private": false,
  "author": "Material-UI Team",
  ...
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "@material-ui/styles": "^4.9.6",
    "@material-ui/system": "^4.9.6",
    "@material-ui/types": "^5.0.0",
    "@material-ui/utils": "^4.9.6",

Это означает, что они фактически разделены и имеют зависимости с друг друга.

Ну вот и сфера.

...