передовой инжиниринг

внешний интерфейс
❝

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

❞

1. Леса

❝

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

❞

1.1 Общие инструменты для строительных лесов

  • Официальные леса Vue: vue-cli
❝

Vue CLI — это полноценная система для быстрой разработки на основе Vue.js.Официальная документация 🚀

❞

Как установить

npm install -g @vue/cli-service-globa

Как быстро создать проект

vue create admin-template

Есть два режима создания, один — конфигурация по умолчанию (без пакетов npm с другими вспомогательными функциями), а другой — ручная настройка (можно настроить в соответствии с производственными потребностями).

  • Yeoman
❝

Официальное введение: Yeoman помогает вам начинать новые проекты, определяет передовые методы и инструменты, которые помогут вам поддерживать производительность, это базовая структура поддержки, и вы также можете настроить свою собственную реализацию поддержки через yoman.

❞

Йомен в основном включает: йо (строительные леса, инструменты автоматической генерации), Grunt, gulp (инструменты сборки), Bower, npm --- (инструмент управления пакетами) и т. д.

Как установить

npm install -g yo

Сообщество йоменов предлагает различные шаблоны каталогов проектов на выбор.Посмотреть ссылку, вы также можете использовать yoman-generator для обертывания собственных лесов

1.2 Разработка инструментов для строительных лесов

❝

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

❞

О практике возведения строительных лесов в проекте можно прочитать в варенье из дерева.«Разработка простых строительных лесов от 0 до 1»

1.3 Управление шаблонами

❝

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

❞

1.4 Резюме

❝

Леса могут повысить эффективность инициализации и построения проекта и сократить время, затрачиваемое на строительные проекты. Крупномасштабные команды могут самостоятельно разрабатывать внутренние инструменты строительных лесов. Для небольших команд «коэффициент выхода» разработки инструментов строительных лесов не очень высок. , В конце концов, после того, как инструмент создания лесов завершит инициализацию проекта, леса становятся бесполезными. Поэтому для команды с небольшими силами разработчиков не очень «рентабельно» вкладывать время в разработку инструмента создания лесов. установить внутреннее управление шаблонами. , вы можете управлять им с помощью git или svn

❞

2. Инструменты для сборки

❝

Что такое инструменты сборки? Инструменты сборки позволяют нам лучше автоматизировать обработку, в том числе (преобразование es6, css, сжатие js, less, преобразование sass и т. д.), так что нам больше не нужно делать эти вещи вручную, освободить руки разработчиков и лучше сосредоточиться на бизнесе разработки, суть построения состоит в том, чтобы «связать» код, затем сжать и запутать, и, наконец, создать целевой файл кода.Обычные инструменты построения включают: webpack, rollup, Parcel, grunt, gulp

❞

2.1 Webpack

❝

Webpack — это интерфейсный инструмент упаковки, который находит модули и зависимости между модулями, анализируя структуру каталогов проекта, и конвертирует языки, которые не могут быть запущены браузерами напрямую, такие как машинописный текст, синтаксис препроцессора CSS (less, sass) , и т. д. или из-за просмотра. Поскольку браузер не поддерживает новые встроенные функции в конце версии, его необходимо преобразовать и упаковать в формат, поддерживаемый браузером, 👇 - это основная функция.

❞
  • Препроцессоры CSS, такие как less, sass и другие браузеры, не поддерживаются.
  • Некоторые браузеры с низкими версиями не поддерживают синтаксис es6 и должны быть преобразованы в синтаксис es5 для использования в браузере.
  • В проекте слишком много зависимостей, слишком много файлов, и необходимо преобразовать сложную структуру кода в уточнение.
  • Модульная упаковка сохраняет удобство сопровождения одного модуля, уменьшает количество http-запросов и оптимизирует скорость загрузки.

О практике вебпака в проекте можно прочитать в дереве варенья"[webpack] Миграция и практика с vue-cli 2x на 3x"

Для получения дополнительной информации о настройке и изучении веб-пакета вы можете прочитать следующие статьи👇

2.2 Rollup

❝

rollup больше подходит для упаковки js sdk или упакованного фреймворка с Tree-shaking, а для представленного в предыдущем разделе webpack больше подходит для упаковки некоторых приложений, таких как SPA или изоморфные проекты

❞

О практике Роллапа в проекте можно прочитать на дереве джем"Внешний интерфейс JS-SDK Эти вещи"

Для получения дополнительной информации о настройке и изучении Rollup вы можете прочитать следующие статьи👇

2.3 Parcel

❝

Официальное введение: Parcel — это инструмент для упаковки веб-приложений, подходящий для разработчиков с разным опытом. Он использует многоядерную обработку для обеспечения невероятной скорости и не требует какой-либо настройки.Официальная ссылка 🚀

❞

Самая большая разница между Parcel и веб-пакетом, представленным выше, заключается в том, что нет необходимости поддерживать файлы конфигурации.Например, если вы хотите преобразовать синтаксис less, вам нужно настроить less-loader в веб-пакете для его завершения, в то время как Parcel делает это. не нужно устанавливать меньше.Parcel автоматически сконвертируется при обнаружении меньшего количества файлов. Другими словами: Parcel может выполнить требования к строительству проекта без настройки, просто!

Преимущество в том, что время упаковки тоже меньше! 🚀

Для получения дополнительной информации о настройке и обучении вы можете прочитать следующие статьи👇

2.4 Сборка инструментов управления пакетами npm

❝

Вы можете использовать скрипты npm для выполнения операций сборки, писать соответствующие команды в packjson и выполнять npm run [задачи], как показано ниже👇

❞ 
"scripts": {
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build",
    "build_development": "vue-cli-service build --mode development",
    "build_test": "vue-cli-service build --mode test",
    "build_preproduction": "vue-cli-service build --mode preproduction",
    "build_production": "vue-cli-service build --mode production",
    "unit": "jest --config src/test/unit/jest.conf.js --coverage",
  },

Определите разные команды выполнения в соответствии с разными задачами

2.5 Резюме

  • Webpack: подходит для создания крупномасштабных проектов: в настоящее время webpack имеет наиболее полную экологию, больше сценариев приложений, высокую популярность в сообществе, а также сильную экологию загрузчика и подключаемых модулей.
  • Rollup: подходит для упаковки библиотеки инструментов: каждый модуль может быть упакован в файл с Tree-shaking для удаления бесполезного кода и уменьшения размера кода, но он не имеет мощной экосистемы подключаемых модулей, как webpack, и его расположение более подходящее. для Фокус на упаковке библиотек
  • Parcel: подходит для экспериментов: хотя у него нет преимуществ в конфигурации, он может быстро и эффективно упаковывать приложения, но у него нет древовидной тряски, что приводит к большим выходным файлам.
  • grunt, gulp: подходит для построения потока инструментов проекта, постепенно заменяется и заменяется, не рекомендуется

3. Имитационный сервис

❝

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

❞

Front-end Mock в основном включает следующие методы:

  • перехват данных
  • тип службы json-сервера
  • Платформа управления визуальным интерфейсом

3.1 Тип перехвата данных

❝

Перехват данных относится к перехвату реальных запросов для соответствующих соответствующих интерфейсов путем имитации запросов Http и возврата смоделированных данных.В настоящее время основными инструментами являются следующие👇

❞
  • mockjs
❝

Официальное введение: Mock.js — это генератор фиктивных данных, разработанный, чтобы помочь фронтенд-инженерам разрабатывать независимо от бэкенда, помогать писать модульные тесты, генерировать и возвращать фиктивные данные путем имитации запросов Ajax.официальная документация

❞

Как установить

npm install mockjs;

как пользоваться

❝

Еще больше фиктивных примеров синтаксиса 👉я указываю

❞ 
//mock.js
const Mock = require('mockjs');
Mock.mock(new RegExp('/user/info'), 'get', {
        'code': 0,
        'msg': 'success',
        'data': {
            "content|15": [{
              "startTime": "@date('yyyy-MM-dd')",
              "createUser": '@cname', //名字为随机中文名字
              "endTime": "@date('yyyy-MM-dd')", 
              "ago|18-28":25,    //年龄为18-28之间的随机数字
              "sex|1": ["female", "male"], //返回数组中随机的一个
              "ud": "@increment" //自增
            }],
        }
})

Mock.js вводится в main.js, нужно судить об окружении проекта, а он вводится только в mock окружении

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios';
if(process.env.NODE_ENV === 'mock'){
    require('./mock.js')
}
Vue.prototype.$axios = axios;

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Когда внешний интерфейс запроса совпадает с api:'/user/info', он не инициирует реальный запрос интерфейса к серверной части, но перехватывается макетом и возвращает данные интерфейса, которые мы изначально установили, следующим образом.

 axios.get('/user/info', {}}).then(res=> {
    console.log(res);
 })

Как показано на следующем рисунке 👇, имитация выполнена успешно. Вы можете видеть, что определенные нами фиктивные данные успешно возвращены. Метод перехвата может просматривать возвращаемые данные только через консоль, поскольку запрос не виден в сети Chrome, которая также является его недостатком.

3.2 тип сервиса json-сервер

❝

json-server — это модуль узла. Запустив сервер Express, вы можете напрямую использовать файл json в качестве веб-сервера с полным RESTful API и поддержкой междоменных функций, jsonp, настройки маршрутизации и других функций. Его также можно комбинировать с предыдущий раздел. Введен mock.js для достижения эффекта фиктивных данных

❞

По сравнению с методом перехвата данных mock.js, упомянутым в предыдущем разделе, преимущество json-server заключается в том, что он может видеть реальный сетевой запрос, а недостатком — необходимость запуска службы узла. читатьОфициальная документация 🚀

  • Как установить
npm install -g json-server
  • как пользоваться
json-server --watch db.json
// db.json 为mock数据源

3.3 Платформа управления фиктивным интерфейсом

❝

В предыдущем разделе было представлено использование перехвата данных, но если ваша команда относительно большая и проектов много, каждый проект должен поддерживать такие «данные», что крайне неудобно, то есть ли лучший способ — шерстяная ткань?

❞

То есть управлять платформой через mock-интерфейс, например, rap, easy-mockСсылка на документацию, Y APIСсылка на документациюПодождите, давайте представим YApi здесь

  • YApi
❝

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

❞

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

Выберите управление данными, включите импорт URL-адресов и введите ссылку на документацию по интерфейсу swagger.

3.4 Резюме

❝

Если масштаб командного проекта небольшой, рекомендуется использовать тип перехвата данных (mockjs), который удобно менять, но если масштаб проекта большой, сотрудничает несколько человек, а интерфейс запроса становится быстрее, рекомендуется использовать фиктивную платформу управления интерфейсом

❞

4. Технические характеристики внешнего интерфейса

❝

С ростом зрелости интерфейсной разработки стандартизация кода играет большую роль в повышении эффективности разработки, включая последующее обслуживание.Унифицированные спецификации могут сэкономить время и стоимость передачи, а спецификации включают структуру каталогов, качество кода (именование, комментарии и т. д.). ., спецификация JS, спецификация CSS, отступы и т. д.)

❞

4.1 Структура каталогов

❝

Стандартизируйте каталог src проекта в соответствии с бизнес-моделью

❞ 
静态资源目录: assets
本地数据模拟目录: mocks
公共函数方法目录: utils 
单元测试目录: test
常量目录: consts
icon目录: icons
公共混合函数目录: mixin
路由目录: router
组件目录: components
页面目录： views
配置目录： config
服务api接口管理目录： api
vuex 状态管路目录： store
.env*: 项目中我们通常会使用环境变量来影响应用在不同运行环境下的行为. 从文件中读取环境变量

4.2 Синтаксические ограничения

  • Компонентные правила именования
  1. Назван в соответствии с функцией: например, заголовок — это заголовок, который представляет собой панель навигации заголовка.
  2. Разделите компоненты в соответствии со страницей: например, список статей NewsItem, который можно использовать для списка статей или рекомендаций по содержанию на странице сведений.
1.组件的文件名始终是单词大写开头 如：(PascalCase)
2.在声明 prop 的时候，其命名应该始终使用 驼峰命名法
3.组件名应该是完整单词而不是缩写
  • спецификация vue
1.总是用 key 配合 v-for
2.不要把 v-if 和 v-for 同时用在同一个元素上。
3.Object.freeze 方法来冻结一个不会有任何改变的对象，减少组件初始化的时间
4.每个组件 export default {} 内的方法顺序一致，方便查找对应的方法。
按照 data、props、钩子、watch、computed、components
5.props里加数据类型，是否必传，以及默认值，便于排查错误，让传值更严谨
6.使用定时器，要在beforeDestroy()生命周期内清除定时器
  • css именование
❝

По мере увеличения количества модулей проекта, для предотвращения конфликтов CSS, определенных на разных страницах или компонентах, стандартизация синтаксиса CSS также становится решающей.Рекомендация: БЭМ, которые представляют: Блок (блок), Элемент (элемент), Модификатор (символ модификатора)

❞ 
.user-info {} # user-info 是一个块，我理解是一个模块
.user-info--feature {} # user-info--feature 是一个修饰符，用来表示这个块的不同状态
.user-info__title{} # user-info__title 是一个元素，属于userinfo模块下的，多个元素组成块

4.3 Спецификации средств разработки

  • eslint
❝

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

❞

Рекомендуется использовать два пакета расширения (спецификация airbnbСсылка на официальную документацию 🚀 & eslint-plugin-vueСсылка на официальную документацию 🚀)

  • Prettier
❝

это инструмент для форматирования кода. Используется для сохранения единообразия стиля проекта команды.

❞
  • stylelint
❝

stylelint — это инструмент проверки кода CSS для ограничения написания спецификаций CSS и улучшения читабельности кода.официальная документация

❞

Для конкретного использования, пожалуйста, прочитайте варенье из дерева«Внешние спецификации — вот такие вещи»

4.4 Спецификация коммита Git

❝

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

❞
  • Определение ограничения
feature: 开发新的功能
fix: 修复bug
refactor: 代码重构
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
test: 测试用例修改
perf: 改善性能
build: 变更项目构建或外部依赖（例如scopes: webpack、gulp、npm等）
revert: 代码回退

比如：
git commit -m 'fix：修复某某bug'

В дополнение к приведенным выше простым спецификациям вы также можете настроить его, интегрировав Commitlint. Следующий раздел научит вас, как начать работу. Заинтересованные детской обуви могут просмотреть более подробную информацию официальной документации.нажмите на меня 👈,

  • Автоматическое обнаружение
❝

Итак, как настроить его на vue-cli? В настоящее время вам необходимо использовать официальную поддержку конфигурации Git Hook vue-cli3x, см. здесьнажмите на меня 👈. Он инкапсулировал yorkie (вы переписали), yorkie по сути сделал некоторые индивидуальные изменения на основе fork husky, чтобы хуки можно было прочитать из свойства "gitHooks" package.json, мы можем передать Конфигурация gitHooks объединена с Commitlint для автоматического обнаружить журнал фиксации фиксации.Ниже приведена блок-схема👇

❞

Установить коммитлинт

npm install -g @commitlint/cli @commitlint/config-conventional

Создать файл конфигурации commitlint

// 新建 commitlint.config.js 
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feature', // 开发新的功能
        'fix', // 修补bug
        'refactor', // 代码重构
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'test', // 增加测试
        'build', //  变更项目构建或外部依赖（例如: webpack、package等）
        'revert', // 回滚
        'perf', // 改善性能
      ],
    ],
    'type-empty': [2, 'never'], // 提交不符合规范时,也可以提交,但是会有警告
    'subject-empty': [2, 'never'], // 提交不符合规范时,也可以提交,但是会有警告
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
  },
};

Настроить gitHooks

// package.json
"gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -E GIT_PARAMS"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint"
    ],
    "*.vue": [
      "vue-cli-service lint"
    ]
  },

4.5 Ограничения документа

❝

Если команда небольшая, вы можете обратиться к спецификациям внешнего интерфейса ведущих интернет-компаний, чтобы унифицировать стиль кода,

❞

5. Модульное тестирование

❝

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

❞

5.1 Подготовка

  • Сначала вам нужно выбрать фреймворк модульного тестирования: jest, Mocha, Karma и т. д.
  • Сделать тестовые правила
  • Ограничьте минимальное покрытие модульным тестом команды: например, если покрытие функции достигает 80%, то, если каждый автоматизированный тест не соответствует этому условию, проект не будет выпущен до тех пор, пока не будет выполнено целевое условие.

5.2 Соблюдайте правила

❝

Независимо от того, какая среда модульного тестирования используется, основной принцип заключается в том, чтобы полагаться на следующие моменты👇

❞
  • Предполагать:如：test('formatTime()默认格式，返回时间格式是否正常', () => {})Укажите условия, которые должны быть выполнены для завершения теста
  • Когда: операция, которая должна быть выполнена, например:date.formatTime(1586934316925)Выполните тест для этой функции
  • Затем: получить результат, оба получают утверждение, например:expect(date.formatTime(1586934316925,'yyyy.MM.dd')).toBe('2020.04.15');

Для большего использования, пожалуйста, прочитайте варенье из дерева«Внешнее модульное тестирование этих вещей»

6. Развертывание проекта

❝

После завершения разработки проекта онлайн-развертывание также является важной частью проектирования, а для интерфейсных проектов развертывание не является болезненным.

❞

В настоящее время большинство SPA представляют собой простые статические файлы ресурсов, которые можно упаковать напрямую, а затем использовать в качестве прокси для выполнения простого развертывания.Его также можно комбинировать с docker и jenkins для автоматического развертывания, непрерывного развертывания и непрерывной интеграции.

Для внешнего приложения, отображаемого сервером, развертывание является относительно более сложным, и ему также необходимо управлять процессом, следить за тем, чтобы служба работала нормально и т. д., что предполагает использование других инструментов. Ниже приведены несколько основных направлений. участвует в развёртывании front-end инжиниринговых проектов.Инструменты следующие👇

  • jenkins: расширяемый сервер автоматизации, который можно использовать как простой CI-сервер с возможностями автоматической сборки, тестирования и развертывания.
  • Docker: контейнер виртуальной среды, который может упаковывать среду, код, файлы конфигурации и т. д. в этот контейнер и, наконец, публиковать приложение.
  • npm: официальный инструмент управления пакетами, предоставляемый Node.js, в основном используемый для управления зависимостями проекта и выпуском
  • nginx: его можно использовать в качестве веб-сервера или сервера балансировки нагрузки с высокой производительностью и большим количеством одновременных подключений.
  • pm2: Инструмент управления процессами узла, который можно использовать для упрощения многих утомительных задач по управлению приложениями узла.

Для большего использования, пожалуйста, прочитайте варенье из дерева«Фронтальная эксплуатация и техническое обслуживание, развертывание этих вещей»

использованная литература: «Архитектура фронтенда от входа до микрофронтенда»

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

Категории