Différence entre les dossiers lib et dist lorsque vous empaquetez une bibliothèque à l'aide de Webpack
Je viens de publier mon premier paquet (un composant de réaction) dans npm, mais j’ai du mal à comprendre la différence entre ce que le répertoire lib est comparé à dist.
Actuellement, je génère à la fois lib et dist cependant mon paquet "main" pointe vers le fichier js dist unminified qui a été construit en utilisant webpack et généré en tant que UMD. Le dossier lib est construit en utilisant babel, en prenant src et en sortant à lib.
Le dossier dist contient à la fois des fichiers [unminified/minified] .js ainsi que des fichiers [unminified/minified] .css.
Ma principale confusion est avec le dossier lib car les importations à partir de là ne fonctionneraient pas car je transformais simplement src -> lib, ce qui signifie que les références scss sont toujours présentes et que les fichiers scss ne sont pas transformés.
J'utilise des modules CSS (css-loader, styles-loader, postcss-loader, etc.) pour générer mes fichiers CSS. C'est là que règne la confusion. Ne devrais-je pas également utiliser webpack pour générer mon dossier lib, vu comme scss les fichiers/références d'importation doivent être transformés en css?
Êtes-vous censé avoir à la fois lib et dist ou est la construction UMD dist remplissant le même objectif que celui d'avoir un dossier lib?
Si vous êtes censé avoir les deux, comment pourrais-je y parvenir, étant donné que je ne trouvais aucune information concernant la génération du dossier lib lorsque vous utilisiez des modules CSS dans vos fichiers js tout en maintenant la même structure de dossiers que celle de src (tout en générant des fichiers dist )?
Généralement, le dossier dist est destiné à l'envoi d'un identificateur UMD qu'un utilisateur peut utiliser s'il n'utilise pas la gestion des packages. Le dossier lib correspond à ce que package.jsonmain désigne, et les utilisateurs qui installent votre package à l'aide de npm l'utiliseront directement. La seule utilisation de lib, par opposition à src, est de transformer votre source à l'aide de babel et de webpack afin qu'elle soit plus généralement compatible, car la plupart des processus de construction n'exécutent pas les transformations babel sur les packages dans node_modules.
En ce qui concerne la gestion des importations de style, il est probablement préférable de ne pas importer de fichiers scss ou css dans votre source js que vous exportez. Cela est dû au fait que le noeud ne peut pas importer de tels styles par défaut. Si vous avez un exemple de démonstration de votre composant, il est logique d’importer les styles à cet endroit. Le modèle habituel consiste à publier des fichiers css minifiés et non dans le dossier dist. Dans votre documentation, demandez au consommateur d'importer explicitement le fichier css en utilisant la technique de son choix. J'ai adopté cette approche avec Redux bug report si vous avez besoin d'un exemple. J'espère que cela pourra aider!
Ok pense que j'ai découvert comment faire cela. Il existe un plugin babel qui vous permet d’utiliser des chargeurs de paquets Web lors de l’exécution de babel ( babel-plugin-webpack-chargeurs ). Ainsi, mon mappage CSS est intégré dans le fichier js et les hachages de mappage utilisés sont également les mêmes que ceux utilisés lors de la construction de dist. Yay!
En général, lib fait référence aux bibliothèques incluses dans un paquet, dist, en revanche, sont des fichiers de distribution pour votre projet. Par exemple, vous pouvez écrire un tas de javascript et inclure jquery (qui est une lib), puis quand ils sont tous regroupés, vous avez un seul fichier dist.