В этой статье будет представлен совершенно новый инструмент разработки интерфейса, который, я надеюсь, принесет вам разработку интерфейса, которая выглядит так же, как сейчас, но на самом деле это не то же самое.
Можно сказать, вселысыйЗрелые фронтенд-программисты, у каждого компьютера есть несколько наборов семейных корзин, над установкой которых он так усердно трудился, зачем ему менять новый инструмент разработки?
Да, слепой ученик, возможно, ты открыл для себя Хуа Дяня.
Посчитайте, сколько виджетов и виджетов сейчас установлено на вашем компьютере для локальной фронтенд-разработки? Это только для этапа разработки кода, могут быть локальные серверы, инструменты удаленной отладки, прокси-инструменты, плагины для браузера и так далее. Они могут быть установлены после того, как вы попробуете бесчисленное количество одинаковых моделей одну за другой, Это также может быть из-за различных видов «Shocked! Сверхпростые в использовании инструменты разработки интерфейса Daquan Amway, И есть много «тяжелых инструментов» для глобальной установки и глобальной настройки.
Представьте теперь, что вам нужно приобрести новый компьютер или переустановить новую систему, и вам нужно переустанавливать их одну за другой. Более того, большинство этих инструментов не могут быть самостоятельно настроены в соответствии с проектом. Это означает, что вам также необходимо вручную изменить конфигурацию вашего средства разработки при переключении между различными проектами. Это невыносимо для некоторых обсессивно-компульсивных пациентов, таких как сам автор.
Обобщите некоторые из сценариев, которые являются привычными, но неприятными, если вы тщательно обдумаете их, когда обычно занимаетесь разработкой:
- Вы должны вручную установить различные инструменты, чтобы обогатить вашу локальную среду разработки.
- Такая локальная среда разработки не может быть скопирована или ее трудно скопировать, и ее нельзя использовать совместно.
- Каждый инструмент должен быть настроен отдельно, и конфигурация в основном не изолирована в соответствии с проектом.Часто необходимо изменить конфигурацию при переключении проектов.
- Иногда у вас нет подходящих инструментов для удовлетворения ваших потребностей, и слишком сложно написать их самостоятельно.
- Для написания проекта нужно одновременно открыть N инструментов: локальный сервер, мок-сервер и т.д.
- Частые перезапуски этих инструментов также необходимы для обновления конфигурации.
- ...
Исходя из вышеизложенного и некоторых других болевых точек, существует server-x, о котором будет рассказано ниже.
что такое сервер-х
Как и первая половина его имени,server, можно просто сказать, что server-x (сокращенно svrx) — это локальный сервер,
Кроме того, это многофункциональный, простой в использовании легкий сервер.
Давайте сначала рассмотрим простейший сценарий использования:
Сначала вам нужно установить инструмент svrx CLI,
npm install -g @svrx/cli
Затем создайте простую страницу, запустите svrx в корневом каталоге проекта,
mkdir example && cd example
echo '<html><body>Hello svrx!</body></html>' > index.html
svrx
доступhttp://localhost:8000Вы можете увидеть свою главную страницу.
Простота установки, быстрый запуск, независимое использование, кроме узла,Не зависит ни от какой другой среды. Конечно, это самая важная функция, которую может выполнять любой независимый базовый сервер разработки.
Что еще там? svrx также поставляется с очень практичными функциями, такими как автоматическое открытие браузера, мониторинг изменений кода и автоматическое обновление (livereload), прокси и так далее. Да, вы также можете сказать, что некоторые серверы разработки тоже могут это делать.
Самая большая разница между svrx и другими локальными серверами заключается в его имени.server-xВторая половина:x.
мы все знаем,xОн может обозначать «неизвестное и бесконечное», то есть svrx — это сервер с бесконечными возможностями.
Почему вы говорите, что у него бесконечные возможности? Потому что самая большая особенность svrx: это платформа для плагинов.
Теоретически с помощью плагинов ваш svrx действительно может иметь произвольные функции. Каждая маленькая функция здесь представляет собой отдельный плагин, вам просто нужно объявить его, чтобы использовать, например:
svrx --webpack --qrcode --markdown
Очень понятный и интуитивно понятный, нет избыточной конфигурации, после того, как вы объявите плагин, svrx автоматически загрузит и установит плагин для вас, а затем запустит его напрямую.
Так что можно сказать, что svrx — это платформа, которая объединяет множество функциональных плагинов, и сама по себе является семейным ведром. Но разница в том, что выНе нужно заботиться о процессе установки плагина. В дополнение к интерфейсу командной строки svrx выНет необходимости устанавливать какие-либо другие инструменты.
Кроме того, все плагины не устанавливаются глобально, а устанавливаются непосредственно в ваш проект.node_modulesв каталоге.
такИнженерные разработки действительно изолированы,
Вы можете свободно настраивать среду разработки для каждого проекта, не задумываясь об установке и удалении, не беспокоясь о загрязнении окружающей среды, а также поддерживать систему в чистоте и свежести.
Фактически, в настоящее время в отрасли доступно множество локальных серверов разработки, Но, как и svrx, почти нет легковесного и простого в использовании, имеющего полный механизм подключаемых модулей и полностью независимого от инженерной среды. Далее мы продолжаем исследовать новый опыт разработки с помощью svrx, создав простой интерфейсный проект, Познакомьте вас с некоторыми расширенными возможностями использования и черными технологиями, это действительно интересные места svrx.
Создать проект и начать
Для удобства выбираем общеупотребительный интерфейсCreate React AppСоздайте пример проекта (Как было сказано ранее, svrx не зависит ни от какой инженерной среды, а CRA выбран только для удобства примера).
npm init react-app svrx-example
cd svrx-example
Поскольку новый проект использует значение по умолчаниюwebpackпакет, хотите начать такой проект,
Нам нужно использовать плагинsvrx-plugin-webpack.
Роль этого плагина заключается в чтении конфигурации проекта,
перечислитьwebpack-dev-middleware,
сделай свойwebpackПроекты можно легко интегрировать в сервис svrx.
Однако, поскольку новый проект не подвергалсяwebpackэлемент конфигурации, поэтому нам нужно сначала создать его в корневом каталогеwebpack.config.js:
// webpack.config.js
module.exports = require('react-scripts/config/webpack.config')('development');
Затем мы можем плавно начать проект:
svrx --webpack
Браузер откроется автоматическиhttp://localhost:8000/страница:
В это время вы можете попробовать отредактироватьsrc/App.css, чтобы увидеть, меняется ли страница в режиме реального времени?
Шаг 1. Добавьте элементы конфигурации
По умолчанию svrx автоматически запускает некоторые встроенные базовые плагины при запуске, Например, статический сервер (serve), служба переадресации (proxy), автоматическое обновление страницы (livereload) и т. д. Все они имеют определенное поведение по умолчанию, чтобы пользователи могли быстро запускать svrx. Конечно, если вам нужно внести некоторые пользовательские изменения в эти встроенные элементы конфигурации, svrx также предоставляет два способа.
Вы можете настроить его, передав параметры при запуске svrx из командной строки:
svrx --port 3000 --https --no-livereload
Вы также можете создать его в каталоге вашего проекта.svrxrc.jsилиsvrx.config.jsфайл для сохранения указанных выше аргументов командной строки:
// .svrxrc.js
module.exports = {
port: 3000,
https: true,
livereload: false
};
Все элементы конфигурации и описания svrx можно найти вОфициальная документация — встроеннаяПосмотреть в.
Шаг 2: Начните экспериментировать с другими плагинами
В дополнение к встроенным плагинам, svrx имеет много независимых плагинов, таких как упомянутые ранее.svrx-plugin-webpack.
Когда вам нужны другие функции разработки (такие как удаленная отладка, имитация и т. д.), вам нужно просто объявить имена этих независимых подключаемых модулей функций в конфигурации svrx, и вы можете использовать их в обычном режиме.
Именно эти независимые плагины обеспечивают богатый и красочный функциональный опыт для проекта svrx. Вот несколько полезных и забавных плагинов:
localtunnel- Разоблачение местных услуг
Представьте, что вы упорядоченно работаете над созданием страницы, в это время выскакивает сообщение от вашего руководителя:
Позвольте мне увидеть, как ваша страница написана
Что вы делаете в это время? Вам нужно сначала проверить прогресс, сначала отправить код, который можно использовать, а затем у вас появится идея, развернуть локальный сервис и подготовиться, чтобы предоставить вам строку локальных IP-адресов. Но вы вдруг вспомнили, разве руководитель не в командировке? (Слишком целеустремленный, постоянно проверяющий ваш прогресс в разработке) Лидеры не могут получить доступ к интрасети. В это время можно только на скорую руку найти сервер и развернуть тестовую среду для лидера, развертывание идет слишком медленно, а самолет лидера вот-вот взлетит!
В это время вам нужен svrxlocaltunnelПлагин!
Он может открыть вашу локальную службу дляlocaltunnel.me, чтобы легко тестировать локальный код и делиться им.
Вам больше не нужно развертывать тестовую службу только для того, чтобы протестировать небольшое изменение кода.
запускатьlocaltunnelПросто добавьте объявление после предыдущей команды запуска:
svrx --webpack --localtunnel
Приведенная выше команда автоматически установит плагин localtunnel и запустит svrx, Другие (да, вам даже не обязательно находиться в той же интрасети) также увидят ваш локальный сервис, посетив https://*.localtunnel.me, напечатанный терминалом в это время:
Кроме того, каждое изменение вашей локальной страницы может быть замечено другими в режиме реального времени, и вам не нужно беспокоиться о том, что руководитель вдруг проверит домашнюю работу!
weinre- Удаленная отладка мобильного кода
Как вы сейчас отлаживаете мобильный код? Вы можете сказать: «Я могу это сделать!» Это очень просто, сначала откройте настройки в телефоне.开发者模式(может ищет), разрешитеUSB 连接, найти другой кабель USB, подключить телефон к компьютеру, затем вы открываете инструменты разработчика браузера на своем компьютере, открываете что-то, находите удаленное устройство, а затемInspect...
Что, если бы существовал более простой способ? Вы можете попробовать svrxweinreПлагин, который используется для простой удаленной отладки мобильных страниц и является «беспроводным».
Давайте вернемся к примеру проекта, на этот раз мы добавим два новых плагина после команды запуска:
svrx --open=external --webpack --weinre --qrcode
Во-первых, быстро установите плагины weinre и QR-кода и запустите svrx с помощью приведенных выше команд,
В это время попробуйте использовать свой мобильный телефон для доступа к странице запущенного проекта, здесь мы рекомендуем сотрудничествоqrcodeПлагин QR-кода позволяет мобильным телефонам легко сканировать код для доступа к адресу страницы:
Затем компьютер открывает страницу отладчика weinre http://${your_ip}:8001 (по умолчанию), Найдя запись доступа мобильного телефона, вы можете удаленно отлаживать страницу мобильного телефона в отладчике.
Настройте свой плагин
Помимо вышеперечисленного, в svrx есть много интересных и полезных плагинов, найти их можно вофициальный сайт сврксЗапросите все текущие плагины и выберите из них. Комбинируя различные плагины, вы можете свободно настраивать среду разработки!
Конечно, если вы не найдете нужный функциональный плагин, вы также можете попробовать написать его самостоятельно.
Что можно делать с плагинами?
занять фронтqrcodeДля плагина QR-кода, чтобы отобразить QR-код на странице, вы можете внедрить некоторые сценарии js и стили css на страницу внешнего интерфейса;
также может быть какwebpackПодобно подключаемому модулю, внедрите некоторое промежуточное ПО в стиле koa во внутреннюю логику для перехвата запросов на обработку данных, например здесьwebpack-dev-middleware.
Благодаря мощным возможностям внешнего и внутреннего внедрения почти все потребности локальной разработки могут быть решены путем создания плагина svrx. иРазработка плагинов невероятно проста! Основной код некоторых из только что представленных плагинов составляет почти 50 строк или около того! Кроме того, svrx также предоставляет инструменты для быстрого создания плагинов, вы можете перейти кОфициальная документация - Как написать плагинОзнакомьтесь с более подробной информацией о разработке плагинов, поэтому я не буду здесь вдаваться в подробности.
Шаг 3. Быстрая маршрутизация с горячими обновлениями
В сценарии разработки, где интерфейс и сервер разделены, интерфейс часто сталкивается с ситуациями, когда требуется имитация данных. Итак, вы можете испытать:
- Измените фиктивные данные и перезапустите фиктивный сервер.
- Включить или отключить переадресацию интерфейса, перезапустить
- Измените код проекта и перезапустите
- ...
Даже если вы скажете, что текущий мок-сервис очень умный и его не нужно перезапускать, все равно нужно вручную запускать мок-сервис вне локального сервиса, либо быть более безжалостным и прописывать мок-данные в код проекта. Так неэлегантно!
Так что динамическая маршрутизация svrx пригодится. Да, помимо богатой системы плагинов, в svrx действительно есть мощная и удобная функция динамической маршрутизации. Все еще возвращаясь к нашему примерному проекту, вы можете начать быструю попытку со следующей команды:
touch route.js # create empty routing file
svrx --webpack --route route.js
существуетroute.jsсередина:
get('/blog').to.json({ title: 'svrx' });
Открой сейчас/blog, ты увидишь{ title: 'svrx' }вывод json.
Благодаря этой функции маршрутизации вы сможете обойтись без взлома кода проекта.Быстро и интуитивно создавайте фиктивные данные.
и это поддерживаетсяhot reload, то есть каждое редактированиеroute.jsПосле этого нет необходимости перезапускать службу svrx, данные маршрутизации будут обновляться автоматически.
Конечно, маршрутизация svrx может делать гораздо больше, чем просто использование для локальных макетов данных разработки. Вот несколько примеров маршрутизации:
get('/index.html').to.sendFile('./index.html');
get('/blog').to.redirect('/user');
get('/old/rewrite:path(.*)').to.rewrite('/svrx/{path}');
get('/api(.*)').to.proxy('http://mock.server.com/');
get('/blog')
.to.header({ 'X-Engine': 'svrx' })
.json({ code: 200 });
Как видите, синтаксис маршрутизации svrx очень прост, и вы можете четко и интуитивно прочитать каждое правило, такое как отправка файлов, перенаправление, перезапись маршрута, проксирование и т. д. И в дополнение к некоторым официально предоставленным операциям маршрутизации, вы также можете расширить операции маршрутизации с помощью плагинов. Подробную информацию о правилах синтаксиса и расширениях маршрутизации svrx см.Официальная документация — использование маршрутизации.
напиши в конце
Прогрессивная и простая в использовании подключаемая платформа для разработки интерфейса.
Вот слоган svrx, который также очень точно описывает позиционирование svrx:
- svrx — мощный локальный dev-сервер для фронтенд-разработчиков, состоящий из локальных сервисов, прокси, livereload и других функциональных плагинов.
- svrx имеет богатую и мощную систему плагинов, вы можете свободно использовать или настраивать нужные вам функции
Стремясь предоставить более элегантный и удобный опыт локальной разработки для разработчиков интерфейсов, svrx также предоставляет платформу для быстрой разработки пользовательских функций. Как пользователь, вы можете выбрать подходящую комбинацию подключаемых модулей для удовлетворения ваших местных потребностей в обслуживании, запуск одним щелчком мыши, экономию времени и труда, простой в подключении функциональный дизайн и отсутствие необходимости беспокоиться о загрязнении окружающей среды. . Если вы не найдете нужный плагин, вы можете стать разработчиком, быть самодостаточным и быстро реализовать нужный функционал. Как разработчик, вы также можете открыть свой разум и улучшить локальный опыт разработки большего количества людей с помощью плагинов, которые вы пишете.
После этого svrx продолжит выпускать больше высококачественных функций или плагинов, чтобы продолжить разработку интерфейса.
Links
- официальный сайт сврксОфициальная документация, API, плагин запроса
- Github - svrxОсновной исходный код, обсуждение и обмен, отчет об ошибке