Dois-je inclure des modules de nœuds dans mon package de bibliothèque ?
P粉716228245
P粉716228245 2023-09-12 19:36:43
0
1
602

Je développe une bibliothèque de composants React. Cette bibliothèque est utilisée par plusieurs projets internes NextJs.

Pour des raisons de compatibilité avec NextJs, cette bibliothèque devra être convertie en CommonJs à un moment donné.

Le problème est que certaines dépendances npm de ma bibliothèque ne gèrent pas CommonJS. C’est le cas par exemple de swiper.

J'ai donc deux options :

  • Soit je déclarerais les dépendances npm comme peerDependency, puis je demanderais à chaque consommateur de ma bibliothèque de les transpiler correctement. Cela allège mes packages de bibliothèque, mais cela crée beaucoup de contraintes de configuration dans chaque projet (par exemple pour NextJs ainsi que Jest).
  • Ou j'inclus la dépendance npm dans mon package, qui est un anti-pattern selon moi, mais cela me permet d'exposer CJS et MJS : les consommateurs de ma bibliothèque n'ont quasiment rien à faire.

Je peux aussi envisager un mélange des deux : j'ignore la gestion de toutes les dépendances des modules CommonJs et ES, et ne transpose que celles qui sont nécessaires.

Qu'en pensez-vous ?

P粉716228245
P粉716228245

répondre à tous(1)
P粉647504283

Nous avons la même situation : nous avons une application Next.js qui s'appuie sur une bibliothèque principale avec des modules ESM sous-jacents. Cependant, je recommande de ne pas regrouper vos dépendances. Vos applications en aval peuvent avoir les mêmes dépendances et vous finissez maintenant par les charger deux fois. Et vous avez peut-être rencontré ce problème avec d'autres dépendances tierces (avec les dépendances ESM). Ajoutez-les simplement à next.config.js 中的 transpilePackages 列表中即可:https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages。我们还使用 next/jest ,它似乎也可以获取配置并且似乎可以工作。唯一需要注意的是,我发现我们必须转译 @babel/runtime mais seulement lorsque jest est en cours d'exécution, sinon cela cassera l'application principale.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}
 
module.exports = nextConfig
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal