bower init - разница между amd, es6, глобалами и узлами

291

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

  • драм
  • ES6
  • глобалы
  • узел

В чем разница между этими вариантами?

node.js ecmascript-6 bower js-amd es2015 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-транспортером в качестве цели)
  • опубликуйте мой пакет, включающий в себя как его версию для модуля es6, так и версию XXX для трансплантации, и используйте его es6какmoduleType

Отказ от ответственности: у меня нет реального опыта создания модулей angularjs.

Мангл Дойц
источник
4
будет ли глобальный правильный ответ для создания модуля / пакета AngularJS?
1
Я обновил свой пост, добавив дополнительные соображения по вопросу «что делать с неподдерживаемыми менеджерами пакетов» - но опять же, это поле не является обязательным или используется для чего-либо прямо сейчас - его значение является только информативным. Что касается angularjsсамо по себе, я мог бы использовать globals, да, но прочитать мое обновление. Надеюсь, это поможет.
Изувеченный Deutz
Я использую узел. Означает ли это, что я выставляю модули узлов? Я также использую angular, который я устанавливал с помощью bower, когда заметил, что у меня есть сообщение о том, что у меня нет файла bower.json для сохранения, используйте bower init для его создания ». (Или, если это отдельный вопрос, я могу написать вопрос. Я подумал, что, возможно, этот комментарий уместен здесь, поскольку он относится к вашему ответу. Спасибо!)
PrairieProf
27

начальный

Я использую bower initв первый раз тоже.

Параметры должны ссылаться на различные способы модуляции некоторого кода JavaScript:

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

В моем случае я написал модуль dflow Node.js, но я использую browserify для создания файла dist / dflow.js, который экспортирует глобальный переменный dflow : поэтому я выбрал глобальные переменные .

Другие обновления

Команда, которую я использовал, чтобы просмотреть dflow как глобальный объект окна, была

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

Я изменил его, потому что я предпочитаю использовать require и внутри браузера, так что теперь я использую

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

и поэтому я изменил bower.moduleType на узел в моем файле bower.json .

Основная мотивация заключалась в том, что если в имени моего модуля есть тире, например, представление потока проекта , мне нужно вербализировать глобальное имя в flowView .

Этот новый подход имеет два других преимущества:

  1. Узел и интерфейс браузера одинаковы. Использование require как на стороне клиента, так и на стороне сервера, позвольте мне написать только один раз примеры кода и легко использовать их в обоих контекстах.
  2. Я использую сценарии 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
вы можете использовать require внутри define для ex: define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
Doron Segal
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
источник