Сегодняшняя тема этой статьи — «Быстрая сборка среды разработки». Быстро, как быстро? Ответ: Это зависит от скорости вашего интернета. Потому что у нас действительно есть такой эшафот: qvk.
что такое квк
qvk — это универсальная среда веб-разработки, объединяющая лучшие практики современного фронтенд-инжиниринга.Его можно использовать для разработки веб-приложений с традиционной архитектурой C/S, SPA (одностраничных приложений), H5 (встроенных страниц приложений) и т. д. .
qvk родился из нескольких 360 интерфейсных проектов и объединяет отличные фреймворки, инструменты и лучшие практики, возникающие в сообществе с открытым исходным кодом. Первоначальная версия qvk объединяет следующие веб-фреймворки и инструменты упаковки.
- ThinkJS: простая в использовании и мощная среда разработки Node.js, основанная на шаблоне MVC.
- Vue.js: прогрессивный фреймворк JavaScript, основной выбор для разработки интерфейсных компонентов.
- Webpack: наиболее широко используемый интерфейсный инструмент для упаковки модулей ресурсов.
Что, тут новые лица? Это нормально, вы найдете их все дружелюбными и простыми в кратчайшие сроки.
Создайте среду разработки
Адрес репозитория Github для qvk:github.com/qqvk/qvk.
Откройте эту страницу и нажмите кнопку «Клонировать или скачать»:
Щелкните значок «Копировать в буфер обмена». Откройте общий терминал, войдите или создайте новый каталог проекта, например myProject, и клонируйте код qvk:
Обратите внимание, что мы дали новому проекту имя h5project. Войдите в этот каталог:
ЛИЦЕНЗИЯ и README.md, конечно, один протокол, а другой введение проекта. Каталоги клиента и сервера используются для хранения клиентского и серверного кода (и зависимостей) соответственно.
Для простоты разработки мы рекомендуем использовать VSCode, а поставивcodeукажите путь для запуска VSCode из командной строки (см. эту ссылку:code.visual studio.com/docs/setup/…):
Таким образом, запустите по пути проектаcode .Вы можете начать VSCode:
После запуска VSCode нажмите сочетание клавиш Ctrl+`, чтобы переключиться на терминал, а затем нажмите Cmd+, чтобы разделить терминал (или щелкните значок мышьюрасщепление) получается следующее:
Затем установите внешние и серверные зависимости соответственно. Войдите в каталоги сервера и клиента в левом и правом окнах терминала соответственно и запуститеnpm installУстановить зависимости:
В зависимости от состояния сети у каждого для установки зависимостей требуется от 10 до 30 секунд. На самом деле, это был самый медленный шаг в нашей настройке. Что касается того, как ускорить этот процесс, вы можете самостоятельно поискать соответствующие статьи в Интернете.
После установки зависимостей вам также необходимо создать интерфейсный код для создания файлов шаблонов и статических ресурсов, необходимых серверу. Просто, просто запустите в каталоге клиентаnpm run buildТолько что:
После выполнения этого шага будут созданы два каталога в каталоге сервера (да, в каталоге сервера, что будет объяснено позже в этой статье).
- представление: сохраните шаблон, сгенерированный сборкой, для использования сервером.
- www: содержит статические ресурсы (js/css и т. д.), на которые ссылается шаблон, сгенерированный сборкой.
Что ж, теперь наша среда разработки готова к запуску! Подождите минутку, прежде чем мы начнем, есть еще одно уточнение.
Как упоминалось ранее, qvk по умолчанию делит среду разработки на внешний интерфейс (клиент) и сервер (сервер). Оба конца запускают веб-сервер соответственно. Порт по умолчанию:
- Передняя часть: 9090
- Сервер: 8900.
После запуска сервиса фронтенд будет проксировать все запросы браузера на сервер, то есть браузер автоматически откроется:http://localhost:9090, и на все запросы фактически отвечает сервер на порту 8900. Эта конфигурация предназначена для реализации компиляции и обновления клиентской и серверной разработки в реальном времени (зачем выбирать эти два порта? Нет причин, просто случайный выбор).
Объяснение заканчивается. Давайте запустим службу дальше — так как интерфейсная служба проксируется на серверную службу, последовательность запуска такова...? Правильно: сначала запустить бэкенд, потом фронтенд.
Как начать?npm start.
Сначала запустите сервер:
Перезапустите интерфейс:
Запуск внешнего интерфейса запустит начальный процесс сборки Webpack.После завершения сборки он автоматически откроется в браузере.http://localhost:9090/.
Поздравляем, когда вы видите эту страницу, это означает, что ваша среда разработки завершена! Ты говоришь скоро?
Начать
Недостаточно создать хорошую среду, важно знать, как использовать эту среду для разработки собственных проектов.
ThinkJS — это отличная среда разработки Node.js MVC, с которой очень легко начать работу. Здесь каталог сервера на самом деле является рабочим каталогом ThinkJS. Если вы проигнорируете node_modules для сохранения зависимостей и время выполнения для сохранения конфигурации времени выполнения, при разработке фактически используются только каталоги src, view и www, как показано на следующем рисунке:
(Учитывая, что представление и www генерируются интерфейсной конструкцией, здесь действительно используется только каталог src, хахаха. Опять все просто?)
Чтобы разработать страницу с помощью ThinkJS, достаточно двух простых шагов:
- Напишите метод контроллера на основе определенного маршрута
- Укажите шаблон отображаемой страницы в методе контроллера
В качестве примера возьмем существующий код. Сохраните весь код контроллера в src/controller, где index.js — контроллер по умолчанию, а index.js — вindexActionявляется функцией обработчика ответа по умолчанию (если метод неAction, он не может отвечать на внешние запросы и может использоваться как внутренний метод).
src/controller/index.js
const Base = require("./base.js");
module.exports = class extends Base {
async indexAction() {
return this.display()
}
pixelAction() {
return this.display('pixel_demo')
}
};
По умолчанию это означаетhttp://localhost:9090 / Этот запрос будет отправлен index.js по умолчаниюindexActionметод обработки. Как с этим бороться? Здесь все очень просто, всего одна строка кода:
return this.display()
this.display()Метод возвращает HTML-код после рендеринга шаблона по умолчанию с использованием механизма шаблонов по умолчанию и возвращает его в браузер в качестве ответа сервера. Механизм шаблонов по умолчанию — Nunjucks (mozilla.github.io/nunjucks/), а файл шаблона по умолчанию — view/index_index.html:
view/index_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta >
<title>qvk: A Web integrated development environment.</title>
<link href="/static/css/index_index_79ed.css" rel="stylesheet"></head>
<body>
<div class="welcome">
<div reminder>
<h2>欢迎使用qvk创建开发环境</h2>
<p><a href="/index/pixel">H5必知必会之像素级还级设计稿DEMO</a></p>
</div>
</div>
<script type="text/javascript" src="/static/js/commons_6a84.js"></script><script type="text/javascript" src="/static/js/index_index_79ed.js"></script></body>
</html>
Конечно, этот HTML-шаблон может использовать различные синтаксисы, поддерживаемые механизмом шаблонов, встроенные переменные и операторы, а также другую логику на стороне сервера (не здесь, ха-ха, вы можете обратиться к документации механизма шаблонов за подробностями:mozilla.github.io/nunjucks/).
После того, как разработка сервера завершена, давайте посмотрим на внешний интерфейс. Интерфейсный код находится в каталоге client, а в разработке реально используется только каталог src:
Как показано на рисунке, в каталоге src есть входной файл Webpack: index_index.js, а в каталоге шаблонов _templates_ssr есть файл index_index.njk с тем же именем, но с другим расширением (njk — это сокращение от Nunjucks). ).
Webpack будет использовать index_index.njk в качестве шаблона для создания шаблона server/view/index_index.html, необходимого для рендеринга ThinkJS в соответствии с этим правилом именования, и упакует зависимости, указанные в файле записи, и внедрит их в шаблон.
Давайте посмотрим на входной файл index_index.js:
client/src/index_index.js
import './_static/css/index_index.scss'
вау, только одна строчка, используйimportСинтаксис модуля представляет файл SCSS. Этот файл будет внедрен в шаблон index_index.html после генерации обычного CSS посредством соответствующего преобразования:
<link href="/static/css/index_index_79ed.css" rel="stylesheet">
Что, если эта страница имеет интерактивную логику? Затем введите соответствующий файл JavaScript в файл ввода (можно поместить в каталог ./_static/js/). Точно так же Webpack будет внедрять пакеты JavaScript в шаблоны во время сборки.
Фактически, во время разработки Webpack будет автоматически отслеживать ресурсы, представленные во всех входных файлах. Пока эти ресурсы изменяются и сохраняются, он запускает перестройку и обновляет браузер, позволяя нам видеть результаты модификации в режиме реального времени. .
напиши в конце
В этой статье это закончено, действительно закончено. На данный момент неизбежно, что читатели спросят, мы строим, это среда развития H5? да. Вы можете нажать на ссылки на этой странице посмотреть:
вы обнаружите, что мыcardВсе единицы CSS-пикселя в компоненте преобразуются в единицы ширины области просмотра:
Если читатель не понимает, что означает «преобразование единиц пикселей в единицы ширины окна просмотра», обратитесь ко второй статье этой серии.H5 должен знать и должен знать проект реставрации на уровне пикселей", и, конечно же, исходный код проекта.
О квк
Наконец, qvk все еще очень слаб (на самом деле, он родился за несколько минут до написания этой статьи), это не новая идея, это просто каркас, объединяющий множество отличных интерфейсных проектов с открытым исходным кодом и лучшие практики. Конечно, мы продолжим усердно работать над добавлением в него более полезных конфигураций и более богатых опций.Если у вас есть похожие идеи, добро пожаловать в ряды участников qvk.
Если у вас есть какие-либо идеи, пожалуйста, оставьте сообщение.