تنظيم مشروع JS المتفاعل - بناء ملف JS واحد

Question

لقد بدأت للتو باستخدام الرد. ذهبت من خلال تعليمي علبة التعليق دون أي مشاكل. ولكن الإطار لا يعطي الكثير / أي إرشادات لتنظيم ملفات JS الخاصة بك أو تجميع ملف JS مصغر واحد لسبا. أنا أعرف بالفعل الإطار مرن ولا يفرض المعيار وأنا متأكد من أن هذه الأسئلة قد ماتت واضحة لشخص يتطور في النظام البيئي JavaScript.

أود أن أتصور الإجماع هو استخدام Beawerify وفي المستندات هناك رابط لمشروع بداية GIT:

href="https://github.com/petehunt/react-browserify-template" rel="noreferrer"> https://github.com/petehunt/react-browserify-template / ص>

هذه بداية جيدة، لكنها لا تزال تقوم فقط بتجميع ملف JS واحد "index.js". قرأت من خلال بعض كتيب المتصفح وأعتقد أنني ببساطة يجب أن "تتطلب" ملفاتي الأخرى (وتلك الملفات تحتاج إلى تصدير أنفسهم).

لذلك قمت بتعديل index.js لتبدو مثل هذا:

giveacodicetagpre.

comment-box.js هو في الأساس اختبار العالم Hello:

giveacodicetagpre.

إذا قمت بتشغيل هدف بدء تشغيل Text-Browserify - يبدو أنه يبدو أنه يوفر Browser-Bundle.js بشكل جيد:

giveacodicetagpre.

ولكن إذا جربت هدف الإنشاء

giveacodicetagpre.

... لا يحدث شيء. لقد غيرت إخراج NPM إلى Verbose وأحصل على ما يلي:

giveacodicetagpre.

وفقا ل Package.json من المفترض أن تولد ملف "Browser-Bundle.min.js" ولكن بدلا من ذلك، أحصل على إخراج. آمل أن يقوم شخص ما بإزالة هذا الأمر.

Answer 1

أنا أحسب ما كانت المشكلة. كما ذكرت في الأصل، من المحتمل أن يكون من الواضح على شخص يطور في النظام البيئي JS :)

package.json في تفاعل -powerify-قالب < / a> لديه ثلاثة نصوص في قسم "البرامج النصية" مع المفاتيح "ابدأ"، "بناء"، و "اختبار".

كما قلت سابقا، ابدأ العمل بشكل جيد من خلال تشغيل:

giveacodicetagpre.

أنا أخطأت بشكل خاطئ أنه يمكنني تشغيل البرنامج النصي المبني بشكل مشابه:

giveacodicetagpre.

اتضح أنني بحاجة إلى تشغيل البرنامج النصي للبناء باستخدام:

giveacodicetagpre.

خط إضافي واحد في الوثائق قد أنقذني ساعات من المتاعب: D أنا الآن أستخدم هذا النهج كما يبدو أبسط بعض الشيء. أيضا، يحدد Node_Env للإنتاج والاستخدامات التي تهدف إلى حد ما: https:/github.com/ الفيسبوك / رد الفعل / القضايا / 1772

شيء آخر، بعض الأمثلة الرسمية مثل ToDomVC Flux استخدم" الرد "الصغيرة في وظيفة الطلب:

giveacodicetagpre.

لذلك أفترض أن هذا هو بناء الجملة الموصى به (؟)

Answer 2

حل العمل باستخدام GIST Felix.ملاحظة: هذا ليس ما يعادل 100٪ قالب متصفح التفاعل الذي يستخدم تحضور علم الإنتاج والتخلص من بعض تصحيح الأخطاء المتفاعل (أساسا "تنزيل تفاعل deveols لخبرة تطوير أفضل: http://fb.me/react-devtools " والذي يتم طباعته إلى وحدة التحكم في بدء التشغيل).

ربما MOD يمكن أن تعطي رصيد Felix للحل؟

app.js

giveacodicetagpre.

المكونات / commentbox.js

giveacodicetagpre.

المكونات / commentlist.js

giveacodicetagpre.