- PVSM.RU - https://www.pvsm.ru -
Duo — это новое поколение пакетного менеджера, который совмещает в себе лучшие идеи Component, Browserify и Go. Он предназначен для быстрого и безболезненного написания фронтового кода.
[1]
От переводчика: это практически дословный перевод сайта duojs.org [2]. Зачем он здесь? Все просто: Duo — пакетный менеджер с которым я сейчас активно работаю. Мне он кажется удобным и поэтому появилось желание поделиться с сообществом (на хабре Duo не упоминался). И… И выслушать ваши мысли по поводу данного решения. А так как писать подробный скрупулезный доклад — не позволяет количество времени проведенного с Duo, решил просто сделать duojs.org чуточку доступней для русскоязычного пользователя.
$ 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">
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
on freenodeАвтор: jMas
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/72011
Ссылки в тексте:
[1] Image: http://habrahabr.ru/post/240539/
[2] duojs.org: http://duojs.org/
[3] github.com/settings/tokens/new: https://github.com/settings/tokens/new
[4] duojs/duojs.org: https://github.com/duojs/duojs.org
[5] duojs/logo: https://github.com/duojs/logo
[6] segmentio/analytics.js: https://github.com/segmentio/analytics.js
[7] GitHub Repository: https://github.com/duojs/duo
[8] Command Line Usage: https://github.com/duojs/duo/blob/master/docs/cli.md
[9] Javascript API: https://github.com/duojs/duo/blob/master/docs/api.md
[10] FAQ: https://github.com/duojs/duo/blob/master/docs/faq.md
[11] Mailing List: https://groups.google.com/forum/#!forum/duojs
Нажмите здесь для печати.