วิธีจัดการการอ้างอิง JavaScript ฝั่งไคลเอ็นต์? [ปิด]

แม้ว่าจะมีโซลูชันที่ยอดเยี่ยมในการจัดการการอ้างอิงบนฝั่งเซิร์ฟเวอร์ แต่ฉันไม่พบสิ่งใดที่ตรงตามความต้องการทั้งหมดของฉันในการมีเวิร์กโฟลว์การจัดการการพึ่งพา JavaScript ฝั่งไคลเอ็นต์ที่สอดคล้องกัน ฉันต้องการปฏิบัติตามข้อกำหนด 5 ข้อนี้:

1. การจัดการด้านการอ้างอิงของลูกค้าในรูปแบบคล้ายกับ NPM ของpackage.jsonหรือซุ้ม 'sbower.json
2. ควรมีความยืดหยุ่นในการชี้ไปที่ git repo หรือไฟล์ js จริง (ทั้งบนเว็บหรือในเครื่อง) ในdependency.jsonไฟล์ของฉันสำหรับไลบรารีที่รู้จักกันน้อย (npm ให้คุณชี้ไปที่ git repos)
3. ควรลดขนาดและเนมสเปซไลบรารีทั้งหมดลงในไฟล์เดียวเช่นender - นั่นเป็นไฟล์ js เดียวที่ฉันต้องใส่ใน<script>แท็กของฉันในฝั่งไคลเอ็นต์
4. ควรมีการรองรับ CoffeeScript เช่น BoxJS 4นอกกรอบ(ตอนนี้ตายแล้ว)

5. ในเบราว์เซอร์ฉันควรจะใช้ได้อย่างใดอย่างหนึ่งต้องมีสไตล์:

   var $ = require('jquery');
   var _ = require('underscore');
   

   หรือดีกว่านั้นทำสไตล์headjs :

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });
   

ถ้าไม่มีเครื่องมือชิ้นเดียวชุดเครื่องมือใดที่ดีที่สุดเช่นโซ่เครื่องมือที่ฉันสามารถรวมเข้าด้วยกันโดยใช้volo (หรือฮึดฮัด )?

ฉันได้ค้นคว้าเครื่องมือทั้งหมดที่ฉันเชื่อมโยงไว้ที่นี่แล้วและพวกเขาตอบสนองความต้องการของฉันได้ไม่เกิน 3 ข้อเท่านั้น ดังนั้นโปรดอย่าโพสต์ซ้ำเกี่ยวกับเครื่องมือเหล่านี้ ฉันจะยอมรับคำตอบที่ให้เครื่องมือเดียวที่ตรงตามข้อกำหนดทั้ง 5 ข้อของฉันหรือหากมีคนโพสต์เวิร์กโฟลว์ / สคริปต์ / ตัวอย่างการทำงานที่เป็นรูปธรรมของ toolchain ของเครื่องมือดังกล่าวหลายตัวที่ตรงตามความต้องการทั้งหมดของฉัน ขอขอบคุณ.

need.jsทำทุกอย่างที่คุณต้องการ

คำตอบของฉันสำหรับคำถามนี้อาจช่วยคุณได้

ตัวอย่าง:

ลำดับชั้นโครงการแอปไคลเอ็นต์:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.jsเป็นที่ที่คุณเริ่มต้นแอปพลิเคชันไคลเอนต์และกำหนดค่า require.js:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

การอ้างอิงจะใช้ปลั๊กอินcsเมื่อนำหน้าด้วย "cs!" ปลั๊กอิน cs รวบรวมไฟล์ Coffeescript

เมื่อคุณไปในแยงคุณสามารถเตรียมรวบรวมโครงการทั้งหมดของคุณด้วยr.js

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

ความต้องการของคุณมีดังนี้:

• จัดการการอ้างอิงฝั่งไคลเอ็นต์ของฉันในรูปแบบที่คล้ายกับ package.json ของ npm หรือ bower's component.json แตกต่าง แต่ดี!

• ฉันควรมีความยืดหยุ่นในการชี้ไปที่ git repo หรือไฟล์ js จริง (ทั้งบนเว็บหรือในเครื่อง) ในไฟล์ dependency.json ของฉันสำหรับไลบรารีที่รู้จักกันน้อย (npm ให้คุณชี้ไปที่ git repos) ใช่

• ควรย่อขนาดและเนมสเปซไลบรารีทั้งหมดลงในไฟล์เดียวเช่น ender ซึ่งเป็นไฟล์ js เดียวที่ฉันต้องใส่ในสคริปต์แท็กในฝั่งไคลเอ็นต์ ใช่กับ r.js

• ควรมีการสนับสนุนกาแฟแบบกล่องเช่น Box ใช่

• ในเบราว์เซอร์ฉันสามารถใช้ได้ว่าต้องการสไตล์หรือ headjs ใช่

http://requirejs.org/คือสิ่งที่คุณกำลังมองหาฉันเชื่อ

ในฐานะ @ Guillaume86 ฉันคิดว่ามิ้มจะทำให้คุณได้ใกล้ชิดกับที่ที่คุณต้องการมากที่สุด

ในการพึ่งพาชายเสื้อจะถูกจัดการโดยใช้การรวมกันของ npm และ hem ใช้ npm เพื่อติดตั้งการอ้างอิงภายนอกทั้งหมดของโปรเจ็กต์ของคุณอย่างชัดเจน ใช้การปิดล้อมเพื่อระบุว่าการอ้างอิงใด (ทั้งภายนอกและภายใน) ควรจะเย็บเข้าด้วยกันสำหรับการดำเนินการด้านไคลเอ็นต์ของคุณ

ฉันสร้างโครงกระดูกของสิ่งนี้เพื่อให้คุณสามารถดูว่ามันจะทำงานอย่างไร - คุณสามารถดูได้ที่https://github.com/dsummersl/clientsidehem

การเพิ่มการอ้างอิง

ใช้ npm เพื่อค้นหาการอ้างอิงเฉพาะจากนั้นแก้ไขไฟล์ package.json เพื่อให้แน่ใจว่ามีการติดตามการอ้างอิงในอนาคต จากนั้นระบุการอ้างอิงสำหรับแอปพลิเคชันของคุณใน slug.json

ตัวอย่างเช่นสมมติว่าคุณต้องการเพิ่มการพึ่งพาสคริปต์กาแฟ เพียงใช้ npm เพื่อติดตั้งการอ้างอิงและบันทึกลงในไฟล์ package.json ของคุณ:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

สมมติว่าคุณต้องการรวมโมดูลของคุณเอง 'bloomfilters' และไม่ได้อยู่ในรีจิสทรีของ npm คุณสามารถเพิ่มลงในโครงการของคุณได้ด้วยวิธีต่อไปนี้:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

โมดูลท้องถิ่น

หากคุณต้องการรวมกาแฟหรือจาวาสคริปต์ของคุณเองคุณสามารถทำได้โดยการเพิ่มไฟล์เหล่านั้นลงในแอพ / โฟลเดอร์ โปรดทราบว่าในการแสดงสคริปต์ของคุณผ่านวิธี 'ต้องการ' คุณต้องทำให้มันเป็นโมดูล CommonJS มันเป็นเรื่องง่ายมาก - ดูเอกสารมิ้ม

ไฟล์ในเครื่อง

หากคุณต้องการรวมโค้ดที่ไม่ใช่ CommonJS ที่ไม่ใช่ 'ต้อง' คุณยังสามารถต่อโดยอ้างอิงจาวาสคริปต์หรือกาแฟที่กำหนดเองของคุณผ่านรายการ 'libs' ใน slug.json

CSS

Hem จะรวม CSS ของคุณเข้าด้วยกันหากคุณต้องการ ดูเอกสารมิ้ม

อาคาร

เมื่อคุณมีรายการอ้างอิงของคุณแล้วคุณสามารถใช้ชายเสื้อเพื่อเย็บเข้าด้วยกัน

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

หมายเหตุ

เฮมมีไว้สำหรับโครงการกระดูกสันหลัง - แต่คุณไม่จำเป็นต้องใช้มันเพื่อสิ่งนั้น ไม่สนใจเอกสารใด ๆ ที่กล่าวถึงกระดูกสันหลังตามที่คุณต้องการ ...

ฉันแปลกใจที่ยังไม่มีใครพูดถึงBrowserifyเลย

1. รองรับรูปแบบ package.json
2. ใช้ npm ด้านล่างซึ่งสามารถใช้ github (หรือ git ใดก็ได้) repo เป็นแหล่งแพ็กเกจ
3. ย่อขนาดและเชื่อมการอ้างอิงทั้งหมดลงในไฟล์เดียว
4. สนับสนุนกาแฟถ้าคุณรวมไว้ในการอ้างอิงของคุณ
5. ต้องการสไตล์ตลอดทาง
6. รองรับแผนที่ต้นทาง

ฉันค่อนข้างมั่นใจว่าHemตรงตามความต้องการของคุณ (ฉันใช้ส้อมส่วนตัวกับคอมไพเลอร์เพิ่มเติม - หยกและสไตลัส - ง่ายต่อการปรับแต่งตามความต้องการของคุณ) ใช้ npm ในการจัดการการอ้างอิง

คุณอาจต้องการดูYeomanซึ่งใช้เทคนิคต่างๆเพื่อช่วยให้คุณตอบสนองความต้องการของคุณ

เวิร์กโฟลว์ของเราประกอบด้วยเครื่องมือสามอย่างในการปรับปรุงประสิทธิภาพการทำงานและความพึงพอใจของคุณเมื่อสร้างเว็บแอป ได้แก่yo (เครื่องมือสร้างนั่งร้าน), คำราม (เครื่องมือสร้าง) และโบเวอร์ (สำหรับการจัดการแพ็คเกจ)

การสนับสนุนในตัวสำหรับ CoffeeScript เข็มทิศและอื่น ๆ ทำงานร่วมกับ r.js ( RequireJS ), unittesting เป็นต้น

สำหรับความต้องการของคุณ:

1. Bower ใช้สำหรับการจัดการการพึ่งพา
2. Bower สามารถทำงานกับไฟล์ในเครื่อง, git: //, http: // และอื่น ๆ
3. การสนับสนุนในตัวสำหรับการย่อขนาดและการเรียงต่อกัน (แม้กระทั่งสำหรับรูปภาพของคุณ)
4. การสนับสนุน Build-in เพื่อรวบรวม CoffeeScript & Compass โดยอัตโนมัติ (พร้อม LiveReload)
5. ตามที่ระบุไว้ในขั้นตอนการสร้าง: หากคุณใช้ AMD ฉันจะส่งผ่านโมดูลเหล่านั้นผ่าน r.js ดังนั้นคุณจึงไม่ต้องทำ

คุณสมบัติทั้งหมด:

โครงนั่งร้านที่รวดเร็วทันใจ - สร้างโครงงานใหม่ได้อย่างง่ายดายด้วยเทมเพลตที่ปรับแต่งได้ (เช่น HTML5 Boilerplate, Twitter Bootstrap), RequireJS และอื่น ๆ

กระบวนการสร้างที่ยอดเยี่ยม - ไม่เพียง แต่คุณจะได้รับการลดขนาดและการต่อกันเท่านั้น ฉันยังปรับแต่งไฟล์รูปภาพ HTML คอมไพล์ไฟล์ CoffeeScript และ Compass ทั้งหมดของคุณหากคุณใช้ AMD ฉันจะส่งโมดูลเหล่านั้นผ่าน r.js เพื่อที่คุณจะได้ไม่ต้องทำ

รวบรวม CoffeeScript และเข็มทิศโดยอัตโนมัติ - กระบวนการดู LiveReload ของเราจะรวบรวมไฟล์ต้นฉบับโดยอัตโนมัติและรีเฟรชเบราว์เซอร์ของคุณทุกครั้งที่มีการเปลี่ยนแปลงเพื่อที่คุณจะได้ไม่ต้องทำ

ทับสคริปต์ของคุณโดยอัตโนมัติ - สคริปต์ทั้งหมดของคุณจะทำงานโดยอัตโนมัติกับ JSHint เพื่อให้แน่ใจว่าเป็นไปตามแนวทางปฏิบัติที่ดีที่สุดด้านภาษา

เซิร์ฟเวอร์แสดงตัวอย่างในตัว - ไม่ต้องเปิดเซิร์ฟเวอร์ HTTP ของคุณเองอีกต่อไป หนึ่งในตัวของฉันสามารถยิงได้ด้วยคำสั่งเพียงคำสั่งเดียว

การเพิ่มประสิทธิภาพภาพที่ยอดเยี่ยม - ฉันปรับแต่งภาพทั้งหมดของคุณโดยใช้ OptiPNG และ JPEGTran เพื่อให้ผู้ใช้ของคุณใช้เวลาในการดาวน์โหลดเนื้อหาน้อยลงและใช้เวลาในการใช้แอปของคุณมากขึ้น

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

การทดสอบหน่วย PhantomJS - เรียกใช้การทดสอบหน่วยของคุณได้อย่างง่ายดายใน WebKit แบบไม่มีหัวผ่าน PhantomJS เมื่อคุณสร้างแอปพลิเคชันใหม่ฉันจะรวมโครงทดสอบสำหรับแอปของคุณด้วย

Bowerอาจเหมาะกับความต้องการของคุณ (1) และ (2) สำหรับส่วนที่เหลือที่คุณต้องการ จาก readme:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

ในการติดตั้งแพ็คเกจ:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

ดูแพคเกจผู้จัดการแจม ต่อไปนี้เป็นคำอธิบายจากหน้าแรก

สำหรับนักพัฒนาส่วนหน้าที่ต้องการทรัพย์สินที่ดูแลรักษาได้ Jam เป็นผู้จัดการแพ็คเกจสำหรับ JavaScript ไม่เหมือนที่เก็บอื่น ๆ เราใส่เบราว์เซอร์ก่อน

ดูเหมือนว่าจะคล้ายกับ npm มากในการทำงาน

ติดตั้งแพ็คเกจตามด้านล่าง

jam install backbone

ทำให้แพคเกจทันสมัยอยู่เสมอโดยดำเนินการ

jam upgrade
jam upgrade {package} 

ปรับแพ็คเกจสำหรับการผลิตให้เหมาะสม

jam compile compiled.min.js

สามารถเพิ่มการอ้างอิง Jam ในpackage.jsonไฟล์

สำหรับเอกสารทั้งหมดโปรดอ่านเอกสาร Jam

ฉันเพิ่งเจอinject.js

คุณลักษณะบางอย่างจากไซต์โครงการ :

Inject (Apache Software License 2.0) เป็นวิธีการปฏิวัติในการจัดการการอ้างอิงของคุณด้วยวิธีไม่เชื่อเรื่องพระเจ้า คุณสมบัติที่สำคัญบางประการ ได้แก่ :

• การปฏิบัติตาม CommonJS ในเบราว์เซอร์ (การส่งออก. *)
• ดูเมทริกซ์ CommonJS Support แบบเต็ม
• การดึงไฟล์ข้ามโดเมน (ผ่าน easyXDM)
• localStorage (โหลดโมดูลหนึ่งครั้ง)

มีสองตัวเลือก:

• http://browserify.org/ซึ่งอนุญาตให้คุณนำเข้าโมดูล
• ต้องการ JSแก้ไขปัญหาเดียวกัน
• สิ่งหนึ่งที่ดูเหมือนว่าจะอยู่ในการพัฒนาคือJoinJS

ส่วนประกอบอาจเป็นที่สนใจโดยไม่ได้จัดการการอ้างอิงตามแต่ละส่วน แต่อนุญาตให้คุณใช้ไลบรารีขนาดใหญ่ที่สับแล้ว

ฉันใช้ hem กับ npm และฉันต้องการเพิ่มสิทธิประโยชน์เพิ่มเติมบางอย่างที่ฉันคิดว่ายังไม่ครอบคลุมถึงตอนนี้

• Hem มีเว็บเซิร์ฟเวอร์ในตัว (ชั้น) เพื่อให้คุณสามารถพัฒนาโค้ดของคุณโดยไม่จำเป็นต้องคอมไพล์ใหม่ ฉันไม่เคยใช้hem buildเว้นแต่ฉันจะเผยแพร่แอป
• คุณไม่จำเป็นต้องใช้ Spine.js เพื่อใช้ hem คุณสามารถใช้เพื่อรวบรวมแพ็คเกจกาแฟโดยพลการหากคุณตั้งค่า slug.json อย่างถูกต้อง นี่คือหนึ่งในแพ็คเกจของฉันที่คอมไพล์อัตโนมัติด้วย cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• เมื่อพูดถึงข้างต้น hem ช่วยให้คุณสามารถเชื่อมโยงการอ้างอิงอื่น ๆ ในระบบท้องถิ่นของคุณด้วยลิงก์ npm และรวมเข้าด้วยกันได้อย่างราบรื่นแม้ว่าคุณจะใช้เซิร์ฟเวอร์ strata ก็ตาม ในความเป็นจริงคุณไม่จำเป็นต้องใช้cakeวิธีการข้างต้นคุณสามารถเชื่อมโยงโดยตรงกับกาแฟจากโครงการที่เกี่ยวข้องได้
• Hem สนับสนุนeco(Coffeescript แบบฝัง) สำหรับมุมมองและ Stylus สำหรับ CSS และรวบรวมสิ่งเหล่านั้นทั้งหมดพร้อมกับ Coffeescript ของคุณเป็นไฟล์ JS และไฟล์ CSS หนึ่งไฟล์

นี่คือรายการพื้นฐานสำหรับการตั้งค่าแอป Spine, hem, coffeescript อย่าลังเลที่จะเพิกเฉยต่อชิ้นส่วนกระดูกสันหลัง ในความเป็นจริงบางครั้งฉันใช้spine appเพื่อตั้งค่าโครงสร้างไดเร็กทอรีสำหรับแอปที่ไม่ใช่ Spine จากนั้นแก้ไขslug.jsonเพื่อเปลี่ยนเป็นโครงสร้างการคอมไพล์อื่น

1. ติดตั้ง NPM: curl http://npmjs.org/install.sh | shบนระบบ * nix ฉันจะถือว่ามันพร้อมใช้งานจากบรรทัดคำสั่ง
2. ติดตั้ง hem ทั่วโลก ( npm install -g hem) การพัฒนาได้แตกแขนงไปแล้วดังนั้นคุณอาจต้องการนำมันออกจาก github โดยตรง ( https://github.com/spine/hem ) ชำระเงินสาขาและnpm install -g .ในโฟลเดอร์นั้น
3. npm install -g spine.app จะทำให้กระดูกสันหลังพร้อมใช้งานเป็นคำสั่งส่วนกลาง
4. spine app folderจะสร้างโครงการ Spine ที่เรียกappเข้ามาfolderการสร้างโครงสร้างไดเรกทอรีที่เหมาะสมและพวงของไฟล์โครงกระดูกที่จะเริ่มต้น
5. cdไปยังโฟลเดอร์และแก้ไขdependencies.jsonไลบรารีที่คุณต้องการ เพิ่มเข้าไปslug.jsonเพื่อให้มิ้มรู้ว่าจะหาได้ที่ไหนเช่นกัน
6. ทางเลือก: npm linkแพ็กเกจในพื้นที่ของคุณที่อยู่ระหว่างการพัฒนาnode_modulesและคุณสามารถเพิ่มลงในslug.jsonสำหรับชายเสื้อได้ (ไม่ว่าindex.jsจะรวมโดยตรงหรือindex.coffeeถ้าคุณต้องการให้มิ้มรวบรวม)
7. npm install . เพื่อดาวน์โหลดการอ้างอิงทั้งหมดที่คุณเพิ่งป้อน

8. หากคุณดูการกำหนดค่ากระดูกสันหลังเริ่มต้นจะมีไฟล์ app/lib/setup.coffeeที่คุณrequireทุกห้องสมุดที่คุณต้องการจากการอ้างอิงของคุณ ตัวอย่าง:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'
   

9. ในindex.coffeeนั้นคุณเพียงแค่require lib/setupโหลดตัวควบคุมหลักสำหรับแอปของคุณ นอกจากนี้คุณต้องrequireเรียนคลาสอื่น ๆ ในคอนโทรลเลอร์อื่น ๆ คุณสามารถใช้spine controller somethingหรือspine model somethingสร้างเทมเพลตสำหรับคอนโทรลเลอร์และโมเดล ตัวควบคุม Spine ทั่วไปมีลักษณะดังต่อไปนี้โดยใช้โหนดrequire:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header
   

10. ค่าเริ่มต้นที่สร้างขึ้น index.htmlจะใช้ได้ดีสำหรับการโหลดแอปของคุณ แต่แก้ไขตามความจำเป็น ตามความต้องการของคุณจะดึงเพียงไฟล์jsเดียวและcssไฟล์เดียวซึ่งคุณไม่จำเป็นต้องแก้ไข

11. แก้ไขไฟล์สไตลัสของคุณตามความจำเป็นในcssโฟลเดอร์ มันยืดหยุ่นกว่า CSS มาก :)
12. จากfolderรันhem serverเพื่อเริ่มเซิร์ฟเวอร์เฮ็มและไปที่localhost:9294เพื่อดูแอพของคุณ (หากคุณติดตั้งเฮ็มทั่วโลก) มันมีอาร์กิวเมนต์ที่ซ่อนอยู่ตัวอย่างเช่น--host 0.0.0.0ฟังบนพอร์ตทั้งหมด
13. สร้างแอปที่เหลือของคุณโดยใช้เทคนิค MVC ที่เหมาะสมและใช้สไตลัสสำหรับ CSS และ eco สำหรับมุมมอง หรือไม่ใช้ Spine เลยและการปิดท้ายจะยังคงใช้งานได้ดีกับ Coffeescript และ npm มีตัวอย่างโครงการมากมายที่ใช้ทั้งสองแบบ

อีกอย่างหนึ่ง: โดยปกติhem serverจะอัปเดตโดยอัตโนมัติเมื่อคุณอัปเดตรหัสและบันทึกไฟล์ซึ่งทำให้การดีบักเป็นเรื่องง่าย การเรียกใช้hem buildจะรวบรวมแอปของคุณเป็นสองไฟล์application.jsซึ่งย่อขนาดและapplication.css. ถ้าคุณวิ่งhem serverหลังจากนี้ไฟล์จะใช้ไฟล์เหล่านั้นและจะไม่อัปเดตโดยอัตโนมัติอีกต่อไป ดังนั้นอย่าhem buildจนกว่าคุณจะต้องใช้แอปเวอร์ชันย่อสำหรับการใช้งานจริง

ข้อมูลอ้างอิงเพิ่มเติม: Spine.js & hem เริ่มต้น

นี่คือโซลูชันที่ใช้แนวทางที่แตกต่างกันมาก: รวมโมดูลทั้งหมดไว้ในออบเจ็กต์ JSON และต้องการโมดูลโดยการอ่านและดำเนินการเนื้อหาไฟล์โดยไม่ต้องร้องขอเพิ่มเติม

การใช้งานการสาธิต Pure Clientide: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / ต้องขึ้นอยู่กับการมีแพ็คเกจ JSON พร้อมใช้งานที่รันไทม์ requireฟังก์ชั่นถูกสร้างขึ้นสำหรับแพคเกจที่ แพคเกจประกอบด้วยไฟล์ทั้งหมดที่แอปของคุณต้องการ ไม่มีการร้องขอ http เพิ่มเติมเนื่องจากแพคเกจรวมการอ้างอิงทั้งหมด สิ่งนี้ใกล้เคียงที่สุดเท่าที่จะทำได้ตามสไตล์ Node.js ที่ไคลเอ็นต์ต้องการ

โครงสร้างของแพ็คเกจมีดังนี้:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

แตกต่างจากโหนดที่แพ็คเกจไม่ทราบว่าเป็นชื่อภายนอก มันขึ้นอยู่กับ pacakge รวมถึงการพึ่งพาเพื่อตั้งชื่อ สิ่งนี้ให้การห่อหุ้มที่สมบูรณ์

เนื่องจากการตั้งค่าทั้งหมดนี้เป็นฟังก์ชันที่โหลดไฟล์จากภายในแพ็คเกจ:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

บริบทภายนอกนี้จัดเตรียมตัวแปรบางอย่างที่โมดูลสามารถเข้าถึงได้

requireฟังก์ชั่นการสัมผัสกับโมดูลเพื่อให้พวกเขาอาจต้องใช้โมดูลอื่น ๆ

คุณสมบัติเพิ่มเติมเช่นการอ้างอิงไปยังวัตถุส่วนกลางและข้อมูลเมตาบางส่วนจะถูกเปิดเผยด้วย

ในที่สุดเราก็รันโปรแกรมภายในโมดูลและบริบทที่กำหนด

คำตอบนี้จะเป็นประโยชน์มากที่สุดสำหรับผู้ที่ต้องการมีสไตล์ node.js แบบซิงโครนัสต้องการคำสั่งในเบราว์เซอร์และไม่สนใจโซลูชันการโหลดสคริปต์ระยะไกล

ตรวจสอบcarteroหากคุณใช้ node / express บนแบ็กเอนด์

ฉันขอแนะนำให้ตรวจสอบชุดเครื่องมือ dojoซึ่งดูเหมือนว่าจะตรงกับความต้องการของคุณมากที่สุด สิ่งที่ฉันไม่แน่ใจคือ CoffeeScript

dojo ทำงานกับโมดูลที่เขียนในรูปแบบ Asynchronous Module Definition (AMD) มีระบบสร้างพร้อมแพ็คเกจและคุณสามารถรวมไว้ในไฟล์เดียวหรือหลายไฟล์ (เรียกว่าเลเยอร์) เห็นได้ชัดว่ายอมรับที่เก็บประเภท git รายละเอียดเพิ่มเติมเกี่ยวกับระบบการสร้างที่นี่:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

สำหรับบันทึก v1.9 เบต้าคาดว่าในเดือนหน้า

เฟรมเวิร์กอื่นที่ตรงตามเกณฑ์ทั้งหมดของฉันที่เพิ่งเปิดตัว: http://duojs.org/ (และยังรองรับการปฏิบัติต่อทรัพยากรอื่น ๆ เช่น CSS เป็นการอ้างอิง)

การฉีดแบบพึ่งพาด้วยการโหลดแบบอะซิงโครนัส + browserify จะเป็นอีกทางเลือกที่ดีเมื่อเทียบกับ requirej

asynchronous-frontend-dependency-management-without-AMD