Tworzę udostępnioną bibliotekę komponentów React.
Biblioteka zawiera wiele komponentów, ale użytkownik końcowy może potrzebować tylko kilku z nich.
Gdy pakiet jest pakowany w pakiet Webpack (lub Paczkę lub Pakiet), tworzy on jeden plik z całym kodem .
Ze względu na wydajność nie chcę, aby cały ten kod był pobierany przez przeglądarkę, chyba że jest faktycznie używany. Czy mam rację, myśląc, że nie powinienem wiązać komponentów? Czy pakiet należy pozostawić konsumentowi komponentów? Czy pozostawiam coś konsumentowi komponentów? Czy po prostu transponuję JSX i to wszystko?
Jeśli to samo repozytorium zawiera wiele różnych komponentów, co powinno znajdować się w main.js?
imported
w kodzie, zmniejszając w ten sposób rozmiar pakietu.Odpowiedzi:
To jest bardzo długa odpowiedź, ponieważ to pytanie zasługuje na niezwykle długą i szczegółową odpowiedź, ponieważ metoda „najlepszych praktyk” jest bardziej skomplikowana niż tylko odpowiedź liniowa.
Iv'e utrzymywał nasze biblioteki wewnętrzne przez ponad 3,5 roku w tym czasie iv'e osiedlił się na dwa sposoby. Myślę, że biblioteki powinny być powiązane, kompromisy zależą od tego, jak duża jest twoja biblioteka i osobiście opracowujemy oba sposoby, aby zadowolić oba podzbiory konsumenci.
Metoda 1: Utwórz plik index.ts ze wszystkim, co chcesz wyeksportować, i docelowym pakietem zbiorczym dla tego pliku jako jego danych wejściowych. Spakuj całą bibliotekę w jeden plik index.js i plik index.css; Z zewnętrzną zależnością odziedziczoną po projekcie konsumenckim, aby uniknąć powielania kodu biblioteki. (Gist znajduje się na dole przykładowej konfiguracji)
import { Foo, Bar } from "library"
Metoda 2: dla zaawansowanych użytkowników: utwórz nowy plik dla każdego eksportu i użyj wtyczki rollup-plugin-multi-input z opcją „preserveModules: true”, w zależności od tego, jakiego systemu css używasz, aby upewnić się, że Twój plik css NIE jest scalony w jeden plik, ale że każdy plik css wymaga instrukcji („. css”) pozostawia się w pliku wyjściowym po zrolowaniu i ten plik css istnieje.
next-transpile-modules
pakietu npm.import { Foo,Bar } from "library"
a następnie wraz z Babel przekształcić ją w ...Mamy wiele konfiguracji zestawień, w których faktycznie używamy obu metod; więc konsumenci bibliotek, którym nie zależy na wstrząsaniu drzewem, mogą po prostu
"Foo from "library"
zaimportować pojedynczy plik css; a dla użytkowników bibliotek, którzy troszczą się o drżenie drzew i używają tylko krytycznego css, mogą po prostu włączyć naszą wtyczkę Babel.Przewodnik po najlepszych praktykach:
czy używasz maszynopisu czy nie ZAWSZE kompiluj z
"rollup-plugin-babel": "5.0.0-alpha.1"
Upewnij się, że Twój .babelrc wygląda tak.A dzięki wtyczce babel w pakiecie wygląda to tak ...
A Twój pakiet.json wygląda ATLEAST tak:
I w końcu twoje zewnętrzne wyglądające tak, jakby wyglądały jak KASETA.
Dlaczego?
Na koniec znajduje się streszczenie przykładowego pojedynczego pliku konfiguracyjnego pakietu zbiorczego pliku index.js. https://gist.github.com/ShanonJackson/deb65ebf5b2094b3eac6141b9c25a0e3 Gdzie docelowy plik src / export / index.ts wygląda tak ...
Daj mi znać, jeśli napotkasz jakiekolwiek problemy z babel, rollupem lub masz pytania dotyczące tworzenia pakietów / bibliotek.
źródło
Dla każdego komponentu można wygenerować osobne pliki. Webpack ma taką możliwość, definiując wiele wpisów i wyjść. Załóżmy, że masz następującą strukturę projektu
Plik Webpack wyglądałby mniej więcej tak
Więcej informacji na temat „dzielenia kodu” znajduje się tutaj w dokumentacji pakietu Webpack
W
package.json
pliku znajduje się jedno polemain
, dlatego warto umieścić jego wartośćlib/index.js
zgodnie z powyższą strukturą projektu. I windex.js
pliku mają wszystkie komponenty wyeksportowane. W przypadku, gdy konsument chce użyć jednego komponentu, jest to możliwe po prostu przez zrobienie tegoCóż, to zależy od ciebie. Przekonałem się, że niektóre biblioteki React są publikowane w oryginalny sposób, inne - w pakiecie. Jeśli potrzebujesz procesu kompilacji, zdefiniuj go i wyeksportuj dołączoną wersję.
Mam nadzieję, że na wszystkie twoje pytania odpowiedziano :)
źródło
Możesz podzielić swoje komponenty tak, jak lodash robi dla swoich metod.
To, co prawdopodobnie posiadasz, to osobne komponenty, które możesz zezwolić na importowanie osobno lub przez główny komponent.
Wtedy konsument mógłby zaimportować cały pakiet
lub jego poszczególne części
Konsumenci będą tworzyć własne pakiety na podstawie importowanych komponentów. To powinno zapobiec pobieraniu całego pakietu.
źródło
Powinieneś spojrzeć na Bit , myślę, że to dobre rozwiązanie do udostępniania, ponownego wykorzystania i wizualizacji komponentów.
Jest bardzo łatwy w konfiguracji. Możesz zainstalować swoją bibliotekę bitów lub tylko komponent z:
Następnie możesz zaimportować komponent do swojej aplikacji za pomocą:
Zaletą jest to, że nie musisz się martwić konfiguracją Webpacka i całym tym jazzem. Bit obsługuje nawet wersjonowanie twoich komponentów. Ten przykład pokazuje komponent reagowania na listę tytułów, dzięki czemu możesz sprawdzić, czy spełnia twoje wymagania, czy nie
źródło
W pakiecie internetowym znajduje się konfiguracja do tworzenia plików porcji. Na początek utworzy główny pakiet w wiele porcji i załaduje go tak, jak to konieczne. jeśli twój projekt ma dobrze ustrukturyzowane moduły, nie załaduje żadnego kodu, który nie jest wymagany.
źródło