Создайте среду React, Typescript, Koa, GraphQL

Эта статья является оригинальной, пожалуйста, перепечатайте ее с информацией об авторе: lmjben

адрес проекта:GitHub.com/Inside Basic/Метод осадков…

предисловие

В реальном процессе разработки часто бывает проблематично инициализировать проект с нуля, поэтому по мере необходимости появляются различные инструменты поддержки. Инструменты создания шаблонов, такие как crea-react-app, vue-cli, @angular/cli, требуют только выполнения команды, а также настройки структуры проекта и среды разработки.

Инструменты скаффолдинга действительно удобны для нас, и разработчики могут сосредоточиться на бизнесе, не задумываясь о построении среды. Но автор считает, что также очень важно изучить процесс строительства за инструментами строительных лесов, в случае, если леса подвешены, мы все еще можем нормально построить проект. Для этого автор построил с нуляcdfang-spiderпроект.

Теперь давайте возьмем этот проект в качестве примера и создадим проект с нуля.

Выбор проекта

1. Какой из трех фреймворков выбрать?

   • Реагируйте на личное хобби.
   • React-маршрутизатор определяет маршруты.
   • Управление состоянием контекста React.
   • Хуки React состоят из компонентов.

2. Представляете строго типизированный язык?

   • машинопись. Обеспечьте поддержку типов для js, удобную для редактора, повысьте удобство сопровождения кода и упростите использование.
   • При использовании сторонней библиотеки вы можете написать код, соответствующий спецификации, и избежать неразборчивого использования API.
   • Проект использует большое количество пакетов @types/xxx, что фактически увеличивает размер проекта.
   • Редактор выполняет проверку типов в файле ts и должен просмотреть все файлы @types в каталоге node_modules, что приведет к зависанию редактора.
   • Есть еще много библиотек, которые не имеют поддержки @types и неудобны в использовании.

3. выбор css?

   • Прекомпилятор меньше. В проекте используются определения переменных, вложенность селекторов, повторное использование селекторов и т.д., достаточно меньше.
   • Для разрешения конфликтов имен можно использовать css-модули, css в js пока не рассматривается.
   • Используйте соглашение об именах bem.
   • Используйте автопрефикс плагина postcss для повышения совместимости css.

4. Какой инструмент для сборки выбрать?

   • веб-пакет. Встроенная встряска дерева, хостинг области и т. д., высокая эффективность упаковки и активное сообщество.
   • webpack-merge объединяет различные файлы конфигурации среды.
   • Настроить внешние. Введите cdn для замены больших пакетов в node_modules.
   • глоток. Используется для упаковки кода на стороне узла.

5. Проверка спецификации кода?

   • эслинт. Помощь во внедрении стандартов кодирования и эффективный контроль качества кода. Также поддерживает проверку синтаксиса машинописного текста.
   • Настройте правила eslint-config-airbnb.
   • Настройте eslint-config-prettier, чтобы отключить правила, конфликтующие с prettier.

6. Выбор тестовой среды?

   • шутка. Большой и всеобъемлющий, включая: тестовую среду, библиотеку утверждений, фиктивные данные, покрытие и т. д.
   • фермент. Протестируйте реагирующие компоненты.

7. Выбор заднего кадра?

   • коа. Простой и удобный в использовании механизм промежуточного программного обеспечения является мощным.
   • аполло-сервер. Помогите создать серверную среду graphQL.

8. Выбор базы данных?

   • монгодб. Json-подобный формат хранения ошибок удобен для хранения и дружелюбен к внешнему интерфейсу.
   • Настройте mongoose, чтобы облегчить моделирование базы данных mongodb.

9. Выбор интерфейса?

   • графкл. Соответствующие данные могут быть получены в требуемом формате для уменьшения избыточных данных на интерфейсе.
   • Схема graphql определяет параметры, операции и типы возвращаемых значений внутреннего интерфейса, и с этого момента документация по интерфейсу не требуется.
   • Внешний интерфейс можно разработать после определения схемы, а формат данных можно освоить самостоятельно.
   • Схему можно объединить. Несколько API-интерфейсов graphql можно комбинировать и подключать для каскадных запросов и т. д.
   • Дружественный к сообществу, есть много отличных библиотек, которые можно использовать напрямую: apollo, relay и т. д.

После того, как выбор базовой среды завершен, следующим шагом является создание среды проекта.

Настройка среды TypeScript

TypeScript — это надмножество JavaScript, что означает, что он полностью совместим с файлами JavaScript, но файлы TypeScript нельзя запускать непосредственно в браузере, и их необходимо скомпилировать для создания файлов JavaScript перед их запуском.

1. Создайте новый файл tsconfig.json.

• tsc -init создает файл инициализации tsconfig.json.
• vscode будет выполнять динамическую проверку типов, подсказки об ошибках синтаксиса и т. д. на основе файла tsconfig.json.
• Команда tsc преобразует код ts в код js в соответствии с правилами, настроенными в файле tsconfig.json.
• tslint прочитает правила в файле tsconfig.json, чтобы помочь в стандартной проверке кода.
  • Официальное объявление tslint устарело и будет заменено на eslint.
  • eslint также использует содержимое файла tsconfig.json.

2. Настроить эслинт.

согласно сtypescript-eslintBootstrap, настройте поддержку машинописного текста в eslint.

• @typescript-eslint/parser анализирует синтаксис ts.
• @typescript-eslint/eslint-plugin применяет правила eslint и tslint к файлам ts.

3. Выбрать компилятор машинописного текста, tsc или babel?

Используйте бабель. Преимущества заключаются в следующем:

• В сообществе babel есть много очень хороших плагинов, babel-preset-env может поддерживать номер версии конкретного совместимого браузера, но компилятор tsc не имеет этой функции.
• Babel может поддерживать компиляцию js и ts одновременно, поэтому нет необходимости вводить tsc для компиляции файлов ts и управлять только одним компилятором, который более удобен в сопровождении.
• Babel компилируется быстрее. Компилятору tsc необходимо просмотреть все файлы определения типов (*.d.ts), в том числе файлы в node_modules, чтобы убедиться, что они правильно используются в коде. Слишком большое количество типов приведет к задержке.

анализ вавилонского процесса

Babel — это компилятор синтаксиса js, который при компиляции делится на 3 этапа: синтаксический анализ, преобразование и вывод.

• Этап синтаксического анализа: анализируйте код js в абстрактное синтаксическое дерево (AST).
• Фаза преобразования: измените ast, чтобы создать преобразованный ast.
• Этап вывода: вывод преобразованного ast в js-файл.

плагины и пресеты

• плагин: анализ, преобразование и вывод преобразованного файла js. Например: @babel/plugin-proposal-object-rest-spread выведет поддержку{...}js с синтаксисом деструктурирования.
• пресет: представляет собой комбинированный набор плагинов. Например: @babel/preset-env заставляет код поддерживать последний синтаксис es и автоматически вводит плагины, которые должны поддерживать новые функции.

4. Собрать все страницы ts и tsx (во front-end среде используется webpack, а в проекте node — gulp), а затем скомпилировать в js файлы через babel.

Настройте среду React

React — это библиотека, основанная на разработке компонентов, при разработке часто используется следующий синтаксис:

• модульность es6.
• синтаксис jsx.
• синтаксис машинописного текста.
• css-препроцессор.

Эти синтаксисы не могут быть выполнены напрямую в текущем браузере, и их необходимо упаковать и скомпилировать, что также является основной работой по созданию среды React.

Конкретные шаги

1. Создайте новый html-файл и создайте корневой узел в теле для монтирования dom, сгенерированного последней реакцией.

2. Создайте новый файл index.tsx для импорта всех компонентов проекта и вызовите метод рендеринга для рендеринга компонентов на корневой узел.

3. Расслоение проекта React.

• каталог контейнеров, который содержит отдельные страницы
• Каталог компонентов хранит компоненты.Компонент состоит из двух частей: jsx и css.
• контекстный каталог, в котором хранится общий контекст реагирования.
• config, в котором хранятся общедоступные файлы конфигурации.
• каталог utils, общедоступная библиотека функциональных компонентов.
• каталог констант, в котором хранятся статические переменные.

4. Настройте webpack и используйте index.tsx в качестве входного файла для упаковки и компиляции.

• Поскольку методы упаковки разных сред различаются, файлы конфигурации среды разработки, онлайн-среды и среды оптимизации здесь абстрагируются, а файлы конфигурации объединяются с помощью webpack-merge.
• Настройте препроцессор css, используйте less-loader.
• Настройте компилятор ts для использования babel-loader.
  • @babel/preset-env: скомпилируйте последний синтаксис es.
  • @babel/preset-react: скомпилировать синтаксис реакции.
  • @babel/preset-typescript: преобразование синтаксиса машинописного текста.
• Настройте url-loader для упаковки ресурсов изображения в проекте.
• Настройте html-webpack-plugin для внедрения окончательно сгенерированных js и css в html шага 1.
  • Используйте шаблон ejs для настройки среды разработки и cdn, представленного в онлайн-среде.
• Конфигурация среды разработки с использованием готового webpack-dev-server.
  • webpack-dev-server может автоматически отслеживать изменения файлов, автоматически обновлять страницы и использовать функции исходной карты по умолчанию.
  • Настройте горячую замену модуля, react-hot-loader.

принцип упаковки webpack

Процесс упаковки webpack подобен конвейеру: начиная с входного файла, он собирает зависимости всех файлов в проекте, а если встречается нераспознанный модуль, то использует соответствующий загрузчик для преобразования его в распознаваемый модуль. Webpack также может использовать плагины для монтирования пользовательских событий в жизненном цикле конвейера для управления результатами вывода webpack.

5. Напишите скрипт npm и запустите режим разработки одним щелчком мыши.

// cross-env 用来跨环境设置环境变量
"scripts": {
  "dev:client": "cross-env NODE_ENV=development webpack-dev-server --open"
}

6. Теперь бегитеnpm run dev:clientВы можете с удовольствием писать клиентский код.

Создайте среду NodeJs

Поскольку на стороне узла используется машинописный текст и последний синтаксис es, его необходимо упаковать и скомпилировать.

• Настройте gulp, просмотрите каждый файл ts, вызовите gulp-babel и преобразуйте код ts в код js.
• Настройте супервизор для автоматического перезапуска служб узлов (nodemon не может отслеживать несуществующие каталоги).
• Напишите скрипт npm для запуска среды разработки на стороне узла одним щелчком мыши.

"scripts": {
  "dev:server": "cross-env NODE_ENV=development gulp & cross-env NODE_ENV=development supervisor -i ./dist/client/ -w ./dist/ ./dist/app.js",
}

После настройки gulp вы можете запуститьnpm run dev:serverОдин щелчок, чтобы запустить среду разработки на стороне сервера.

Иерархическое разделение

Проект MVC с использованием традиционного режима иерархического разделения.

Слой модели

Основная работа уровня модели: подключение к базе данных, инкапсуляция операций с базой данных, таких как: добавление данных, удаление данных, запрос данных, обновление данных и т. д.

• Создайте новую папку модели, каждый файл в которой соответствует таблице в базе данных.
• Файл модели содержит операции CRUD над таблицей данных.
  • Используйте mongoose для более удобного чтения и записи в базу данных mongodb.
• Файл модели возвращает инкапсулированный объект для использования уровнем контроллера.

Уровень контроллера

Основная работа уровня Controller: прием и отправка http запросов. В соответствии с внешним запросом вызовите слой модели, чтобы получить данные, а затем верните их во внешний интерфейс.

Традиционный бэкэнд, как правило, также включает сервисный уровень, предназначенный для обработки бизнес-логики.

• В соответствии с запросом внешнего интерфейса найдите соответствующий слой модели для получения данных и верните его во внешний интерфейс после обработки.
• Пишите промежуточное ПО, регистрируйте системные журналы, обработку ошибок, страницы 404 и т. д.
• Поддержка BrowserRouter во внешнем интерфейсе react-router. В соответствии с внешним маршрутом серверная часть настраивает соответствующий маршрут, и результатом сопоставления является файл index.html.
• Graphql, используемый в проекте, является относительно простым, и он также непосредственно помещается в слой контроллера для обработки.

Просмотр слоя

Основная работа уровня View: предоставление шаблонов страниц внешнего интерфейса. Если это рендеринг на стороне сервера, данные слоя модели вводятся в слой представления и, наконец, возвращаются клиенту через уровень контроллера. Поскольку передняя часть этого проекта использует реактивный рендеринг, слой представления — это непосредственно страница, упакованная webpack.

• Используйте koa-static, чтобы предоставить статический файловый сервер для доступа к html-файлам, сгенерированным после внешней упаковки.

Настройка среды GraphQL

GraphQL — это язык запросов для API, который требует настройки поддержки graphql на стороне сервера, а также требует, чтобы клиент использовал формат синтаксиса graphql для запросов.

Используйте apollo для более быстрой сборки среды graphql.

• Серверная конфигурация apollo-server.
  • Используя схему, определите тип запроса и возвращаемый формат.
  • Используйте распознаватели для обработки соответствующей схемы.
• Конфигурация клиента apollo-client.
  • Запросите данные в соответствии со схемой, определенной сервером apollo.

Настроить среду MongoDB

MongoDB — это база данных, ориентированная на хранение документов, с которой очень просто работать.

Mongoose предоставляет mongodb простую структуру на основе схемы для определения вашей модели данных. Он имеет встроенную проверку данных, построение запросов, перехватчики бизнес-логики и т. д. из коробки.

• Используйте mongoose, чтобы установить соединение с локальной базой данных mongodb.
• Создайте модель модели, одна модель соответствует таблице в mongodb.
• Функция добавления, удаления, изменения и проверки инкапсулируется в соответствии с моделью и возвращается на уровень контроллера для использования.

Следующие шаги — установить mongodb, запустить службу и все.

Настройка тестовой среды

Этот проект использует jest в качестве тестовой среды Jest включает в себя такие функции, как библиотека утверждений, тестовая среда, фиктивные данные и т. д. Это большая и всеобъемлющая тестовая библиотека. Поскольку передняя часть использует проект реакции, здесь представлена ​​​​библиотека ферментов, предназначенная для тестирования реакции.

1. Создайте новый файл jest.config.js.

• Конфигурация инициализирует файл setup.ts.
  • Настройте соответствующий фермент-адаптер в соответствии с версией реакции.
  • Смоделируйте глобальные переменные, такие как fech, canvas и т. д.
• Настройте файлы, которые необходимо протестировать.
• Настройте фиктивный файл данных.
• Настройте способ компиляции тестовых файлов.
  • ts-код компилируется с помощью ts-jest.
• Настройте файл покрытия кода.

2. Напишите тестовые файлы.

• Создайте каталоги __mocks__ и __tests__ для хранения тестовых файлов и фиктивных файлов данных.
• В соответствии с каталогом в src создайте соответствующий каталог тестовых файлов.

3. Напишите тестовые сценарии и загрузите сценарии покрытия.

"scripts": {
  "test": "jest --no-cache --colors --coverage --forceExit --detectOpenHandles",
  "coverage": "codecov"
}

Настроить онлайн-среду

После установки различных сред следующим шагом будет рассмотрение проекта для выхода в онлайн.

Настроить серверную среду

• Установите среду nodejs.узел установки nvm
• Установите демон процесса pm2.npm i pm2 -g
• Установите монгодб.официальная документация mongodb
• Установите бесплатный сертификат https.официальный сайт letsencrypt
  • Сначала необходимо зарегистрировать доменное имя (используя Alibaba Cloud для подачи, если информация полная, она может быть утверждена примерно через 10 дней).

выпуск кода

Выпуск этого проекта очень прост, и для его реализации требуется всего один шаг, это результаты настройки непрерывной интеграции.

# clone with Git Bash
git clone https://github.com/yhlben/cdfang-spider.git

# change directory
cd cdfang-spider

# install dependencies
npm i

# build for production with minification
npm run build

Все делается под командой сборки, давайте разберем, что делает команда сборки npm run.

• проверка синтаксических ошибок eslint.
• модульный тест.
  • Загрузите тестовое покрытие.
• Упакуйте клиентский код.
  • После упаковки создается html-файл в качестве слоя представления на стороне узла, который привязан к серверной части.
  • Другие статические ресурсы автоматически загружаются на Qiniu cdn после упаковки с помощью веб-пакета с использованиемqiniu-upload-pluginдля загрузки в один клик.
• Упаковка серверного кода.

Вышеупомянутые вещи можно выполнить, создав npm-скрипт, но эти команды не должны каждый раз набираться вручную.Настроив travisCI, каждый раз, когда ветка master отправляет код, вышеуказанные команды могут выполняться автоматически.

конфигурация travisCI

travisCI — это платформа непрерывной интеграции. Всякий раз, когда github отправляет код, travisCI будет уведомлен, а затем выполнит соответствующие операции в соответствии с информацией о конфигурации в travisCI и своевременно сообщит пользователям о результатах выполнения. Файл конфигурации travisCI может ссылаться на корневой каталог проекта..travis.ymlдокумент. Ядро конфигурационного файла лежит в конфигурации скрипта.

script:
  - npm run build
  - npm run test
after_success: npm run coverage

Видно, что после каждой отправки на github travisCI будет выполнять задачу с именем build.Задача разделена на два этапа.Сначала выполните команду сборки, затем выполните тестовую команду.Когда все команды выполнены, выполните команду покрытия . Если при выполнении команды возникнут какие-либо ошибки, travisCI оперативно уведомит нас по электронной почте. При непосредственном выходе в интернет сначала проверьте статус ci.Если вы прошли все этапы, то можно не беспокоиться о проблемах с выпущенным кодом.

Суммировать

Пока весь процесс отбора проекта и строительства представлен.Конечно,есть еще очень подробные места,которые не прописаны.Если вам что-то не понятно,вы можете поднять вопрос или добавить меня в WeChat yhl2016226.

Затем напишите краткое изложение следующих четырех аспектов.

• Разработка: проект объединяет интерфейс, серверную часть и базу данных, чтобы сформировать небольшой проект с полным стеком, который углубляет мое понимание всего процесса разработки.
• Тестирование: накопленный опыт автоматизированного тестирования путем написания модульных тестов, тестов пользовательского интерфейса и тестов API.
• Эксплуатация и обслуживание: Настроив непрерывную интеграцию, демон, nginx, https и т. д., я могу реализовывать развертывание небольших проектов.
• Технические аспекты: В проекте используются некоторые относительно новые технологии, такие как хуки api, graphql и т. д., но они очень базовые, в основном для практики, и в будущем требуется их дальнейшее изучение.

Для более позднего обновления проекта он в основном основан на следующих аспектах: graphql, docker, k8s, микросервисы, serverless и т. д. Слишком много всего, поэтому мне нужно хорошо учиться, 😂

Ссылка на ссылку

• Typeycript и Babel
• Дерево решений внешнего интерфейса