Не секрет, что сборки javascript стали сложными. Для последнего переписывания шаблона, который я пишу, требуются команды из всех следующих проектов: Haul-cli, react-native-cli, lerna, jest, webpack, babel и ( из-за проблем с символической ссылкой), rsync.
Некоторые команды должны сохраняться и отслеживать файлы, некоторые нужно запускать один раз и останавливать, а затем повторно запускать. В то же время опыт разработчика ужасен. Как разработчики, все мы знаем, что не все работает постоянно, и возможность отладки имеет решающее значение. Это относится к вашим сценариям сборки, и другие разработчики являются вашими пользователями. Инструменты сборки и сценарии сборки могут стать самой большой проблемой для сопровождающих проекта, если они плохо настроены.
Большинство разработчиков узлов записывают свои команды разработки в объект скриптов package.json. Это отличный шаблон, потому что все, что вам нужно знать о разработке, создании или запуске проекта, почти всегда находится в одном месте. Легко найти, легко использовать. Обычно сложность возникает в командах разработчика. В типичном проекте я обычно предъявляю по крайней мере эти требования к своему сценарию разработки.
- Jest watch - модульные тесты при изменении файла.
- Сборка и запуск проекта (или сервер разработки webpack)
Более поздний проект на основе lerna, над которым я работал, требует всего следующего.
- Запустите React Storybook
- Запустить сборник рассказов, ориентированный на реакцию
- Jest Watch для Интернета
- Jest Watch для react-native
- Запустите webpack для react-native-web
- Запустите реагирующий упаковщик для ios и android
- Общие компоненты 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 - это библиотека, которая позволяет вам создавать файл конфигурации для ваших скриптов и направлять вывод в поля, используя метод, описанный выше. Наряду с некоторыми другими наворотами (кнопки перезапуска, кнопки уничтожения, очистка, переход в полноэкранный режим и т. Д.)
Надеюсь, это будет полезно для создания удобных для чтения, отлаживаемых и упорядоченных скриптов. Дайте мне знать, если вы это сделаете!