Recherche de site Web

reactjs - Problèmes conflictuels lors de la compilation du code dans Rollup/Typescript/React

J'ai trouvé un emploi en août, et surtout pendant cette pandémie, je l'ai en fait gardé aussi !!

En tant que projet secondaire, je voulais apprendre à créer une bibliothèque de composants React pour mon usage personnel (loin d'être complète) avec Rollup pour son tree-shaking + des plugins pour cjs, udm, etc. pour la compatibilité.

Lorsque je compile avec TSC, c'est presque parfait maintenant que j'ai ajusté quelques éléments concernant l'organisation et un TSConfig de build séparé.

Mon TSConfig

Ma configuration TS de build

Ma configuration Rollup

Je ne suis pas sûr s'il y a des problèmes flagrants que quelqu'un peut voir au premier coup d'œil ou non, j'ai ajusté un peu ici et là en essayant de faire fonctionner rollup en premier lieu, mais clairement ça ne se résout pas correctement sinon je ne serais pas ici ! :D

Note : Malgré la mise en place d'un custom.d.ts à la racine pour déclarer les imports SVG avec svgr, TS ne comprend toujours pas la déclaration et génère une erreur de type :

declare module '*.svg' {
import React = require('react')
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
const src: string
export default src
}

Je dis que la configuration TSC est presque parfaite, mais il y a quelques choses dont je suis conscient :

  1. Je ne suis pas sûr que la compilation TSC soit bonne pour le Tree-shaking. Corrigez-moi si je me trompe, mais c'est pour ça que Rollup existe, non ?
  2. TSC ne semble pas transformer mes alias de chemin dans la configuration, où j'ai '@app' pour 'src' afin d'éviter le ' ../../../../' à résoudre.

Lorsque j'essaie d'utiliser Rollup, je rencontre deux problèmes complètement différents :

  1. Bien que j'aie les types dans un dossier ./src/types/*.ts, je n'ai pas de fichier de déclaration au niveau racine dans mon dossier 'dist', ils sont dispersés parmi les dossiers des composants individuels pour leurs props.
  2. Toutes les props et types qui sont assurément utilisés dans les composants exportés, etc., ne sont pas tous exportés ; il y a plusieurs composants dont les props sont (_a: any), ce qui est évidemment une très mauvaise expérience de travail.
  3. Je ne suis pas sûr non plus s'il résout/transforme mes alias de chemin, donc c'est quelque chose que je dois vérifier à nouveau.

Si quelqu'un peut aider avec ce problème, je lui serais éternellement reconnaissant ! J'ai déjà cherché sur Google/Reddit/SO pour trouver quelqu'un ayant des problèmes similaires car je n'ai trouvé aucune solution qui ait fonctionné avec succès.