Duo.js — новое поколение пакетного менеджера для фронтэнда

Duo — это новое поколение пакетного менеджера, который совмещает в себе лучшие идеи Component, Browserify и Go. Он предназначен для быстрого и безболезненного написания фронтового кода.

^[1]

От переводчика: это практически дословный перевод сайта duojs.org ^[2]. Зачем он здесь? Все просто: Duo — пакетный менеджер с которым я сейчас активно работаю. Мне он кажется удобным и поэтому появилось желание поделиться с сообществом (на хабре Duo не упоминался). И… И выслушать ваши мысли по поводу данного решения. А так как писать подробный скрупулезный доклад — не позволяет количество времени проведенного с Duo, решил просто сделать duojs.org чуточку доступней для русскоязычного пользователя.
 

Установим Duo при помощи npm

$ npm install -g duo

Duo необходима авторизация в Гитхаб для того чтобы увеличить скорость доступа к пакетам и получить доступ к приватным репозиториям. Для этого нужно создать или изменить файл ~/.netrc и добавить следующую информацию:

machine api.github.com
  login <username>
  password <token>

<token> можно быстро создать по ссылке: github.com/settings/tokens/new ^[3]

Приступим

Для включения кода из Гитхаба в традиционный 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">

Осообенности

• наличие поддержки first-class для 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/ — в ней уже лежит готовый к деплою проект.
 

Примеры

Несколько живых проектов лежат в этих репозиториях на Гитхабе:

• duojs/duojs.org ^[4]
• duojs/logo ^[5]
• segmentio/analytics.js ^[6]

Комьюнити

За подробной информацией можно обратиться к следующим источникам:

• GitHub Repository ^[7]
• Command Line Usage ^[8]
• Javascript API ^[9]
• FAQ ^[10]
• Mailing List ^[11]
• #duojs on freenode

Автор: jMas

Источник ^[1]