בעיה ביצירת node module עצמאי

פרגית

משתמש סופר מקצוען
הנדסת תוכנה
שואלת בשביל מישהי:

יש לי קומפוננטה שאני רוצה לעשות אותה גנרית ולהשתמש בה מכמה פרויקטים שונים.
במילים אחרות - ליצור npm module משלי.
ראיתי כמה מדריכים לזה ובסוף הצלחתי להגיע לתוצאה כמעט מלאה.
הבעיה שלי שכשאני מנסה להשתמש בזה אני מקבלת את השגיאה הבאה:
קוד:
./node_modules/@XXX/settings/src/Settings.tsx 3:11
Module parse failed: Unexpected token (3:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import React from 'react'
|
const Settings: React.FC<{ onClickSettings: () => {}; className: string }> = ({ onClickSettings, className }) => {
|     return (
|        <button className={className} onClick={onClickSettings}>General Settings</button>
ניסיתי לסדר את ה babel/webpack קונפיג ולא הצלחתי.
ניסיתי לחקות ספריות קטנות יחסית ולראות מה הם עשו וממש לא הצלחתי להבין.

האם יש למישהו ניסיון עם יצירת node module עצמאי ויוכל להסביר לי איפה הבעיה?
(היא אמורה להיות בקוד של הספריה המשותפת, כמובן)
או לחילופין אשמח לשמוע על רעיון אחר של שיתוף קוד בין repositories שונים.

תודה רבה!

זה הקוד של הקומפוננט המשותפת
JavaScript:
import React from 'react'
const Settings: React.FC<{ onClickSettings: () => {}; className: string }> = ({ onClickSettings, className }) => {
    return (
        <button className={className} onClick={onClickSettings}>General Settings</button>
    )
}
export default Settings;
וזה הindex.js שהוא הentry point שמופיע כmain בpackage.json
JavaScript:
import Settings from './Settings';
export {
  Settings
}
 

סמרקט

מהמשתמשים המובילים!
הנדסת תוכנה
D I G I T A L
קודם כל,
אהבתי את הצורה והניסוח של השאלה.
רואים שהושקעה מחשבה איך להציג את הבעיה ולהביא את המידע הרלוונטי.
(לדעת לשאול זה סוג של אומנות)

לעיניננו,
אולי לנסות להוסיף סיומת js ב-import
JavaScript:
import Settings from './Settings.js';
וכן להוסיף ב-package.json את ההגדרה:
"type":"module"
 

פרגית

משתמש סופר מקצוען
הנדסת תוכנה
אפשר לפבלש כספריה באמצעות הפקודה npm publish
יש כמה צעדים שצריך לעשות קודם, מפורט כאן: https://zellwk.com/blog/publish-to-npm/
תודה!
זה בדיוק מה שעשיתי,
ניתן לראות שהשגיאה קשורה לwebpack ולא לnpm

ב-package.json של הפרויקט שמייבא את ה-module.
את מתכוונת בפרויקט המייצא. שהוא הmodule.
כי אין היגיון בפרויקט המייבא
 

צנצנת

משתמש פעיל
D I G I T A L
תבדקי את השלבים שעשית.
עד כמה שזכור לי את צריכה להריץ פקודת build או bundle, ואז מתוך התיקיה dist שנוצרה להריץ את הpublish
 

סמרקט

מהמשתמשים המובילים!
הנדסת תוכנה
D I G I T A L
תודה!
זה בדיוק מה שעשיתי,
ניתן לראות שהשגיאה קשורה לwebpack ולא לnpm


את מתכוונת בפרויקט המייצא. שהוא הmodule.
כי אין היגיון בפרויקט המייבא
דוקא לא.
זה לא הגדרה לייצוא, זה מאפשר את ה-import.
https://nodejs.org/api/esm.html#esm_package_json_type_field
עכשיו אני שמה לב שסיומת הקובץ של המודול היא tsx ולא js.
לא בטוחה איך את אמורה לטפל בזה, אבל לכאורה או שתקמפלי מראש ל-js (בפרויקט המייצא) או שתקנפגי את webpack עם loader מתאים (ואני מבינה שזה לא הלך.)
 

אולי מעניין אותך גם...

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק קיט ב'

ט בַּמֶּה יְזַכֶּה נַּעַר אֶת אָרְחוֹ לִשְׁמֹר כִּדְבָרֶךָ:י בְּכָל לִבִּי דְרַשְׁתִּיךָ אַל תַּשְׁגֵּנִי מִמִּצְוֹתֶיךָ:יא בְּלִבִּי צָפַנְתִּי אִמְרָתֶךָ לְמַעַן לֹא אֶחֱטָא לָךְ:יב בָּרוּךְ אַתָּה יְהוָה לַמְּדֵנִי חֻקֶּיךָ:יג בִּשְׂפָתַי סִפַּרְתִּי כֹּל מִשְׁפְּטֵי פִיךָ:יד בְּדֶרֶךְ עֵדְוֹתֶיךָ שַׂשְׂתִּי כְּעַל כָּל הוֹן:טו בְּפִקֻּדֶיךָ אָשִׂיחָה וְאַבִּיטָה אֹרְחֹתֶיךָ:טז בְּחֻקֹּתֶיךָ אֶשְׁתַּעֲשָׁע לֹא אֶשְׁכַּח דְּבָרֶךָ:
נקרא  9  פעמים

לוח מודעות

למעלה