Паттерны фронтенда с Architect serverless framework

Подавляющее большинство браузеров, используемых сегодня, поддерживают модули ES, но до недавнего времени было сложно использовать модули в вашем проекте. До широкой поддержки браузеров модули требовали этапа компиляции с помощью такого инструмента, как Webpack (или Browserify, или Gulp и т. Д.), Чтобы преобразовать их во что-то, что браузер мог бы использовать.

Но теперь вы можете использовать модули ES в браузере без каких-либо дополнительных затрат, что делает их идеальным компаньоном для бессерверного стека.

Architect позволяет вам обслуживать модули ES в браузере через локальные рабочие процессы и из облачных функций Lambda.

В этом посте вы узнаете, как начать работу со стандартными модулями JavaScript в бессерверном проекте Architect.

Мы будем опираться на концепции из бессерверных шаблонов интерфейса с Architect Views, поэтому вам может быть полезно сначала проверить это.

1. Создайте новый проект архитектора.

mkdir arc-esm
cd arc-esm
npm init --yes
npm i @architect/architect

Затем создайте .arc файл в корне вашего проекта:

@app
arc-esm
@http
get /js/:module

get /js/:module - пример параметризованного маршрута. Нажатие на URL /js/mycode.mjs передаст mycode.mjs как req.params.module обработчику лямбда-функции.

Затем сгенерируйте свое приложение локально:

npx create --local
mkdir src/shared
mkdir src/views

Вот как будет выглядеть проект Architect в вашей локальной файловой системе:

arc-esm
├── public/
├── src
│   ├── http
│   │   └── get-js-000module/
│   ├── shared/
│   └── views/
└── .arc

2. Добавьте свою страницу индекса в src/public

Создать src/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Architect ES Modules</title>
</head>
<body>
  <h1>Architect</h1>
  <div id="js-message"></div>
  <!-- ES MODULE 👇🏾 -->
  <script type="module" src="/js/main.mjs" crossorigin></script>
</body>
</html>

3. Добавьте модуль просмотра.

Создать src/views/hello.mjs

export default function Hello () {
  console.log('Why, hello there.')
  let message = document.getElementById('js-message')
  message.innerHTML = 'You are now rocking with ES Modules.'
}

Совет: код в src/views автоматически используется для HTTP GET маршрутов

4. Добавьте сценарий основной точки входа.

Создать src/views/main.mjs

import Hello from './hello.mjs'
Hello()

Совет: наличие основного модуля ES, который импортирует все скрипты, необходимые для страницы, позволяет загружать остальные модули параллельно. Модули также кэшируются в браузере, поэтому последующие запросы для того же модуля не повлияют на производительность приложения.

4. Отредактируйте вашу лямбда-функцию, чтобы она возвращала запрошенные модули.

Обновить src/http/get-js-000module/index.js

Обратите внимание на ответ Content-Type из text/javascript, который требуется браузеру для загрузки модулей ES

5. Протестируйте его у местного архитектора sandbox

npx sandbox

Вы должны увидеть вывод консоли, показывающий, что ваш маршрут модуля был смонтирован, а также локальный URL:

get /js/:module ....................... get-js-000module
Started HTTP "server" @  http://localhost:3333

Кроме того, вы также можете добавить "start": "npx sandbox" в свои package.json сценарии и запустить локальный сервер песочницы с npm start

Вот и все! 🌈

Загрузите http://localhost:3333/js/main.js через бесшовную локальную среду разработки Architect, и теперь вы обслуживаете модули ES без необходимости устанавливать сборщик пакетов или писать сценарии сборки. ✨

→ Посмотреть полный пример проекта на GitHub

@ dam💕