Publier un module NPM dans deux styles de motif

Question

J'ai un paquet qui est compilé à un UMD de Tapuscrit puis converti en vars globales par Webpack (Nous devons utiliser Tapuscrit donc un modèle UMD plus flexible est pas une option). Je veux que les applications qui consomment le paquet puissent choisir ce dont elles ont besoin. Ceux-ci seront déployés dans un registre local de MNP. À l'heure actuelle, j'ai un package.json qui répertorie toutes les dépendances et scripts de construction requis. Je ne me dérange pas publier deux paquets différents (probablement différents domaines à savoir @my-umd-packages\my-package et @my-globals-packages\mypackage mais je voudrais garder un seul paquet pour toutes les dépendances et les scripts que son tout de même en dehors de la dernière étape.

Quelle est la neatest façon de le faire? est-ce qu'un seul paquet publié en deux endroits avec différentes propriétés main?

Merci pour toute aide

Answer 1

tapuscrit ne pas fallback une variable globale, qui devrait être partie d'un module UMD Il existe des possibilités de publier plusieurs versions de votre paquet. module eparate pour les globals, car la plupart du temps UMD prend cette partie. La bonne nouvelle est que webpack supporte ce type de module et sera capable de le produire en réglant le output.libraryTarget.

output: { 
    filename: 'mylib.js', 
    library: 'MyLibrary', 
    libraryTarget: 'umd' 
} 

De nombreux paquets publier des versions multiples, par exemple, un des modules ES pour fardeleuses module comme webpack ou Rollup, et un autre qui fonctionne dans le nœud (avec require). Un bon exemple de cela est Redux, qui a un simple build step. Il utilise Babel pour transpiler la source et Rollup pour le bundle, mais le principe est le même pour TypeScript et webpack.

Redux publie trois répertoires (voir unpkg - Redux pour la structure complète publiée):

dist/ # UMD bundles 
es/ # ES modules version (same as lib/ but with ES modules) 
lib/ # Transpiled version to work in Node 

Cela signifie que vous pouvez importer redux/dist/redux.js si vous souhaitez utiliser la version UMD, par exemple dans une balise de script, ce qui est très simple grâce à unpkg (j'espère que c'est l'utilisation principale pour les globals).

<script src="https://unpkg.com/redux/dist/redux.js"></script> 

En outre, il définit the module field qui sera utilisé par fardeleuses, qui bénéficient de modules ES (Rollup - pkg.module pour plus de détails), sinon il va utiliser lib/index.js (le champ main). Avec Webpack, vous pouvez configurer les champs que vous souhaitez utiliser avec resolve.mainFields. Vous pouvez envisager de publier une telle structure, car l'importation de l'ensemble n'est pas toujours nécessaire si vous souhaitez en utiliser certaines parties et que les modules ES activent Tree Shaking dans Webpack, ce que le consommateur de votre bibliothèque appréciera car il réduira la taille du paquet.