init bower - ความแตกต่างระหว่าง amd, es6, globals และ node

291

ฉันกำลังสร้างองค์ประกอบ Bower แรกของฉัน หลังจากเรียกใช้bower initสคริปต์ถามฉันว่า 'แพคเกจนี้เปิดเผยโมดูลประเภทใด?' ด้วยตัวเลือกเหล่านี้:

เอเอ็มดี
ES6
Globals
ปม

ความแตกต่างระหว่างตัวเลือกเหล่านี้คืออะไร?

— pherris
แหล่งที่มา

121

หากคุณไม่รู้ก็เป็นไปได้ว่าคำตอบที่ถูกต้องสำหรับคุณ

ไม่ว่าจะด้วยวิธีใดคุณต้องเข้าใจ:

[อัปเดต]

ฟีเจอร์นี้เปิดตัวเมื่อไม่นานมานี้และไม่ได้รับการบันทึก (AFAIK) มันอธิบายหลักmoduleTypeซึ่งระบุถึงสิ่งที่เทคโนโลยีโมดูลแพคเกจจะหมายถึงการบริโภค (ดูด้านบน)

ตอนนี้มันไม่มีผลใด ๆ นอกเหนือจากการตั้งค่าmoduleTypeคุณสมบัติในbower.jsonไฟล์ของแพ็คเกจ

ดูhttps://github.com/bower/bower/pull/934สำหรับคำขอดึงแบบดั้งเดิม

[อัปเดต # 2]

จุดเพิ่มเติมเล็กน้อยเพื่อตอบความคิดเห็น:

ขณะนี้ AFAIK ไม่มีการตรวจสอบความถูกต้องของmoduleTypeคุณสมบัติ - ซึ่งหมายความว่าผู้คนได้รับอนุญาตทางเทคนิคให้ใช้สิ่งที่พวกเขาต้องการตามตัวอักษรรวมถึงangularjsหากพวกเขารู้สึกอยากจะทำเช่นนั้น
คณะกรรมการซุ้มดูเหมือนว่าจะไม่ได้รับความกระตือรือร้นต่อการรวมที่เพิ่มขึ้นnon-interoperable/proprietary moduleTypes(คิดว่านักแต่งเพลงเชิงมุม ฯลฯ ) - ซึ่งเป็นที่เข้าใจได้อย่างง่ายดายอีกครั้ง แต่ยังไม่มีอะไรจริงๆป้องกันไม่ให้คนจากการใช้moduleTypeค่าที่พวกเขาต้องการ
ข้อยกเว้นก่อนหน้านี้คือการรวม (ค่อนข้าง) เมื่อเร็ว ๆ นี้ของyui moduleTypeดังนั้นจึงมี "ข้อยกเว้น" ที่จะทำสมมติว่าพวกเขาเป็นส่วนหนึ่งของแผนร่วมกัน

ฉันจะทำอย่างไรถ้าฉันจะเขียนแพ็คเกจสำหรับผู้จัดการแพ็คเกจที่ไม่อยู่ในรายการและเผยแพร่บน bower?

ฉันจะเขียนโมดูล es6 และใช้ / patch es6-transpilerเพื่อแสดงผลรูปแบบแพ็คเกจที่ฉันต้องการ จากนั้นฉันก็จะ / และ:

ยื่นคำร้องให้คนป่าไม้รวมเทคโนโลยีแพคเกจของฉันเป็นตัวเลือก (ขึ้นอยู่กับความจริงที่ว่า ES6-transpiler สนับสนุนเป็นเป้าหมาย)
เผยแพร่แพ็คเกจของฉันรวมถึงทั้งโมดูลรุ่น es6 ของมันและรุ่น XXX transpiled ของมันและใช้es6เป็นmoduleType

ข้อจำกัดความรับผิดชอบ: ฉันไม่มีประสบการณ์ในชีวิตจริงที่เขียนโมดูลเชิงมุม

— Mangled Deutz
แหล่งที่มา

4

globals จะเป็นคำตอบที่เหมาะสมสำหรับการสร้างโมดูล / แพ็คเกจของ AngularJS หรือไม่

1

ฉันอัปเดตโพสต์ของฉันด้วยความคิดเพิ่มเติมเกี่ยวกับคำถาม "จะทำอย่างไรกับผู้จัดการแพคเกจที่ไม่สนับสนุน" - อีกครั้งฟิลด์นี้ไม่ได้รับคำสั่งหรือใช้สำหรับสิ่งใดในตอนนี้ - ค่าเป็นข้อมูลเท่านั้น สำหรับangularjsในตัวเองฉันอาจใช้globalsใช่ แต่อ่านอัปเดตของฉัน หวังว่าจะช่วย

— Mangled Deutz

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

— PrairieProf

27

แรกเริ่ม

ฉันใช้bower initเป็นครั้งแรกด้วย

ตัวเลือกควรอ้างอิงถึงวิธีต่างๆในการทำให้เป็นมาตรฐานรหัส JavaScript:

amd: การใช้ AMD defineเช่น likej
โหนด: การใช้ requireNode.js
globals: การใช้รูปแบบโมดูล JavaScript เพื่อเปิดเผยตัวแปรทั่วโลก (เช่น window.JQuery)
es6: การใช้คุณสมบัติโมดูล EcmaScript6 ที่จะเกิดขึ้น

ในกรณีของฉันฉันเขียนโมดูล Node.js dflowแต่ฉันใช้ browserify เพื่อสร้างอ / dflow.jsไฟล์ว่าการส่งออกทั่วโลกdflow var: ดังนั้นผมจึงเลือกGlobals

การปรับปรุงอื่น ๆ

คำสั่งที่ฉันใช้เพื่อทำให้เบราว์เซอร์ dflowเป็นวัตถุโกลบอลของหน้าต่าง

browserify -s dflow -e index.js -o dist/dflow.js

ฉันเปลี่ยนมันทำให้ฉันชอบที่จะใช้ต้องมีภายในเบราว์เซอร์ดังนั้นตอนนี้ฉันกำลังใช้

browserify -r ./index.js:dflow -o dist/dflow.js

ดังนั้นฉันจึงเปลี่ยนbower.moduleTypeเป็นโหนดในไฟล์bower.jsonของฉัน

แรงจูงใจหลักคือว่าถ้าชื่อโมดูลของฉันมีประตัวอย่างเช่นโครงการของฉันไหลมุมมองฉันต้องcamelizeชื่อระดับโลกในflowView

วิธีการใหม่นี้มีประโยชน์สองประการ:

โหนดและส่วนต่อประสานเบราว์เซอร์เหมือนกัน การใช้ต้องการทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ให้ฉันเขียนเพียงครั้งเดียวตัวอย่างโค้ดและนำมาใช้ใหม่ได้อย่างง่ายดายบนบริบททั้งสอง
ฉันใช้สคริปต์ npm และดังนั้นฉันสามารถใช้ประโยชน์จาก${npm_package_name}ตัวแปรและเขียนเมื่อสคริปต์ที่ฉันใช้เพื่อเบราว์เซอร์

นี่เป็นอีกหัวข้อ แต่คุณควรพิจารณาว่ามันมีประโยชน์อย่างไรกับประโยชน์หลัง: ให้ฉันแบ่งปันnpm.scripts.browserifyคุณลักษณะที่ฉันใช้ในpackage.jsonของฉัน

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"

— Gianluca Casati
แหล่งที่มา

1

จริงๆคุณสามารถใช้ต้องการภายในของการกำหนดสำหรับอดีต:

define(function(require, exports, module) {   "use strict";    module.exports = {     Collection: require("./collection"),     View: require('./view')   }; });

— Doron Segal

7

สำหรับการอ้างอิงนี่เป็นสิ่งที่ Bower ระบุเกี่ยวกับประเภทโมดูล:

ประเภทของโมดูลที่กำหนดไว้ในmainไฟล์ JavaScript สามารถเป็นหนึ่งหรืออาร์เรย์ของสตริงต่อไปนี้:

globals: โมดูล JavaScript ที่เพิ่มในเนมสเปซส่วนกลาง, การใช้window.namespaceหรือthis.namespaceไวยากรณ์

amd: โมดูล JavaScript ที่เข้ากันได้กับ AMD เช่นRequireJSโดยใช้define()ไวยากรณ์

node: โมดูล JavaScript เข้ากันได้กับโหนดและCommonJSโดยใช้module.exportsไวยากรณ์

es6: โมดูล JavaScript ใช้งานร่วมกับโมดูล ECMAScript 6 , การใช้exportและimportไวยากรณ์

yui: โมดูล JavaScript ใช้งานร่วมกับโมดูล YUIได้โดยใช้YUI.add()ไวยากรณ์

ลิงค์ที่เกี่ยวข้อง: https://github.com/bower/spec/blob/master/json.md#moduletype

— Wtower
แหล่งที่มา