Zrobiłem jedną małą bibliotekę, która zawiera 20-25 różnych komponentów i utworzyłem z niej pakiet npm.

Mój projekt React, w którym chcę użyć tych komponentów, ma wiele stron [tras] używających ładowania z opóźnieniem, więc każda strona ma swój własny pakiet.

Ale kiedy piszę oświadczenie na mojej stronie głównej [App.js].

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

Każdy komponent jest ładowany do pakietu strony głównej. więc moja początkowa wydajność ładowania jest gorsza. [Początkowy rozmiar pakietu 2 MB]

Przeczytałem koncepcję potrząsania drzewem i zdarzenia, które próbowałem wdrożyć w pakiecie webpack, a nawet z rollupem, ale robią tylko bundle.js, ale nie zgodnie z moim wymaganiem.

Jestem gotów osiągnąć najlepsze wyniki, takie jak import-eksport. tak samo jak date-fns i lodash.

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

Jak to osiągnąć?

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';
4
Nikhil Patil 25 marzec 2020, 15:06

2 odpowiedzi

Najlepsza odpowiedź

Pakiet zbiorczy umożliwia podzielenie biblioteki na kilka niezależnych części . Musisz podać obiekt, mapując nazwy na punkty wejścia, do właściwości input konfiguracji zbiorczej. To wygląda tak:

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 wygląda następująco:

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

Zapoznaj się z dokumentacją pakietu zbiorczego: https://rollupjs.org/guide/en/#input

Wynik jest ustawiony na katalog:

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

Następnie deklarujesz punkt wejścia w pliku package.json w następujący sposób:

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

Następnie można zaimportować moduły swojej biblioteki:

import { Theme, Badge } from 'your-component-library'
3
borisdiakur 29 marzec 2020, 18:06

Może być konieczne oddzielne zapakowanie.

Na przykład Material-UI, jest wiele jego części. Kiedy używamy go w normalny sposób

npm install @material-ui/core

Jeśli spojrzysz na ich źródło, dowiesz się, że istnieje wiele pakietów, każdy z własnym plikiem package.json

Na przykład @ 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",

Co oznacza, że są one w rzeczywistości oddzielne i mają wzajemne zależności.

Cóż, taki jest zakres.

1
keikai 25 marzec 2020, 12:40