โครงการก่อนหน้านี้ได้รับการสร้างขึ้นโดยใช้คำรามและใช้ lequirejs เพื่อสร้างโมดูล VegurEJS อย่างเป็นทางการให้ปลั๊กอินคำรามสำหรับการบีบอัดและการผสาน โครงการปัจจุบันมาถึงอึกแล้วและใช้ SEAJs ในโมดูลดังนั้นโดยธรรมชาติแล้วฉันก็นึกถึงปัญหาของการรวมโมดูลและการบีบอัด
จากนั้นเมื่อฉันแก้ไขปัญหานี้เป็นครั้งแรกมันก็ไม่ราบรื่นมาก ไม่มีปลั๊กอินอึกที่ได้รับความนิยมโดยเฉพาะสำหรับการรวมและการบีบอัด SEAJS ใน NPM แม้ว่าฉันจะอ่านปัญหามากมายเกี่ยวกับ SEAJS GitHub แต่ส่วนใหญ่สามารถรวมไฟล์โมดูลทั้งหมดเข้ากับไฟล์ทั้งหมดได้ นี่ไม่มีปัญหาสำหรับแอปพลิเคชันหน้าเดียว อย่างไรก็ตามสำหรับแอปพลิเคชันหลายหน้านั้นเป็นการละเมิดแกนกลางของการโหลดตามความต้องการในแนวคิดแบบโมดูลาร์ดังนั้นสิ่งที่ฉันต้องการคือวิธีการที่สามารถรวมตามความต้องการตามโมดูลที่แต่ละหน้าขึ้นอยู่กับ
ความหมายของการผสานตามความต้องการนี้คือในอีกด้านหนึ่งมันรวมเฉพาะโมดูลที่หน้าขึ้นอยู่กับและในทางกลับกันมันยังสามารถกรองโมดูลบางอย่างที่ไม่ได้เข้าร่วมในการผสาน เหตุผลในการพิจารณาเรื่องนี้คือโมดูลบางอย่างเช่น jQuery เป็นไลบรารีที่ขึ้นอยู่กับบุคคลที่สามทั้งหมดและอาจมีไฟล์ขนาดใหญ่ สิ่งที่สำคัญที่สุดคือคุณแทบจะไม่เปลี่ยนรหัสดังนั้นหากโมดูลเหล่านี้ไม่ได้รวมเข้ากับ JS ของหน้าเว็บมันจะช่วยให้สามารถใช้แคชเบราว์เซอร์ได้ดีขึ้น บทความนี้แนะนำวิธีที่ง่ายและเป็นไปได้ในการทำการบีบอัด SEAJS รวมกันในโครงการขนาดเล็กและขนาดกลางที่สร้างขึ้นบนอึก
หมายเหตุ: เพื่อแสดงให้เห็นถึงผลกระทบของการผสาน 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
การเข้าสู่ระบบ.htmlเป็นตัวอย่างเมื่อดูไฟล์ต้นฉบับของหน้านี้คุณจะเห็นว่านอกเหนือจากการอ้างอิงถึง SEAJS และไฟล์การกำหนดค่าที่เกี่ยวข้อง Common.js มันอ้างอิงแอพ/ล็อกอินเป็น JS หลักของหน้าเท่านั้น แอพ/โมดูลเข้าสู่ระบบนี้จริง ๆ แล้วสอดคล้องกับ js/app/login.js:
แต่ในความเป็นจริงการเข้าสู่ระบบนี้ js นี้ขึ้นอยู่กับโมดูลมากขึ้น JS และคุณสามารถดูทรัพยากร JS โดยละเอียดที่โหลดโดยหน้านี้ผ่านแหล่งที่มาของ Chrome:
ก่อนที่จะเข้าสู่ระบบ 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/แอพจัดเก็บ 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) แนวคิดการผสาน: ส่วนใหญ่ใช้ปลั๊กอินสองอึก: Gulp-Seajs-Transport และ Gulp-Seajs-concat แม้ว่าพวกเขาจะไม่ได้รับความนิยมมากใน GitHub แต่พวกเขาก็แก้ไขปัญหาของฉันได้ดีและใช้งานง่ายมาก:
(สำหรับเนื้อหาเพิ่มเติมคุณต้องตรวจสอบลิงค์ซอร์สโค้ดที่มีให้ในตอนต้นของบทความนี้เพื่อค้นหาไฟล์ gulpfile.js ที่เกี่ยวข้อง)
Gulp-Seajs-Transport สามารถช่วยให้คุณเปลี่ยนไฟล์โมดูล SEAJS จากโมดูลที่ไม่ระบุชื่อเป็นโมดูลที่มีชื่อ ตัวอย่างเช่น js/mod/mod1.js มีลักษณะเช่นนี้ก่อนที่จะสร้าง:
แต่หลังจากการขนส่งการขนส่งมันจะกลายเป็น:
นี่เป็นจุดสำคัญในการรวมงานของ SEAJS มันไม่เหมือนต้องการ JS เพียงแค่เชื่อมต่อโดยตรง ก่อนอื่นจะต้องประมวลผลโดยงานการขนส่งให้เปลี่ยนโมดูลที่ไม่ระบุชื่อเป็นโมดูลที่มีชื่อและใช้พารามิเตอร์ที่สองของการกำหนดเพื่ออธิบายการพึ่งพาทั้งหมดของโมดูลนี้เช่นเดียวกับต้องการ หลังจากเสร็จสิ้นการขนส่งเท่านั้นที่จะใช้ 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 ผสานดูเหมือนว่า:
กำหนดโมดูลที่สอดคล้องกันครั้งแรกคือโมดูลหลักในไฟล์ที่ผสาน เนื้อหาของกล่องสีแดงคือ ID ของโมดูลหลัก เมื่อ SEAJS ใช้โมดูลชื่อพารามิเตอร์จะต้องเหมือนกับ ID นี้ มิฉะนั้นแม้ว่า SEAJS จะโหลดไฟล์นี้สำเร็จ แต่ก็จะไม่เรียกใช้รหัสใด ๆ ในโมดูล เนื่องจาก SEAJS มีกฎ: ID และหลักการจับคู่เส้นทางซึ่งค่อนข้างเกี่ยวข้องกับสิ่งนี้นั่นคือ: เมื่อ SEAJS ใช้เพื่อมีหลายโมดูลในไฟล์โมดูลหลักในไฟล์นี้จะพบได้ตามชื่อพารามิเตอร์ของการใช้งาน เมื่อพวกเขาจับคู่กันอย่างแน่นอนพวกเขาจะพบได้
5) การบีบอัดการทำให้งงงวย: ใช้ Gulp-Uglify:
แต่เพื่อให้ความสนใจกับ Mangle คุณต้องยกเว้นโมดูลการส่งออกที่ต้องการมิฉะนั้นจะทำให้เกิดปัญหาที่ไม่คาดคิด
2. บทสรุปของบทความนี้
แม้ว่าเนื้อหาของบทความนี้จะง่ายมาก แต่ก็ใช้เวลานานมากในการแก้ปัญหาของบทความนี้เมื่อฉันตัดเป็นอึกและ SEAJS เป็นครั้งแรก แม้ว่าความคืบหน้าจะราบรื่นกว่าสถานการณ์ของฉันในเวลานั้นเมื่อฉันเตรียมตัวสำหรับการสาธิต ... ไม่ว่าจะเกิดอะไรขึ้นฉันหวังว่าเนื้อหาของบทความนี้จะช่วยเพื่อนบางคนได้มากหรือน้อย