Як керувати залежностями JavaScript на стороні клієнта? [зачинено]

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

1. Управління залежностями моєї клієнтської сторони у форматі, подібному до npm's package.json або bower 'sbower.json
2. Він повинен мати гнучкість вказувати на git repo або фактичні файли js (або в Інтернеті, або локально) у моєму dependency.jsonфайлі для менш відомих бібліотек (npm дозволяє вказувати на git repos)
3. Він повинен мінімізувати та простір імен усі бібліотеки в один файл, такий як ender - це єдиний js-файл, який мені потрібно було б помістити в <script>мітку на стороні клієнта
4. Він повинен мати готову підтримку для CoffeeScript, як BoxJS 4 (тепер мертвий)

5. У браузері я повинен мати можливість використовувати будь-який потрібний стиль:

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

   Або ще краще, зробіть стиль headjs :

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

Якщо жодного такого єдиного інструменту не існує, яка найкраща комбінація інструментів, тобто ланцюжок інструментів, яку я можу поєднати, використовуючи щось на зразок volo (або бурчання) )?

Я вже дослідив усі інструменти, з якими я тут зв’язаний, і вони задовольняють лише 3 моїм вимогам, в кращому випадку в індивідуальному порядку. Тож, будь ласка, не публікуйте більше про ці інструменти. Я би прийняв відповідь, яка надає єдиний інструмент, який задовольняє всім 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

Ось ваші вимоги:

• Керуйте моїми залежностями на стороні клієнта у форматі, подібному до npm's package.json або bower's component.json. Різні, але ЯК ДОБРІ!

• Я повинен мати гнучкість, щоб вказувати на git repo або фактичні файли js (або в Інтернеті, або локально) у своєму файлі dependency.json для менш відомих бібліотек (npm, давайте вкажемо на git repos). ТАК

• Він повинен мініфікувати та простір імен усі бібліотеки в один файл, такий як 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, ви можете це зробити, додавши ці файли до програми / папки. Зверніть увагу, що для того, щоб виставити ваш скрипт методом '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

Примітки

Подол був призначений для проекту 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 ), unittesting тощо.

Щодо ваших вимог:

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 - Легко запускайте свої модульні тести в безголовому WebKit через PhantomJS. Коли ви створюєте новий додаток, я також включаю кілька тестових лісів для вашого додатка.

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

Подивіться на менеджер пакунків 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 2.0) - це революційний спосіб керувати своїми залежностями в бібліотечному агностику. Деякі з його основних особливостей включають:

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

Є кілька варіантів:

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

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

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

• Hem має автономний веб-сервер (шари), тому ви можете розробляти свій код, навіть не потребуючи перекомпіляції. Я ніколи не використовую, hem buildякщо не публікую програму.
• Вам не потрібно використовувати Spine.js для використання hem, ви можете використовувати його для компіляції довільних пакетів coffeescript, якщо ви правильно налаштували slug.json. Ось один з моїх пакетів, який автоматично скомпілюється з файлом торту: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Говорячи про вищесказане, hem дозволяє зв’язувати інші залежності у вашій локальній системі за допомогою посилання npm та поєднує їх безперешкодно, навіть коли ви використовуєте серверний сервер. Насправді вам навіть не потрібно використовувати 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.jsonhem (або index.jsдля безпосереднього включення, або, index.coffeeякщо ви хочете, щоб hem скомпілював його).
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 щоб запустити сервер подолу, і перейдіть до, localhost:9294щоб побачити свою програму. (Якщо ви встановили hem глобально.) У ньому є деякі приховані аргументи, наприклад--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, доступного під час виконання. TherequireФункція генерується для цього пакета. Пакет містить усі файли, які може знадобитися вашому додатку. Подальші 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Функція піддається модулів , таким чином вони можуть знадобитися інші модулі.

Також виявляються додаткові властивості, такі як посилання на глобальний об'єкт та деякі метадані.

Нарешті, ми виконуємо програму в модулі та заданому контексті.

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

Перевірте cartero, якщо ви використовуєте node / express у серверній системі.

Я пропоную ознайомитися з інструментарієм додзе, який, мабуть, відповідає більшості ваших вимог. Я не впевнений, це CoffeeScript.

dojo працює з модулями, написаними у форматі Asynchronous Module Definition (AMD). Він має систему побудови з пакетами, і ви можете об'єднати їх в один або кілька файлів (так звані шари). Очевидно, він приймає сховища типу git, докладніше про систему збірки тут:

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

Для запису, бета-версія v1.9 очікується наступного місяця.

Ще одна структура, яка задовольняє всім моїм критеріям, нещодавно опублікованим: http://duojs.org/ (а також підтримує розгляд інших ресурсів, таких як CSS, як залежностей).

ін’єкція залежностей з асинхронним завантаженням + browserify буде ще одним вдалим вибором, порівняно з requirejs

асинхронний інтерфейс-управління залежністю-без-AMD