Существует множество стартовых наборов или шаблонных проектов, большинство из которых сосредоточены только на разработке внешнего интерфейса, например, простое, но мощное create-react-app, но как разработчик с полным стеком, такой как я, ориентирован на статический сайт. шаблона недостаточно для создания сложных веб-приложений как для внешнего, так и для внутреннего интерфейса. Итак, здесь я представлю еще один полностековый фреймворк Node.JS koa-web-kit, который может не всем подойти, но, по крайней мере, в вашем распоряжении есть еще один выбор, верно?🤣 что тоже здорово.

🙌 Выделенные функции

  • ✨Построен со всеми современными фреймворками и библиотеками, включая Koa2, React (например, Vue.js?), Bootstrap-v4 (только CSS), Webpack, ES6, Babel…
  • 📦 Получите весь опыт разработки полного стека Node.JS из коробки
  • 🔥Поддержка замены модулей в горячем состоянии и поддержка анализатора размера комплекта
  • 📉Поддержка Async/Await для написания аккуратного асинхронного кода
  • 💖Препроцессор SASS, PostCSS, автопрефиксер для лучшей совместимости css
  • 🎉Простой API-прокси в комплекте, без сложной дополнительной настройки nginx
  • 🌈Доступно для создания статического реактивного сайта и поддержки React SSR
  • ⚡️Всего одна команда npm для развертывания вашего приложения в рабочей среде
  • 👷Постоянное обслуживание🍻

🦄 Серверная часть

Серверная часть фреймворка построена на koajs, веб-фреймворке следующего поколения для node.js, созданном форками, а также изобрела знаменитый фреймворк MVC expressjs. Koa поддерживает новейший синтаксис async/await, так что вам будет удобнее писать асинхронный код в стиле синхронного кодирования, и это здорово😎. Кроме того, он имеет лучший и более семантический механизм промежуточного программного обеспечения, с помощью которого вы можете добавить множество небольших промежуточных программ, ориентированных на одну функциональность, чтобы сделать ваше приложение более богатым и надежным, вместо того, чтобы заранее связывать множество промежуточных программ, что делает koa намного более легким.

Каждое современное веб-приложение может иметь уровень API, который может писать на других языках (например, java, go…), который также может обслуживаться на другой конечной точке API, и в этом случае нам может потребоваться настроить обратный прокси-сервис для проксирования наших запросов на выборку. к конечной точке API, чтобы обойти проблему CORS, ограниченную браузером. Это может значительно усложнить процесс настройки вашей среды разработки и привести к потере времени, поэтому с помощью koa-web-kit предустановленный прокси-сервер API может сэкономить вам много времени, настроив среду разработки. необходимо настроить настраиваемое сопоставление префикса URL-адреса с реальной конечной точкой API, и это сделано, все запросы в вашем браузере будут делегированы реальной конечной точке API, что еще лучше, так это то, что вы можете настроить не только одну конечную точку (поскольку ваш API может находиться на разных конечных точках), но сколько угодно, как показано ниже:

config = {
  //…other configs
  "API_ENDPOINTS": {
    //set a default prefix
    "defaultPrefix": "/prefix",
    //e.g http://127.0.0.1:3000/prefix/api/login →proxy to → http://127.0.0.1:3001/api/login
    "/prefix": "http://127.0.0.1:3001",
    "/prefix2": "http://127.0.0.1:3002"
  }
}

Простой не так ли? Вам не нужно настраивать еще один сервер nginx в вашей локальной среде разработки, просто введите некоторые конфигурации, и все готово.

Как и в рабочей среде, может быть лучше использовать обратный прокси-сервер для проксирования API непосредственно на серверную часть, вместо того, чтобы отправлять все запросы на узел, что может взорвать ваш сервер узла.

Кроме того, уровень журнала необходим для каждого серверного приложения, koa-web-kit также предоставляет простую утилиту для ведения журнала по умолчанию, основанную на удивительной библиотеке асинхронного ведения журнала winston, например:

const logger = require('./services/logger');
logger.info(msg);
logger.warn(msg);
logger.error(msg);

Вы можете добавить пользовательские транспорты в winston, чтобы добавить более конкретные регистраторы, все журналы по умолчанию хранятся в каталоге ./logs.

Обычно мы минимизируем все статические ресурсы (css, js, html…) для браузеров, чтобы ускорить загрузку вашей страницы, но люди редко задумываются о минимизации своего стороннего кода node.js, что также может сделать ваш код node.js менее читаемым, меньше упакованного размера и выполнить некоторую предварительную оптимизацию с помощью инструментов. С koa-web-kit мы также предоставляем скрипт сборки веб-пакета для минимизации вашего кода nodejs, ура🍻.

В случае, если у вас динамический рендеринг шаблонов, вместо простого html со всем содержимым, отображаемым библиотеками, подобными React/Vue, мы также получили вашу поддержку, механизм шаблонов nunjucks включен по умолчанию, но вы Вы можете использовать любой другой движок шаблонов javascript, основанный на consolidate.js.

Кроме того, SSR (SERVER SIDE RENDERING) является обязательным для серверной среды, мы также предоставляем простую поддержку React SSR для улучшения SEO и скорости страницы, вы можете просто включить/отключить SSR, просто установив параметр, когда он вам не нужен. Это.

Так называемый фреймворк с полным стеком должен также включать уровень БД, верно? Да, именно так, но чтобы сделать koa-web-kit не столь самоуверенным в отношении базы данных, а поскольку современная разработка основана на модульности, вы можете просто npm установить любой Пакеты db или db ORM подходят для выбранной вами базы данных, еще одно условие заключается в том, что не все приложения node.js должны разрабатывать операции API или db самостоятельно, поскольку они могут уже разрабатываться другими командами или другими языками бэкэнда, в этом случае вам нужно только настроить использование этих API, как указано выше в файле конфигурации. и именно поэтому предварительно настроенный уровень базы данных не включен по умолчанию, чтобы сделать структуру максимально простой, но при этом легко расширяемой при необходимости.

Еще одна интересная вещь, которой я хочу поделиться, заключается в том, что koa-web-kit имеет несколько слоев конфигурации переменных среды. Как мы все знаем, каждому проекту нужны некоторые envs, чтобы указать, что он должен работать по-разному в разных средах, например, в dev env мы будем отправлять запросы API на конечную точку dev, а позже, при развертывании в рабочей среде, он должен отправлять запросы на конечная точка производственного API; другой вариант использования заключается в том, что в dev env нам нужно регистрировать много сообщений для лучшей отладки, но нам это не нужно в рабочем режиме, а также мы можем добавлять различные функции на основе разных окружений… есть много вещей, которые мы зависим от переменных окружения. Таким образом, с помощью koa-web-kit вы можете устанавливать env разными способами:

  • app-config.js/app-config.js.sample, вы можете скопировать предварительно включенный app-config.js.sample в app-config.js и установить различные параметры внутри вашей локальной среды.
  • Переменные среды, когда вы запускаете скрипты, вы также можете установить переменные среды с тем же ключом, чтобы переопределить конфигурацию в app-config.js
  • По умолчанию config/build.dev(prod).js в исходном коде, этот используется в случае, если вы не используете ни app-config.js, ни переменные среды.

Подробнее читайте в koa-web-kit#ENV_Configuration.

💓 Фронтенд

И, наконец, мы здесь, фронтенд. koa-web-kitиспользует новейшие интерфейсные библиотеки и инструменты, чтобы помочь вам использовать лучшие технологии сообщества.
Особенности:

  • React-v16, одна из самых известных библиотек для создания декларативных пользовательских интерфейсов, с очень активной и большой поддержкой сообщества.
  • Bootstrap-v4, наиболее часто используемый фреймворк css/layout для создания адаптивных веб-сайтов, с последней версией v4, использующей классную функцию css flexbox.
  • Примите ES6, с помощью webpack и babel вы можете использовать последние новые функции javascript, не беспокоясь об обратной совместимости, новый синтаксис может быть перенесен в ES5 на основе вашей конфигурации browerslist.
  • Препроцессор SASS/SCSS для ваших таблиц стилей с дополнительным PostCSS для записи без префикса поставщика и очистки стилей css, но все же с автоматическим префиксом на основе конфигурации списка браузеров во время сборки.

☕️ Развертывание производства

После того, как вы закончили разработку как внешнего, так и внутреннего кода, пришло время развернуть ваше приложение в рабочей среде, чтобы ваши пользователи могли получить к нему доступ. И опять же, с koa-web-kit процесс развертывания по-прежнему прост и удобен: всего одна команда сценария npm с несколькими дополнительными параметрами, затем просто возьмите чашку ☕️ и дождитесь ее завершения. Например:

npm run deploy, самое простое, выполните все задачи
npm run deploy -- 1, это пропустит npm install --no-shrinkwrap, и просто перейдите к сборке и запуску сервера,
дополнительные параметры и примеры см. в koa-web-kit#Deploy

🍗 Бонусный раунд: Создайте статический сайт

Несмотря на то, что koa-web-kit является фреймворком с полным стеком, вы все равно можете создать статический сайт, если вам не нужны какие-либо компоненты на стороне сервера, не теряя при этом всех возможностей разработки, которые предлагает koa-web-kit.
Когда вы хотите сгенерировать статический сайт, вам может понадобиться принять во внимание еще одну вещь: путаницу prefix path и trailing slash, которая также задокументирована в известном генераторе статических сайтов Gatsby. Дело в том, что когда вы хотите развернуть статический сайт на некоторых третьих серверах, таких как страницы github, или у известного поставщика услуг статического сайта, такого как netlify, и в этих случаях ваше приложение может обслуживаться в URL-адресе подкаталога (например, https://user.github.io/app1/), здесь prefix для вашего сайта /app1/, все должно оставаться под подпутью /app1/, с koa-web-kit это также очень легко настроить, для например, только в вашем файле app-config.js:

modules.exports = {
  //your cdn domain for your static assets if you have
  “STATIC_ENDPOINT”: “http://cdn.com",
  //additional prefix for your cdn domain
  “STATIC_PREFIX”: “/public/”,
  //trailing slash for “APP_PREFIX”
  “PREFIX_TRAILING_SLASH”: true,
  //here is the prefix path for your app1, 
  //if “PREFIX_TRAILING_SLASH” is true,
  //the final “env.prefix” value(details below) will be “/app1/”
  “APP_PREFIX”: “/app1”,
}

Итак, как мы можем получить доступ к этому на уровне программирования (например, в ваших компонентах), просто, просто импортируйте это в свой js:

//full path: “./src/modules/env.js”
import env from ‘modules/env’;
// -> “/app1/public/” , with extra static assets prefix
console.log(env.prefix); 
// -> “/app1/”
console.log(env.appPrefix); 
// concat your static url if it does not need a webpack loader
<img src={`${env.prefix}static/imgs/no-loader.png`}>

Загрузчик веб-пакета также будет учитывать префикс, поэтому в исходном коде просто импортируйте свои ресурсы в обычном режиме или используйте относительный путь bg в ваших файлах scss.
Если вы хотите, чтобы все статические ресурсы имели относительный путь без '/' впереди , просто установите PREFIX_TRAILING_SLASH: false, STATIC_PREFIX: “”, APP_PREFIX: “”.

✅ Заключение

И это просто введение koa-web-kit, если хотите, попробуйте, не стесняйтесь запустить проблему или PR, чтобы запросить новые функции. Надеюсь, это упростит ваш опыт разработки полного стека node.js.

С 💖 от koa-web-kit.