איך לפרסם מודול npm מבוסס TypeScript שמכיל מודולי CSS?

אני מפתח ספריה פנימית מבוססת TypeScript עבור רכיבי React משותפים. תהליך הבנייה הוא פשוט tsc בלבד ולאחריו מפרסמים לרגיסטרי npm פנימי. אין צורך בתהליך קומפילציה מורכב עם Babel מכיוון שהארטיפקטים של הבנייה משמשים רק בתוך הצוות ותהליך טרנספילציה נכון מתבצע על ספריה זו כאשר האפליקציות הצורכות מריצות את תהליך חבילת ה-Webpack שלהן.

הבעיות התחילו להתרחש כאשר ניסיתי לפרק קובץ styles.css אחד בלבד למודולי CSS מפוצלים כראוי. כדי להשתמש במודולי CSS, יהיה קוד עם תחביר כמו למטה בקבצי הקומפוננטות שלי ב-React. לדוגמה, ב-FooComponent.tsx,

import 'FooComponent.css';

קומפיילר TypeScript לא מבין את זה באופן מלא ולכן הוא פשוט ישים את אותו משפט הייבוא בקובץ המיוצר FooComponent.js. עכשיו השאלה היא איך אני צריך לארוז ולהפיץ את מודולי ה-CSS האלה בנפרד? אני יודע של-Webpack יש תוספים כמו MiniCssExtractPlugin לטיפול במודולי CSS ברגע שהם נטענים כראוי. אבל אני חושב מהי הדרך הטובה ביותר להפיץ את מודולי ה-CSS האלה בהגדרות שלי.

מאחר שליישומים הצורכים יש את כל ההגדרות שלהם ב-Webpack כדי לטעון ולאגד נכסים של JS/CSS בצורה נכונה, הפתרון הקל ביותר שאני יכול לחשוב עליו הוא פשוט לחבר את מודולי ה-CSS בהתאם בתיקיית dist שבה נשמרים תוצאות הקומפילציה של TypeScript, כדי לוודא שהפניות אלו לקבצי CSS לא יסתיימו במשאב שלא נמצא. אם אני אאגד את מודולי ה-CSS בצורה אחרת במהלך תהליך הבנייה, ההפניות הללו צריכות להיות או מוסרות או מטופלות בצורה מיוחדת, משהו בסגנון מה ש-gulp-csslit עושה כדי להמיר קבצי CSS לקבצי JS.

עדיין לא ניסיתי את זה על שום דבר, אבל אשמח לדעת את השיטות הטובות ביותר אם מישהו יכול להאיר קצת אור.

תשובה #1

מאחר שהאפליקציות הצורכות מעבדות ואוגדות נכסי CSS בעצמן, מצאתי שהדרך הקלה ביותר היא פשוט להכניס את מודולי ה-CSS לתיקיית dist. לשם כך אני משתמש ב-CopyWebpackPlugin.