[Перевод] Duo.js — новое поколение пакетного менеджера для фронтэнда
Duo — это новое поколение пакетного менеджера, который совмещает в себе лучшие идеи Component, Browserify и Go. Он предназначен для быстрого и безболезненного написания фронтового кода.
От переводчика: это практически дословный перевод сайта duojs.org. Зачем он здесь? Все просто: Duo — пакетный менеджер с которым я сейчас активно работаю. Мне он кажется удобным и поэтому появилось желание поделиться с сообществом (на хабре Duo не упоминался). И… И выслушать ваши мысли по поводу данного решения. А так как писать подробный скрупулезный доклад — не позволяет количество времени проведенного с Duo, решил просто сделать duojs.org чуточку доступней для русскоязычного пользователя.
Установим Duo при помощи npm $ npm install -g duo Duo необходима авторизация в GitHab для того чтобы увеличить скорость доступа к пакетам и получить доступ к приватным репозиториям. Для этого нужно создать или изменить файл ~/.netrc и добавить следующую информацию:
machine api.github.com
login
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 И наконец, необходимо просто добавить тег Тоже самое сделаем и с 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-страницу:
Осообенности наличие поддержки 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/ — в ней уже лежит готовый к деплою проект.
Примеры Несколько живых проектов лежат в этих репозиториях на Гитхабе: Комьюнити За подробной информацией можно обратиться к следующим источникам:
