bower init - різниця між amd, es6, глобалами та вузлом

291

Я створюю свій перший компонент Бауера. Після запуску bower initсценарію запитує мене: «Яким типам модулів виставляється цей пакет?» з цими параметрами:

amd
es6
глобалів
вузол

в чому різниця між цими варіантами?

— ферис
джерело

121

Якщо ви не знаєте, цілком вірогідні глобальні питання - це правильна відповідь для вас.

У будь-якому випадку вам потрібно зрозуміти:

[ОНОВЛЕННЯ]

Ця функція була запроваджена зовсім недавно на луці і ще не документально підтверджена (AFAIK). Він по суті описує те moduleType, в якому зазначено, для якої модульної технології передбачається споживати пакет (див. Вище).

Наразі це не має жодного ефекту, крім встановлення moduleTypeвластивості у bower.jsonфайлі пакету.

Див. Https://github.com/bower/bower/pull/934 для отримання оригінального запиту.

[ОНОВЛЕННЯ №2]

Кілька додаткових моментів, щоб відповісти на коментарі:

зараз AFAIK не проводиться перевірка moduleTypeвласності - це означає, що людям технічно дозволяється використовувати будь-яку цінність, яку вони хочуть для неї, в тому числі, angularjsякщо вони відчувають схильність до цього.
комітет Альтанки , здається, не захоплюватися до включення додаткового non-interoperable/proprietary moduleTypes(думаю , композитор, кутовий і т.д.) - що легко зрозуміти, але ще раз, ніщо не заважає людям , використовуючиmoduleType значення вони хочуть
виняток із попереднього - це (дещо) недавнє включення проекту yui moduleType, тому існують "винятки", якщо вони є частиною узгодженого плану

Що б я зробив, якби створити пакет для не переліченого менеджера пакунків і опублікувати його на шафі?

Я б написав модуль es6 та використовував / виправляв es6-транспілятор для виведення потрібного мені формату пакету. Тоді я б / або:

клопотання хлопців, що користуються бантом, щоб включити мою пакетну технологію як вибір (виходячи з того, що це підтримується es6-транспілером як ціль)
опублікуйте мій пакет, включаючи як його модуль es6, так і перекладену версію XXX, і використовуйте його es6якmoduleType

Відмова: У мене немає досвіду створення авторських модулів angularjs.

— Зламаний Дейтс
джерело

4

Чи глобальні будуть правильною відповіддю для створення модуля / пакету AngularJS?

1

Я оновив свою публікацію додатковими думками щодо питання "що робити з непідтримуваними менеджерами пакунків" - але знову ж таки, це поле не є обов'язковим і не використовується ні для чого зараз - його значення є лише інформативним. Що стосується angularjsсамого себе, я можу використовувати globals, так, але прочитати своє оновлення. Сподіваюся, що це допомагає.

— Mangled Deutz

Я використовую вузол. Це означає, що я відкриваю модулі вузлів? Я також використовую кутовий. Це було те, що я встановлював за допомогою bower, коли я помітив, що у мене з'явилося повідомлення про те, що я не маю файлу bower.json для збереження, використовуйте bower init для його створення. (Або, якщо це окреме запитання, я можу написати запитання. Я подумав, що, можливо, це був відповідний коментар, який слід розмістити тут, оскільки це стосується вашої відповіді. Дякую!)

— PrairieProf

27

Початкові

Я також bower initвперше використовую .

Параметри повинні посилатися на різні способи модуляції деяких кодів JavaScript:

amd: використання AMD define, як і вимагає.
вузол: з допомогою Node.js require.
глобалі: використання шаблону модуля JavaScript для викриття глобальної змінної (наприклад, window.JQuery).
es6: використання функції майбутнього модуля EcmaScript6.

У моєму випадку я написав модуль dode.js dflow, але я використовую Browserify для створення файлу dist / dflow.js, який експортує глобальний var dflow : тому я вибрав глобалі .

Інші оновлення

Команда, якою я переглядав dflow як глобальний об'єкт вікна, була

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

Я змінив це, тому що я вважаю за краще використовувати також потрібно всередині браузера, тому зараз я користуюся

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

і тому я змінив bower.moduleType на вузол у своєму файлі bower.json .

Основна мотивація полягала в тому, що якщо в назви мого модуля є тире, наприклад, у моєму проектному потоковому перегляді , мені потрібно поставити глобальне ім'я в flowView .

Цей новий підхід має дві інші переваги:

Вузол та інтерфейс браузера однакові. Використовуючи вимагати як на стороні клієнта, так і на стороні сервера, дозвольте мені написати лише раз приклади коду та легко використовувати їх в обох контекстах.
Я використовую сценарії npm і так, я можу скористатися ${npm_package_name}змінною та записати один раз скрипт, який я використовую для перегляду.

Це ще одна тема, але, дійсно, варто подумати, наскільки корисна остання перевага: дозвольте мені поділитися npm.scripts.browserifyатрибутом, який я використовую в своєму пакеті.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')   }; });

— Дорон Сегал

7

Тільки для довідки, це саме те, що визначає бауер щодо типів модулів:

Тип модуля, визначений у 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
джерело