bower init - perbedaan antara amd, es6, global dan node

291

Saya membuat komponen Bower pertama saya. Setelah menjalankan bower initskrip bertanya kepada saya 'modul apa yang dipaparkan paket ini?' dengan opsi ini:

  • amd
  • es6
  • global
  • simpul

apa perbedaan antara opsi-opsi ini?

node.js ecmascript-6 bower js-amd es2015 pherris
sumber

Jawaban:

121

Jika Anda tidak tahu, kemungkinan besar global adalah jawaban yang tepat untuk Anda.

Bagaimanapun, Anda perlu memahami:

[MEMPERBARUI]

Fitur ini diperkenalkan baru-baru ini dalam bower dan belum didokumentasikan sama sekali (AFAIK). Ini pada dasarnya menggambarkan moduleType, yang menyatakan untuk teknologi modul apa paket dimaksudkan untuk dikonsumsi (lihat di atas).

Saat ini, Ini tidak memiliki efek apa pun selain mengatur moduleTypeproperti dalam bower.jsonfile paket.

Lihat https://github.com/bower/bower/pull/934 untuk permintaan tarik asli.

[PEMBARUAN # 2]

Beberapa poin tambahan, untuk menjawab komentar:

  • saat ini AFAIK tidak ada validasi yang dilakukan pada moduleTypeproperti - yang berarti bahwa orang secara teknis diizinkan untuk menggunakan nilai apa pun yang mereka inginkan untuk itu, termasuk angularjsjika mereka merasa cenderung untuk melakukannya
  • yang panitia pondok tampaknya tidak tertarik terhadap masuknya tambahan non-interoperable/proprietary moduleTypes(berpikir komposer, sudut, dll) - yang mudah dimengerti, tapi sekali lagi, tidak ada yang benar-benar mencegah orang dari menggunakan moduleTypenilai yang mereka inginkan
  • perkecualian untuk yang sebelumnya adalah (agak) dimasukkannya yang terbaru yui moduleType, jadi, ada "pengecualian" yang harus dibuat, dengan asumsi mereka adalah bagian dari rencana bersama

Apa yang akan saya lakukan jika saya membuat paket untuk manajer paket yang tidak terdaftar dan menerbitkannya di bower?

Saya akan membuat modul es6, dan menggunakan / patch es6-transpiler untuk menampilkan format paket yang saya butuhkan. Maka saya akan / dan:

  • petisi orang-orang bower untuk memasukkan teknologi paket saya sebagai pilihan (berdasarkan fakta itu didukung oleh es6-transpiler sebagai target)
  • publikasikan paket saya termasuk versi modul es6 dan versi XXX yang diubah-ubah, dan gunakan es6sebagai amoduleType

Penafian: Saya tidak memiliki pengalaman nyata membuat modul angularjs.

Deutz hancur
sumber
4
apakah global akan menjadi jawaban yang tepat untuk membuat modul / paket AngularJS?
1
Saya memperbarui posting saya dengan pemikiran tambahan tentang pertanyaan "apa yang harus dilakukan dengan manajer paket yang tidak didukung" - lagi-lagi, bidang ini tidak wajib atau digunakan untuk apa pun sekarang - nilainya hanya informatif. Adapun angularjsdalam dirinya sendiri, saya mungkin menggunakan globals, ya, tetapi baca pembaruan saya. Semoga itu bisa membantu.
Mangled Deutz
Saya menggunakan simpul. Apakah itu berarti saya mengekspos modul simpul? Saya juga menggunakan angular, yang saya instal menggunakan bower ketika saya perhatikan ada pesan yang mengatakan bahwa saya punya "Tidak ada file bower.json untuk disimpan, gunakan bower init untuk membuatnya". (Atau, jika ini adalah pertanyaan terpisah, saya dapat menulis pertanyaan. Saya pikir mungkin ini adalah komentar yang tepat untuk dimasukkan di sini karena ini berkaitan dengan jawaban Anda. Terima kasih!)
PrairieProf
27

Awal

Saya menggunakan bower inituntuk pertama kalinya juga.

Opsi harus merujuk pada berbagai cara untuk memodulasi beberapa kode JavaScript:

  • amd: menggunakan AMD define, seperti requirejs.
  • simpul: menggunakan Node.js require.
  • global: menggunakan pola modul JavaScript untuk mengekspos variabel global (seperti window.JQuery).
  • es6: menggunakan fitur modul EcmaScript6 mendatang.

Dalam kasus saya, saya menulis modul Node.js dflow tapi saya menggunakan browserify untuk membuat file dist / dflow.js yang mengekspor var aliran global : jadi saya memilih global .

Pembaruan Lainnya

Perintah yang saya gunakan untuk menjelajah dflow sebagai objek jendela global adalah

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

Saya mengubahnya karena saya lebih suka menggunakan harus juga di dalam browser, jadi sekarang saya menggunakan

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

dan jadi saya mengubah bower.moduleType ke node di file bower.json saya .

Motivasi utama adalah bahwa jika nama modul saya memiliki tanda hubung, misalnya tampilan alur proyek saya , saya perlu menyamarkan nama global dalam flowView .

Pendekatan baru ini memiliki dua manfaat lain:

  1. Antarmuka node dan browser sama. Menggunakan memerlukan di kedua sisi klien dan sisi server, izinkan saya menulis hanya sekali contoh kode, dan menggunakannya kembali dengan mudah pada kedua konteks.
  2. Saya menggunakan skrip npm dan karenanya, saya bisa memanfaatkan ${npm_package_name}variabel dan menulis begitu skrip yang saya gunakan untuk menjelajah.

Ini adalah topik lain, tetapi, sangat layak bagi Anda untuk mempertimbangkan bagaimana manfaatnya bermanfaat bagi yang terakhir: izinkan saya berbagi npm.scripts.browserifyatribut yang saya gunakan di package.json saya

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

Gianluca Casati
sumber
1
Anda benar-benar dapat menggunakan membutuhkan dalam define untuk ex: define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
Doron Segal
7

Hanya untuk referensi, inilah yang ditentukan bower terkait jenis modul:

Jenis modul yang ditentukan dalam mainfile JavaScript. Dapat berupa satu atau array dari string berikut:

  • globals: Modul JavaScript yang menambah namespace global, menggunakan window.namespaceatau this.namespacesintaksis
  • amd: Modul JavaScript kompatibel dengan AMD, seperti RequireJS , menggunakan define()sintaks
  • node: Modul JavaScript kompatibel dengan node dan CommonJS menggunakan module.exportssintaks
  • es6: Modul JavaScript kompatibel dengan modul ECMAScript 6 , menggunakan exportdan importsintaksis
  • yui: Modul JavaScript kompatibel dengan Modul YUI , menggunakan YUI.add()sintaks

Tautan yang relevan: https://github.com/bower/spec/blob/master/json.md#moduletype

Wtower
sumber