Как управлять зависимостями клиентского JavaScript? [закрыто]

Хотя существуют отличные решения для управления зависимостями на стороне сервера, я не смог найти ни одного, которое удовлетворяло бы все мои потребности в согласованном рабочем процессе управления зависимостями JavaScript на стороне клиента. Я хочу удовлетворить эти 5 требований:

1. Управлять зависимостями на стороне клиента в формате, похожем на пакет npm package.json или bower. «сbower.json
2. Он должен иметь возможность указывать на репозиторий git или на фактические js-файлы (в Интернете или локально) в моем dependency.jsonфайле для менее известных библиотек (npm позволяет вам указывать на репозитории git)
3. Он должен минимизировать и объединить все библиотеки в один файл, например ender - это единственный файл js, который мне нужно было бы поместить в свой <script>тег на стороне клиента.
4. Он должен иметь встроенную поддержку CoffeeScript, например BoxJS 4 (теперь мертв)

5. В браузере я смогу использовать любой стиль require :

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

   Или еще лучше, сделайте стиль headjs :

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

Если такого единого инструмента не существует, какая комбинация инструментов лучше всего, то есть цепочка инструментов, которую я могу комбинировать, используя что-то вроде volo (или grunt )?

Я уже исследовал все инструменты, с которыми я связался здесь, и они удовлетворяют только до трех моих требований в лучшем случае индивидуально. Поэтому, пожалуйста, не публикуйте больше об этих инструментах. Я бы согласился только с ответом, который предоставляет один инструмент, который удовлетворяет всем 5 моим требованиям, или если кто-то опубликует конкретный рабочий процесс / сценарий / рабочий пример цепочки инструментов из нескольких таких инструментов, который также удовлетворяет всем моим требованиям. Спасибо.

require.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 или component.json в bower. По-другому, но КАК ХОРОШО!

• У меня должна быть возможность указать в моем файле dependency.json для менее известных библиотек git repo или фактические файлы js (либо в Интернете, либо локально) (npm позволяет указать репозитории git). ДА

• Он должен минимизировать и объединить все библиотеки в один файл, например ender - это единственный файл js, который мне нужно было бы поместить в свой тег сценария на стороне клиента. ДА с r.js.

• Он должен иметь встроенную поддержку coffeescript, например Box. ДА

• В браузере я могу использовать требуемый стиль или headjs. ДА

http://requirejs.org/ - это тот, который вы ищете, я считаю

Как @ Guillaume86, я думаю, он поможет вам максимально приблизиться к тому месту, где вы хотите быть.

В hem зависимости управляются с помощью комбинации npm и hem. Используйте npm, чтобы явно установить все внешние зависимости ваших проектов. Используйте hem, чтобы указать, какие зависимости (как внешние, так и локальные) должны быть сшиты вместе для операций на стороне клиента.

Я создал скелет этого проекта, чтобы вы могли увидеть, как это будет работать - вы можете увидеть его на 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".

Локальные модули

Если вы хотите добавить свой собственный кофе или javascript, вы можете сделать это, добавив эти файлы в папку app /. Обратите внимание, что для того, чтобы раскрыть ваш скрипт с помощью метода require, вы должны сделать его модулем CommonJS. Это очень просто - смотрите подол документацию .

Локальные файлы

Если вы хотите включить код, отличный от CommonJS, который не является «обязательным», вы также можете сшить его, указав свой собственный javascript или coffeescript через список «libs» в slug.json.

CSS

Подол тоже сшивает ваш CSS, если хотите. См. Документацию по подолу .

Здание

Когда у вас есть список зависимостей, вы можете использовать кромку, чтобы сшить их все вместе.

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

Ноты

Hem предназначался для проекта spinejs, но вам не обязательно использовать его для этого. Если хотите, игнорируйте любые документы, в которых упоминается позвоночник ...

Что ж, я удивлен, что еще никто не упомянул Browserify .

1. поддерживает формат package.json
2. использует npm внизу, который может использовать репозиторий github (или любой другой git) в качестве источника пакета
3. минимизирует и объединяет все зависимости в один файл.
4. поддерживает coffeescript, если вы включаете его в свои зависимости
5. требуют стиля полностью.
6. поддерживает исходные карты

Я почти уверен, что Hem соответствует вашим требованиям (я использую личную вилку с дополнительными компиляторами - нефритом и стилусом - его легко настроить под ваши нужды). Он использует npm для управления зависимостями.

Возможно, вы захотите взглянуть на Yeoman , который использует несколько методов, чтобы помочь вам с вашими требованиями.

Наш рабочий процесс состоит из трех инструментов для повышения вашей продуктивности и удовлетворения при создании веб-приложения: yo (инструмент для создания шаблонов), grunt (инструмент для сборки) и bower (для управления пакетами).

Встроенная поддержка CoffeeScript, Compass и других. Работает с r.js ( RequireJS ), модульным тестированием и т. Д.

Что касается ваших требований:

1. Bower используется для управления зависимостями
2. Bower может работать с локальными файлами, git: //, http: // и другими
3. Встроенная поддержка минификации и конкатенации (даже для ваших изображений)
4. Встроенная поддержка для автоматической компиляции CoffeeScript и Compass (с LiveReload)
5. Как указано в процессе сборки: если вы используете AMD, я пропущу эти модули через r.js, чтобы вам не пришлось.

Все возможности:

Молниеносная скаффолдинг - легко создавайте новые проекты с помощью настраиваемых шаблонов (например, HTML5 Boilerplate, Twitter Bootstrap), RequireJS и других.

Отличный процесс сборки - вы не только получаете минификацию и конкатенацию; Я также оптимизирую все ваши файлы изображений, HTML, компилирую файлы CoffeeScript и Compass, если вы используете AMD, я передам эти модули через r.js, так что вам не придется.

Автоматическая компиляция CoffeeScript и Compass - наш процесс просмотра LiveReload автоматически компилирует исходные файлы и обновляет ваш браузер при каждом изменении, поэтому вам не нужно этого делать.

Автоматически линтируйте ваши скрипты - все ваши скрипты автоматически запускаются с JSHint, чтобы убедиться, что они соответствуют лучшим языковым практикам.

Встроенный сервер предварительного просмотра - больше не нужно запускать собственный HTTP-сервер. Мой встроенный можно запустить всего одной командой.

Потрясающая оптимизация изображений - я оптимизирую все ваши изображения с помощью OptiPNG и JPEGTran, чтобы ваши пользователи могли тратить меньше времени на загрузку ресурсов и больше времени на использование вашего приложения.

Убийственное управление пакетами - нужна зависимость? Это просто нажатие клавиши. Я разрешаю вам легко искать новые пакеты через командную строку (например, `bower search jquery), устанавливать их и обновлять без необходимости открывать браузер.

Модульное тестирование PhantomJS - легко запускайте модульные тесты в Headless WebKit через PhantomJS. Когда вы создаете новое приложение, я также включаю несколько тестовых шаблонов для вашего приложения.

Bower может удовлетворить ваши потребности (1) и (2), в остальном у вас есть requirejs. Из ридми:

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 . Ниже приводится описание с его домашней страницы.

Для интерфейсных разработчиков, которым нужны поддерживаемые ресурсы, 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
• Междоменное получение файлов (через easyXDM)
• localStorage (загрузить модуль один раз)

Есть несколько вариантов:

• http://browserify.org/, который позволяет импортировать модули
• RequireJS решает ту же проблему
• Похоже, что в активной разработке находится JoinJS.

Компонент также может представлять интерес, он не управляет зависимостями как таковой, но позволяет вам использовать нарезанные версии больших библиотек.

Я использую hem с npm, и я хотел добавить некоторые дополнительные преимущества, которые, как мне кажется, пока не рассматривались.

• Hem имеет автономный веб-сервер (страты), поэтому вы можете разрабатывать свой код без необходимости перекомпиляции. Я никогда не использую, hem buildесли не публикую приложение.
• Вам не нужно использовать Spine.js для использования hem, вы можете использовать его для компиляции произвольных пакетов coffeescript, если вы правильно настроили slug.json. Вот один из моих пакетов, который автоматически компилируется с помощью cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Говоря о вышесказанном, hem позволяет вам связывать другие зависимости в вашей локальной системе с помощью ссылки npm и легко объединяет их, даже когда вы используете сервер strata. Фактически, вам даже не нужно использоватьcake описанный выше метод, вы можете просто напрямую ссылаться на coffeescript из зависимых проектов.
• 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. Установите кромку глобально ( 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для hem (либо 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чтобы запустить сервер Hem, и перейдите к, localhost:9294чтобы увидеть свое приложение. (Если вы установили его глобально.) У него есть некоторые скрытые аргументы, например, --host 0.0.0.0прослушивает все порты.
13. Создайте остальную часть своего приложения, используя правильные методы MVC, и используйте стилус для CSS и eco для представлений. Или вообще не используйте Spine, и hem все равно будет отлично работать с Coffeescript и npm. Есть много примеров проектов, использующих обе модели.

Еще одна вещь: обычно hem serverобновляется автоматически по мере обновления кода и сохранения файлов, что упрощает отладку. При запуске hem buildваше приложение будет скомпилировано в два файла application.js, которые минифицированы и application.css. Если вы запустите hem serverпосле этого, он будет использовать эти файлы и больше не будет обновляться автоматически. Так что неhem build пока вам действительно не понадобится уменьшенная версия вашего приложения для развертывания.

Дополнительные ссылки: Spine.js & hem начало работы

Вот решение, использующее совершенно другой подход: упаковать все модули в объект JSON и потребовать модули путем чтения и выполнения содержимого файла без дополнительных запросов.

Чистая демонстрационная реализация на стороне клиента: http://strd6.github.io/editor/

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

STRd6 / require зависит от наличия пакета JSON во время выполнения. requireФункция генерируется для этого пакета. Пакет содержит все файлы, которые могут потребоваться вашему приложению. Никаких дальнейших HTTP-запросов не производится, потому что пакет связывает все зависимости. Это максимально приближено к стилю Node.js, который требуется для клиента.

Состав пакета следующий:

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

В отличие от Node, пакет не знает своего внешнего имени. Это зависит от 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Функция подвергается модулей , таким образом они могут потребоваться другие модули.

Также отображаются дополнительные свойства, такие как ссылка на глобальный объект и некоторые метаданные.

Наконец, мы выполняем программу в модуле и в заданном контексте.

Этот ответ будет наиболее полезен для тех, кто хочет иметь синхронную инструкцию require стиля node.js в браузере и не интересуется решениями для удаленной загрузки скриптов.

Проверьте cartero, если вы используете node / express на бэкэнде.

Я бы посоветовал проверить набор инструментов додзё, который, кажется, отвечает большинству ваших требований. Я не уверен, что это CoffeeScript.

dojo работает с модулями, написанными в формате определения асинхронного модуля (AMD). Он имеет систему сборки с пакетами, и вы можете объединить их в один или несколько файлов (называемых слоями). По-видимому, он принимает репозитории типа git, подробнее о системе сборки здесь:

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

Для справки, в следующем месяце ожидается бета-версия v1.9.

Другой фреймворк, который удовлетворяет всем моим критериям, выпущенный недавно: http://duojs.org/ (а также поддерживает обработку других ресурсов, таких как CSS, как зависимостей).

инъекция зависимостей с асинхронной загрузкой + браузер будет еще одним хорошим выбором по сравнению с requirejs

асинхронный-интерфейс-зависимости-управление-без-AMD