Не секрет, что сборки javascript стали сложными. Для последнего переписывания шаблона, который я пишу, требуются команды из всех следующих проектов: Haul-cli, react-native-cli, lerna, jest, webpack, babel и ( из-за проблем с символической ссылкой), rsync.

Некоторые команды должны сохраняться и отслеживать файлы, некоторые нужно запускать один раз и останавливать, а затем повторно запускать. В то же время опыт разработчика ужасен. Как разработчики, все мы знаем, что не все работает постоянно, и возможность отладки имеет решающее значение. Это относится к вашим сценариям сборки, и другие разработчики являются вашими пользователями. Инструменты сборки и сценарии сборки могут стать самой большой проблемой для сопровождающих проекта, если они плохо настроены.

Большинство разработчиков узлов записывают свои команды разработки в объект скриптов package.json. Это отличный шаблон, потому что все, что вам нужно знать о разработке, создании или запуске проекта, почти всегда находится в одном месте. Легко найти, легко использовать. Обычно сложность возникает в командах разработчика. В типичном проекте я обычно предъявляю по крайней мере эти требования к своему сценарию разработки.

  1. Jest watch - модульные тесты при изменении файла.
  2. Сборка и запуск проекта (или сервер разработки webpack)

Более поздний проект на основе lerna, над которым я работал, требует всего следующего.

  1. Запустите React Storybook
  2. Запустить сборник рассказов, ориентированный на реакцию
  3. Jest Watch для Интернета
  4. Jest Watch для react-native
  5. Запустите webpack для react-native-web
  6. Запустите реагирующий упаковщик для ios и android
  7. Общие компоненты Rsync для react-native-web и react-native-mobile, потому что react-native-packager не может обрабатывать символические ссылки (response native и react-native web не могут жить в одном проекте, потому что они оба явно требуют разных версий реагировать.)

При написании документации для react-nativeish стало ясно, что опыт разработчика этого шаблона был ужасен. Многое из этого было написано с помощью `lerna run`, который наклеивает метку перед каждой строкой вывода и выводит все это одним гигантским потоком на ваш терминал. Что отлично подходит для 1 или 2 команд. Но был громоздким с более сложной настройкой. Что-то нужно было изменить.

Управление выводом

Цель состоит в том, чтобы очистить наш вывод и сделать его читабельным. Вот тут-то и пригодятся blessed и shelljs.

Blessed - это библиотека высокоуровневого терминального интерфейса для node.js. см. полный код в примерах

Сначала нам нужно создать нашу команду (я использую shelljs, потому что он позволяет вам передавать строку как команду и не беспокоиться о многих деталях, таких как разделение аргументов, в отдельный массив для команды создания узлов по умолчанию).

// silent because by default shelljs copies output to your main
// terminal output. async because shelljs blocks by default.
const {stdout, stderr} = shelljs.exec('ping www.google.com', {silent: true, async: true})

Используя blessed, вы можете создать «Ящик» в своем терминале и определить для него стили.

var blessed = require('blessed');

// Create a screen object.
var screen = blessed.screen({
  smartCSR: true
});
// Depending on your needs, blessed.box may be a better solution
// Blessed.text is a child of blessed.box, but is optimized for text
var container = blessed.text({
  left: 0,  
  top: 0,  
  width: '25%',  
  height: '50%',
  scrollable: true,
  alwaysScroll: true,
  label: 'upperLeft'
  parent: screen,
  mouse: true,
});

Теперь все, что нам нужно сделать, это прослушать наш поток stdout и добавить контент в наш ящик.

// outputFromCommand is probably a buffer, so make sure you add it to a string before putting it in the terminal, or it will just output a number.
stdout.on('data', outputFromCommand => {
     // push a line into the text box
    container.pushLine(data + '')
    // scroll to the bottom
    container.scroll(Number.MAX_VALUE)
    // force a render, this might be good to debounce
    screen.render()
}

Вот и все, теперь вы взяли стандартный вывод и поместили его в коробку. Промойте и повторите столько команд, сколько хотите.

Войдите в Терминус-Максимус.

При написании response-nativeish было слишком много команд, чтобы продолжать возиться с dev-скриптом, чтобы он выглядел красиво. Из пепла этого сценария разработки вырос феникс, то есть Терминус-Максимус. Terminus-Maximus - это библиотека, которая позволяет вам создавать файл конфигурации для ваших скриптов и направлять вывод в поля, используя метод, описанный выше. Наряду с некоторыми другими наворотами (кнопки перезапуска, кнопки уничтожения, очистка, переход в полноэкранный режим и т. Д.)

Надеюсь, это будет полезно для создания удобных для чтения, отлаживаемых и упорядоченных скриптов. Дайте мне знать, если вы это сделаете!