تم بناء المشاريع السابقة باستخدام Grunt ، ثم تستخدم المطلوبة لجعل Modular. يوفر ShiedJS المسؤول المكون الإضافي Grunt للضغط والاندماج. وصل المشروع الحالي إلى Gulp ، ويستخدم Seajs في الشكل ، لذلك بطبيعة الحال فكرت أيضًا في مشكلة دمج الوحدة النمطية والضغط.
ثم عندما قمت بحل هذه المشكلة لأول مرة ، لم تكن سلسة للغاية. لم يكن هناك مكونات GULP شائعة بشكل خاص لدمج Seajs والضغط على NPM. على الرغم من أنني قرأت أيضًا الكثير من المشكلات على Seajs Github ، إلا أن معظمها لا يمكنه دمج جميع ملفات الوحدة النمطية إلا في ملف إجمالي. هذا بالتأكيد لا توجد مشكلة في تطبيقات صفحة واحدة. ومع ذلك ، بالنسبة للتطبيقات متعددة الصفحات ، فإنه ينتهك بوضوح جوهر التحميل عند الطلب في فكرة الشكل ، لذلك ما أريده هو طريقة يمكن أن تندمج عند الطلب بناءً على الوحدات النمطية التي تعتمد عليها كل صفحة.
إن معنى هذا الاندماج عند الطلب هو أنه من ناحية ، فإنه يدمج الوحدات التي تعتمد عليها الصفحة فقط ، ومن ناحية أخرى ، يمكنها أيضًا تصفية بعض الوحدات التي لا تشارك في الدمج. والسبب في النظر في ذلك هو أن بعض الوحدات ، مثل jQuery ، كلها مكتبات تعتمد على الطرف الثالث ، وقد يكون لها ملف كبير. أهم شيء هو أنك لن تغير رمزها بالكاد ، لذلك إذا لم يتم دمج هذه الوحدات النمطية في JS في الصفحة ، فسيساعد ذلك على استخدام ذاكرة التخزين المؤقت للمتصفح بشكل أفضل. تقدم هذه المقالة طريقة بسيطة ومجدية للقيام بدمج Seajs في مشاريع صغيرة ومتوسطة الحجم مبنية على Gulp.
ملاحظة: لتوضيح تأثير دمج Seajs ، توفر هذه المقالة عرضًا عرضيًا ، والذي يحتوي على صفحتين: login.html و Regist.html ، والتي تستخدم لمحاكاة ملفين مستقلين في تطبيقات متعددة الصفحات. يمكنك عرضه من خلال الرابط التالي:
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
أخذ login.html كمثال ، عند عرض الملف المصدر لهذه الصفحة ، سترى أنه بالإضافة إلى الإشارة إلى Seajs وملفات التكوين ذات الصلة الشائعة. تتوافق وحدة التطبيق/تسجيل الدخول هذه في الواقع مع JS/APP/Login.js:
ولكن في الواقع ، يعتمد هذا login.js على المزيد من الوحدات النمطية ، ويمكنك عرض موارد JS المفصلة التي تم تحميلها بواسطة هذه الصفحة من خلال مصدر Chrome:
قبل دمج login.js ، بدا رمزه هكذا:
ومع ذلك ، في أول لقطتين ، لم نر الملفات الثلاثة: mod/mod1.js ، mod/mod2.js ، deps/fastclick.js. بالإضافة إلى login.js ، رأينا أيضًا lib/bootstrap.js ، lib/jquery.js ، lib/jquery.validate.js. هذا هو تأثير الدمج. من ناحية ، لن تشارك الوحدات الموجودة تحت مجلد JS/LIB في عملية الدمج. من ناحية أخرى ، يتم دمج الوحدات الأخرى التي تعتمد عليها JS الرئيسية للصفحة في ملف JS الرئيسي للصفحة.
يمكن الاطلاع على الرمز المتعلق بهذا العرض التوضيحي من خلال الرابط التالي:
https://github.com/liuyunzhuge/blog/tree/master/seajs
1. دمج الأفكار
في الواقع ، فإن الطريقة بسيطة نسبيًا ، وسأقدمها في النهاية.
1) اسمحوا لي أولاً أن أتحدث عن بنية مجلد أقوم بتنظيم وحدة Seajs ، والتي تشبه هذا:
يتم استعارة هذا الهيكل من requirejs ومحاولة تسطيح مؤسسة الملفات ، والتي لا ينبغي أن تكون مزعجة للغاية بالنسبة للمشاريع الأمامية الصغيرة والمتوسطة الحجم. وظائف كل مجلد هي:
1) يقوم JS/APP بتخزين JS الرئيسي لكل صفحة ، بشكل أساسي منطق صفحة واحدة وواحدة JS
2) متاجر JS/DEPS من وحدات الطرف الثالث التي تحتاج إلى دمجها في JS الرئيسية
3) متاجر JS/LIB وحدات الطرف الثالث لا تحتاج إلى المشاركة في الاندماج
4) يخزن JS/MOD بعض وحدات JS التي كتبت في كل مشروع
5) Common.js هو ملف تكوين Seajs.
2) في الشائع. js ، يتم تكوين جميع الوحدات النمطية تحت JS/LIB في خيار الاسم المستعار ، لأن هذه JS لا تشارك في الدمج وتحتاج إلى استخدامها في ذاكرة التخزين المؤقت للمتصفح. يمكن أن يسهلنا الاسم المستعار لتحديث عناوين تحميل هذه الملفات عند تعديل أو ترقية الملفات تحت JS/LIB:
تم تكوين قاعدة إلى مجلد JS. في تطوير الوحدة النمطية ، عندما أريد أن أتطلب وحدات أخرى ، فإن عادتي هي كتابة معرفات الوحدة النمطية مثل MOD/MOD1 مباشرة دون تحديد نسبي. حتى إذا كانت الوحدة النمطية التي يتم تحديدها للوحدة في نفس المجلد ، وهذا هو السبب أيضًا في تعيين الدليل الأساسي على مجلد JS ، والذي يشبه إلى حد ما الدليل الجذر للموقع.
3) IDEM: استخدم بشكل رئيسي الإضافات اثنين من GULP: Gulp-Seajs-transport و Gulp-Seajs-Concat. على الرغم من أنها ليست شائعة جدًا على Github ، إلا أنها حلت مشكلتي بشكل جيد وأسهل استخدامها:
(لمزيد من المحتوى ، تحتاج إلى التحقق من رابط رمز المصدر المقدم في بداية هذه المقالة للعثور على ملف gulpfile.js ذي الصلة)
يمكن أن تساعدك Gulp-Seajs-Transport على تحويل ملفات الوحدة النمطية Seajs من وحدات مجهولة إلى الوحدات النمطية المسماة. على سبيل المثال ، يشبه JS/Mod/Mod1.js هذا قبل البناء:
ولكن بعد معالجة النقل ، سيصبح:
هذه نقطة أكثر أهمية في دمج Seajs. إنه ليس مثل المطلوبة ، فقط قم بالتسلسل مباشرة ؛ يجب أولاً معالجتها بواسطة مهمة نقل ، وتحويل الوحدة المجهولة إلى وحدة نمطية مسموحة ، واستخدام المعلمة الثانية للتعرف لوصف جميع تبعيات هذه الوحدة ، تمامًا مثل المتطلبات. فقط بعد الانتهاء من النقل يمكن استخدام Gulp-Seajs-Concat للدمج. لأسباب ، يرجى الرجوع إلى: https://github.com/seajs/seajs/issues/426.
عندما يتم دمج Gulp-Seajs-Concat ، يكون الأمر بسيطًا للغاية. فقط أخبرها بخيار قاعدة. هذا الخيار الأساسي يتسق مع الخيار الأساسي في JS/Common.js. نظرًا لأن Gulp-Seajs-Concat يمكن أن تجد ملفات الوحدات الأخرى التي تعتمد عليها بناءً على الوحدات النمطية بعد القاعدة والنقل.
4) يجب استخدام هذه الطريقة عند استخدام JS الرئيسي في الصفحة:
يجب أن يكون اسم المعلمة للاستخدام متسقًا مع معرف الوحدة النمطية الرئيسية لـ JS الرئيسية المدمجة. على سبيل المثال ، بعد دمج JS/APP/LOGIN.JS ، يبدو أن هذا:
الوحدة النمطية المقابلة الأولى هي الوحدة الرئيسية في الملف المدمج. محتوى المربع الأحمر هو معرف الوحدة الرئيسية. عندما تستخدم Seajs الوحدة النمطية ، يجب أن يكون اسم المعلمة هو نفسه المعرف. خلاف ذلك ، حتى إذا نجح Seajs في تحميل هذا الملف ، فلن يقوم بتنفيذ أي رمز في الوحدة النمطية. نظرًا لأن Seajs لها قاعدة: معرف ومبدأ مطابقة المسار ، والذي يرتبط إلى حد ما بهذا ، هو: عندما يستخدم Seajs لاحتواء وحدات متعددة في ملف ، سيتم العثور على الوحدة الرئيسية في هذا الملف وفقًا لاسم المعلمة للاستخدام. فقط عندما تتطابق بالضبط يمكن العثور عليها.
5) التغلب على الضغط: استخدم gulp-uglify:
ولكن للانتباه إلى Mangle ، يجب عليك استبعاد وحدة READERS ، وإلا فإن ذلك سيؤدي إلى بعض المشكلات غير المتوقعة.
2. ملخص هذا المقال
على الرغم من أن محتوى هذه المقالة بسيط للغاية ، إلا أن الأمر استغرق الكثير من الوقت لحل مشكلة هذه المقالة عندما قطعت لأول مرة في Gulp و Seajs. على الرغم من أن التقدم كان أكثر سلاسة من وضعي في ذلك الوقت عندما كنت أستعد للتوضيح ... بغض النظر عن السبب ، آمل أن يساعد محتوى هذه المقالة بعض الأصدقاء أكثر أو أقل.