Duo — это новое поколение пакетного менеджера, который совмещает в себе лучшие идеи Component, Browserify и Go. Он предназначен для быстрого и безболезненного написания фронтового кода.
От переводчика: это практически дословный перевод сайта duojs.org. Зачем он здесь? Все просто: Duo — пакетный менеджер с которым я сейчас активно работаю. Мне он кажется удобным и поэтому появилось желание поделиться с сообществом (на хабре Duo не упоминался). И… И выслушать ваши мысли по поводу данного решения. А так как писать подробный скрупулезный доклад — не позволяет количество времени проведенного с Duo, решил просто сделать duojs.org чуточку доступней для русскоязычного пользователя.
Duo необходима авторизация в Гитхаб для того чтобы увеличить rate limit и получить доступ к приватным репозиториям. Для этого нужно создать или изменить файл
Для включения кода из Гитхаба в традиционный JavaScript, просто напишите следующее:
Duo будет тянуть зависимости напрямую из репозиториев
Вы так же можете подключать модули прямо из файловой системы:
Далее, используя команду
И наконец, необходимо просто добавить тег
Тоже самое сделаем и с CSS! Можно подключать зависимости и ресурсы напрямую из Гитхаба или файловой системы:
Соберем CSS с помощью Duo:
Добавим получившийся бандл в HTML-страницу:
Duo делает разработку невероятно простой в трех основных областях применения:
Как разработчикам, нам обычно необходимо потестировать какую то идею или локализовать баг. Одной из проблем в существующих пакетных менеджерах является: не возможность использовать пакетный менеджер без шаблонных файлов, таких как package.json или component.json.
Duo убирает необходимость создавать такие шаблонные файлы, позволяя подключать пакеты (или модули) прямиком в коде:
У вас есть возможность указывать версиии, ветки или пути к файлам:
Тоже самое можно провернуть для CSS, используя
Вы можите подключить
Duo позабоится о том, чтобы преобразовать
Когда все будет готово для билда, просто запустите:
Для того чтобы пакетный менеджер был по настоящему полезным, он должен быть масштабируемым, другими словами подходить как для простых так и для более сложных приложений. В этом смысле, Duo делает процесс масштабирования почти незаметным.
Duo позволяет собрать несколько страниц за раз. Для того чтобы сделать поиск кода в файлах проще, вы можете разделить ваше приложение на несколько бандлов. Чтобы собрать несколько бандлов за раз — просто передайте их, как параметры
И вариант с фигурными скобками:
При сборке, если Duo попадается путь к ресурсу, например рисунок или шрифт — тогда этот ресурс автоматически включается в директорию
Duo создаст симлинк
Несколько живых проектов лежат в этих репозиториях на Гитхабе:
За подробной информацией можно обратиться к следующим источникам:
Дополнено:
В комментариях подбросили ссылку на интересный инструмент http://webpack.github.io/.
Duo поддерживает пакеты npm и bower. Есть JavaScript API, duo-gulp, а так же утилита для автоматического билда watch.
От переводчика: это практически дословный перевод сайта duojs.org. Зачем он здесь? Все просто: Duo — пакетный менеджер с которым я сейчас активно работаю. Мне он кажется удобным и поэтому появилось желание поделиться с сообществом (на хабре Duo не упоминался). И… И выслушать ваши мысли по поводу данного решения. А так как писать подробный скрупулезный доклад — не позволяет количество времени проведенного с Duo, решил просто сделать duojs.org чуточку доступней для русскоязычного пользователя.
Установим Duo при помощи npm
$ npm install -g duo
Duo необходима авторизация в Гитхаб для того чтобы увеличить rate limit и получить доступ к приватным репозиториям. Для этого нужно создать или изменить файл
~/.netrc
и добавить следующую информацию:machine api.github.com
login <username>
password <token>
<token>
можно быстро создать по ссылке: github.com/settings/tokens/newПриступим
Для включения кода из Гитхаба в традиционный JavaScript, просто напишите следующее:
var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');
var msg = fmt('Your unique ID is %s!', uid());
window.alert(msg);
Duo будет тянуть зависимости напрямую из репозиториев
matthewmueller/uid
и yields/fmt
, расположенных на Гитхабе, без необходимости редактирования или создания каких-либо манифест-файлов.Вы так же можете подключать модули прямо из файловой системы:
var modal = require('./modal/index.js');
Далее, используя команду
duo
, необходимо скачать зависимости и сбилдить файл:$ duo index.js > build.js
И наконец, необходимо просто добавить тег
<script>
в HTML страницу:<script src="build.js"></script>
Тоже самое сделаем и с CSS! Можно подключать зависимости и ресурсы напрямую из Гитхаба или файловой системы:
@import 'necolas/normalize.css';
@import './layout/layout.css';
body {
color: teal;
background: url('./background-image.jpg');
}
Соберем CSS с помощью Duo:
$ duo index.css > build.css
Добавим получившийся бандл в HTML-страницу:
<link rel="stylesheet" href="build.css">
Осообенности
- нативная поддежка JavaScript, HTML и CSS
- интерфейс для работы через командную строку для юникс-систем
- выгружает код прямо из Гитахба, соблюдая семантическую версионность
- поддерживает трансформации, например Coffescript или Sass
- не требует манифест-файлов
Философия
Duo делает разработку невероятно простой в трех основных областях применения:
- создание концептов или прототипов
- написание модульных компонентов
- разработка больших веб-приложений
Концепция
Как разработчикам, нам обычно необходимо потестировать какую то идею или локализовать баг. Одной из проблем в существующих пакетных менеджерах является: не возможность использовать пакетный менеджер без шаблонных файлов, таких как package.json или component.json.
Duo убирает необходимость создавать такие шаблонные файлы, позволяя подключать пакеты (или модули) прямиком в коде:
var events = require('component/events');
var uid = require('matthewmueller/uid');
У вас есть возможность указывать версиии, ветки или пути к файлам:
var reactive = require('component/reactive@0.14.x');
var tip = require('component/tip@master');
var shortcuts = require('yields/shortcuts@0.0.1:/index.js');
Тоже самое можно провернуть для CSS, используя
import
:@import 'necolas/normalize.css';
@import 'twbs/bootstrap@v3.2.0:dist/css/bootstrap.css';
Вы можите подключить
.html
или .json
файлы:var template = require('./menu.html');
var schema = require('./schema.json');
Duo позабоится о том, чтобы преобразовать
.html
в JavaScript стоку, а .json
в JavaScript объект.Когда все будет готово для билда, просто запустите:
$ duo in.js > out.js
$ duo in.css > out.css
Веб-приложения
Для того чтобы пакетный менеджер был по настоящему полезным, он должен быть масштабируемым, другими словами подходить как для простых так и для более сложных приложений. В этом смысле, Duo делает процесс масштабирования почти незаметным.
Duo позволяет собрать несколько страниц за раз. Для того чтобы сделать поиск кода в файлах проще, вы можете разделить ваше приложение на несколько бандлов. Чтобы собрать несколько бандлов за раз — просто передайте их, как параметры
duo
:$ duo app/home.js app/about.js app/admin.js
И вариант с фигурными скобками:
$ duo app/{home,about,admin}/index.{js,css}
При сборке, если Duo попадается путь к ресурсу, например рисунок или шрифт — тогда этот ресурс автоматически включается в директорию
build/
. Например, у нас есть изображение в CSS файле:@import 'necolas/normalize.css';
body {
background: url('./images/duo.png');
}
Duo создаст симлинк
build/images/duo.png
. Можно просто развернуть веб-сервер на директорию build/
— в ней уже лежит готовый к деплою проект.Примеры
Несколько живых проектов лежат в этих репозиториях на Гитхабе:
Сообщество
За подробной информацией можно обратиться к следующим источникам:
- GitHub Repository
- Command Line Usage
- Javascript API
- FAQ
- Mailing List
#duojs
on freenode
Дополнено:
В комментариях подбросили ссылку на интересный инструмент http://webpack.github.io/.
Duo поддерживает пакеты npm и bower. Есть JavaScript API, duo-gulp, а так же утилита для автоматического билда watch.