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

Ответ 1

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

Ответ 2

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.

Когда вы заходите в prod, вы можете предварительно скомпилировать весь проект с помощью r.js.

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

Вот ваши требования:

• Управляйте зависимостями на стороне клиента в формате, подобном npm package.json или bower component.json. Разные, но КАК ХОРОШО!

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

• Он должен минимизировать и пропущать все библиотеки в один файл, например  ender - что единственный js файл, который мне нужно будет поместить в мой script -tag  на стороне клиента. ДА с помощью r.js.

• У него должна быть встроенная поддержка для coffeescript как Box. Да

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

Ответ 3

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

Ответ 4

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

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

Я создал проект скелета, чтобы вы могли видеть, как это будет работать - вы можете увидеть его на https://github.com/dsummersl/clientsidehem

Добавление зависимостей

Используйте npm для поиска определенной зависимости, а затем измените package.json чтобы гарантировать, что зависимость будет отслеживаться в будущем. Затем укажите для вашего приложения в slug.json.

Например, предположим, что вы хотите добавить зависимость coffee- script. Просто используйте 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/. Обратите внимание, что для того, чтобы разоблачить ваш script через метод "require" вы должны сделать его модулем CommonJS. Это очень просто - см. документ по умолчанию.

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

Если вы хотите включить код non-CommonJS non 'require', вы также можете сшить это путем ссылки на ваш пользовательский javascript или coffeescript через список "libs" в slug.json.

CSS

Если вы захотите, Hem будет сшивать ваш 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, но вы не должны использовать его для этого. Игнорируйте любые документы, в которых упоминается позвоночник, как вы пожелаете...

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

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

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

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

Все функции:

Молниеносные леса. Легко поднимите новые проекты с помощью настраиваемые шаблоны (например, HTML5 Boilerplate, Twitter Bootstrap), RequireJS и т.д.

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

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

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

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

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

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

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

Ответ 8

Bower может соответствовать вашим потребностям (1) и (2) для остальных, которые у вас требуются. Из файла readme:

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

Ответ 9

Посмотрите Менеджер пакетов Jam. Ниже приведено описание с его домашней страницы

Для сторонних разработчиков, которые жаждут поддерживаемых активов, Jam - это менеджер пакетов для JavaScript. В отличие от других репозиториев, мы сначала помещаем браузер.

Кажется, много похоже на npm в том, как это работает.

Установите пакет, как показано ниже

jam install backbone

обновление пакетов с помощью

jam upgrade
jam upgrade {package} 

Оптимизация пакетов для производства

jam compile compiled.min.js

Зависимости Jam могут быть добавлены в файл package.json.

Для полной документации прочтите Jam Documentation

Ответ 10

Я просто наткнулся на inject.js

Некоторые из функций, из сайта проекта:

Inject (Apache Software License 2.0) - это революционный способ управления вашими зависимостями в агностической библиотеке. Некоторые из его основных функций включают в себя:

• Совместимость с обычным явлением в браузере (экспорт. *)
• Просмотр полной матрицы поддержки CommonJS
• Перекрестный поиск файлов (через easyXDM)
• localStorage (загрузка модуля один раз)

Ответ 11

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

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

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

Ответ 12

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

• У Hem есть автономный веб-сервер (страты), поэтому вы можете разработать свой код, даже не перекомпилируя его. Я никогда не использую hem build, если я не публикую приложение.
• Вам не нужно использовать Spine.js для использования hem, вы можете использовать его для компиляции произвольных пакетов coffeescript, если вы правильно настроили slug.json. Вот один из моих пакетов, который автоматически скомпилирован с cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Говоря об этом, край позволяет связать другие зависимости с вашей локальной системой с помощью ссылки npm и легко сочетать их, даже когда вы используете сервер страт. Фактически, вам даже не нужно использовать метод cake выше, вы можете просто связать напрямую с coffeescript из зависимых проектов.
• Hem поддерживает eco (встроенный Coffeescript) для представлений и Stylus для CSS и компилирует все это вместе с вашим Coffeescript в один JS и один файл CSS.

Вот базовый список для настройки с помощью приложения Spine, hem, coffeescript. Не стесняйтесь игнорировать части позвоночника. Фактически, иногда я использую spine app для настройки структуры каталогов для приложения, отличного от Spine, а затем отредактируйте slug.json, чтобы перейти к другой структуре компиляции.

• Установите NPM: curl http://npmjs.org/install.sh | sh в систему * nix. Я предполагаю, что это доступно из командной строки.
• Установите край по всему миру (npm install -g hem). Развитие в последнее время разветвлено, поэтому вы можете получить его прямо из github (https://github.com/spine/hem), проверить ветку и npm install -g . в этой папке.
• npm install -g spine.app сделает доступную доступность позвоночника глобальной командой
• spine app folder создаст проект Spine под названием app в folder, создав правильную структуру каталогов и кучу скелетных файлов, чтобы начать работу.
• cd в папку и отредактируйте dependencies.json для нужных вам библиотек. Добавьте их в slug.json, чтобы подол знал, где их найти.
• Необязательно: npm link любой из ваших локальных пакетов в разработке до node_modules, и вы можете добавить их в slug.json для подол (либо index.js для включения напрямую, либо index.coffee, если вы хотите, чтобы скомпилируйте его.)
• npm install . для загрузки всех зависимостей, которые вы только что ввели.

• Если вы посмотрите на конфигурацию позвоночника по умолчанию, есть 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'
  

• В index.coffee вы просто require lib/setup и загрузите основной контроллер для своего приложения. Кроме того, вам нужно require любые другие классы в этих других контроллерах. Вы можете использовать spine controller something или spine model something для создания шаблонов для контроллеров и моделей. Типичный контроллер позвоночника выглядит следующим образом: node 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
  

• По умолчанию созданный index.html обычно подходит для загрузки вашего приложения, но при необходимости измените его. В соответствии с вашими требованиями он извлекает только один файл js и один css, который вам никогда не нужно изменять.

• При необходимости отредактируйте файлы стилуса в папке css. Это намного более гибкий, чем CSS:)
• В folder запустите hem server, чтобы запустить сервер заголовков, и перейдите к localhost:9294, чтобы увидеть свое приложение. (Если вы установили край глобально.) Он содержит несколько скрытых аргументов, например --host 0.0.0.0 прослушивает все порты.
• Создайте остальную часть своего приложения, используя надлежащие методы MVC, и используйте стилус для CSS и eco для просмотров. Или вообще не используйте Spine, и подол все еще отлично справится с Coffeescript и npm. Существует много примеров проектов, использующих обе модели.

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

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

Ответ 13

Здесь решение, которое принимает совсем другой подход: упаковывает все модули в объект 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

Этот внешний контекст предоставляет некоторую переменную, к которой модули имеют доступ.

Функция A require подвергается воздействию модулей, поэтому им могут потребоваться другие модули.

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

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

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

Ответ 14

Зайдите cartero, если вы используете node/express на сервере.

Ответ 15

Я предлагаю проверить dojo toolkit, который, как представляется, отвечает большинству ваших требований. Я не уверен, что это CoffeeScript.

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

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

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

Ответ 16

Включение зависимостей с асинхронной загрузкой + браузером будет еще одним хорошим выбором, сравнивается с requirejs

asynchronous-frontend-dependency-management-without-AMD

Ответ 17

Я создал script (4kb minified) для синхронной загрузки javascripts и css файлов, которые напоминают Java "import" и С++ "using". Это позволяет вам сделать это:

    _import('/jquery-min.js');
    alert($);

Он не использует мучительный процесс настройки, подобный процессу RequireJS, просто включите script в тег, и вы готовы к работе. Загрузка является синхронной, поэтому нет необходимости вставлять остальную часть кода в обратный вызов, как и в большинстве других загрузчиков script. Захватите это отсюда: https://github.com/maschinak/_import