วิธีการทำให้เป็นโมดูลและแพคเกจห้องสมุด Javascript ฝั่งไคลเอ็นต์วันนี้?

ฉันได้ติดตามกับระบบนิเวศ JS ฝั่งไคลเอ็นต์ที่ทันสมัยและอ่านข้อมูลเกี่ยวกับ CommonJS และ AMD (รวมถึงเครื่องมือที่เกี่ยวข้อง - เบราว์เซอร์, requirejs, onejs, jam, อื่น ๆ อีกมากมาย) ถ้าฉันกำลังเขียนไลบรารี Javascript ฉันจะทำให้เป็นโมดูล / แพ็กเกจได้อย่างไรซึ่งมันสามารถเข้าถึงได้อย่างกว้างขวางที่สุด (โดยผู้ใช้ที่สบถโดย CommonJS, AMD และโดยเฉพาะอย่างยิ่ง)

ห้องสมุดยอดนิยมเช่น jQuery ดูเหมือนจะใช้การต่อไฟล์โรงเรียนเก่าสำหรับการสร้างตัวเองและตรวจสอบแบบไดนามิกว่าควรเขียนไปยังexportsหรือบริบททั่วโลก ตอนนี้ฉันกำลังทำสิ่งเดียวกัน แต่ข้อเสียเปรียบหลักคือถ้าฉัน (ต่างจาก jQuery) ขึ้นอยู่กับห้องสมุดไม่กี่แห่งก็ดีที่ไม่ต้องขอให้ผู้ใช้รวมชุด transitive ด้วยตนเองไว้ล่วงหน้า (ถึงแม้ว่าตอนนี้ฉันเพิ่งมีการขึ้นต่อกันสองครั้ง) และแน่นอนว่าเนมสเปซทั่วโลกเป็นมลพิษ

หรือบางทีมันอาจจะดีที่สุดที่จะสร้างไลบรารี่หลายเวอร์ชันสำหรับแต่ละบริบท?

ฉันยังสงสัยเกี่ยวกับบรรจุภัณฑ์และการเผยแพร่ มีหลายระบบ แต่ฉันเชื่อว่าระบบที่สำคัญคือ bower ซึ่งง่ายต่อการจัดการเนื่องจากทั้งหมดนี้ใช้งานได้จริง อย่างไรก็ตามฉันสงสัยว่าฉันควรกำหนดเป้าหมายไปยังระบบแพ็กเกจอื่นเช่นองค์ประกอบ (ซึ่งต้องใช้ CommonJS) หรือไม่

มีประเด็นอื่น ๆ ที่เกี่ยวข้องที่ฉันควรทราบหรือไม่? มีตัวอย่างโครงการที่ดีที่จะติดตามทั้งหมดนี้หรือไม่?

ผมเคยใช้เสมอที่จะใช้สร้างไฟล์ แต่ตั้งแต่ผมเริ่ม nodejs ครั้งแรกของฉันโครงการผมเริ่มใช้ browserify ด้วย Browerify และไลบรารี่อื่นที่คล้ายกันรหัสของคุณคือไฟล์บิวด์ของคุณ ฉันใช้ประโยชน์จากไคลเอนต์และไลบรารีเซิร์ฟเวอร์ที่สามารถทำงานได้ทั้งสองอย่าง แต่ก็สามารถทำงานกับรหัสลูกค้าได้อย่างหมดจด ในการรวมเบราว์เซอร์ให้ผลประโยชน์ทั้งหมดของการเขียนโค้ดในโหนด (ไม่มีฟังก์ชั่น anon เพื่อหลีกเลี่ยง globals, npm, ต้องการง่าย ๆ ) และมันช่วยให้คุณจัดแพคเกจรหัสนั้นให้ทำงานบนไคลเอนต์ด้วยคำสั่งเดียว

ด้วย browserify คุณสามารถทำสิ่งที่ชอบ (ชื่อ app.js):

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

browserify app.js> client.js

จะผลิตสิ่งที่ชอบ:

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

ไฟล์ที่คุณจะกำหนดอาจรวม libs บุคคลที่สามทั้งหมดของคุณและไม่ขัดแย้งกับนักพัฒนาซอฟต์แวร์รายใดของคุณที่ใช้งาน

- แก้ไขเพื่อตอบความคิดเห็น (และพลาดคำถาม)

ฉันเดาว่าจะขึ้นอยู่กับการพึ่งพาของคุณและเวลาเท่าไหร่ที่คุณต้องการใช้เพื่อให้แน่ใจว่าพวกเขาทำงานได้กับทุกเวอร์ชันและ libs หากการอ้างอิงของคุณเป็นเรื่องธรรมดาและปฏิบัติตาม api เดียวกันจากรุ่นสู่รุ่นคุณสามารถไปที่เส้นทาง Backbone และเพียงแค่ต้องการให้ผู้ใช้มี $ และ _ ฉันขอแนะนำให้วาง libs ที่คลุมเครือมากขึ้นเป็นส่วนหนึ่งของไฟล์บันเดิล ตัวเลือกไม่จำเป็นต้องถูกตัดและทำให้แห้ง คุณสามารถเสนอแพ็คเกจที่สร้างไว้ล่วงหน้าหรือสร้างเองได้

ชนิดของไลบรารีฝั่งไคลเอ็นต์:

1. แตะที่ DOM
2. ไม่ได้แตะ DOM

ด้วยชนิดแรก (วิดเจ็ต UI ฯลฯ ) โดยทั่วไปคุณจะถือว่า jQuery มีอยู่ คุณยังสามารถเขียน "ผู้ไม่เชื่อเรื่องพระเจ้าในห้องสมุด DOM" และให้มันทำงานร่วมกับคนที่ได้รับความนิยมน้อยเช่นกัน แต่ฉันก็ไม่ได้สนใจ

ด้วยประเภทที่สอง ก่อนอื่นอย่าทำให้เป็นปลั๊กอิน jQuery ตัวอย่างเช่น "ปลั๊กอินคุกกี้ jQuery" นั้นไร้สาระ แต่มีไลบรารีดังกล่าวอยู่จริง

ทั้งสองชนิดนี้อาจไม่มีการพึ่งพาการพึ่งพาขนาดเล็กหรือการพึ่งพาขนาดใหญ่ - ด้วยไลบรารี dom ที่ไม่นับเป็นการพึ่งพาในแง่นี้ ด้วย 2 ตัวแรกคุณเพียงแค่เชื่อมต่อมันเข้ากับขอบเขตห้องสมุดของคุณและไม่ต้องกังวลกับการทำซ้ำที่เป็นไปได้ ยกตัวอย่างเช่น jQuery เชื่อมต่อisArrayLikeฟังก์ชั่นภายในแม้ว่าผู้ใช้อาจมีตัวเองรวมอยู่แล้วจากห้องสมุดสายพานยูทิลิตี้สุ่มบาง

ฉันมีเพียงประสบการณ์ส่วนตัวหนึ่งที่มีการพึ่งพามากเมื่อมีการพัฒนาห้องสมุด (ที่จริงภาษา) moment.js- ในกรณีนี้ฉันจะให้ 2 บิลด์โดยมีคอมเม้นต์ moment.js หนึ่งอันและอันเดียวไม่มีซึ่งผู้ใช้มีหน้าที่รับผิดชอบในการรวมมัน ฉันไม่รู้ว่านี่เป็นวิธีแก้ปัญหาที่ดีหรือไม่

และใช่ในทุกกรณีวิธี jQuery ของการสร้างไฟล์ขนาดใหญ่ไฟล์สุดท้ายที่ใช้งานได้ มีโมดูลสำเร็จรูปที่ด้านล่าง (ต้อง / การตรวจสอบ AMD / ทั่วโลก ฯลฯ )