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

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

От переводчика: это практически дословный перевод сайта duojs.org. Зачем он здесь? Все просто: 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

Приступим

Для включения кода из Гитхаба в традиционный 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/ — в ней уже лежит готовый к деплою проект.

Примеры

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

Сообщество

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

Дополнено:
В комментариях подбросили ссылку на интересный инструмент http://webpack.github.io/.
Duo поддерживает пакеты npm и bower. Есть JavaScript API, duo-gulp, а так же утилита для автоматического билда watch.

ссылка на оригинал статьи http://habrahabr.ru/post/240539/