Поскольку компания продолжает расти, команда также постепенно расширяется. Для повышения эффективности разработки необходимо разработать набор библиотек компонентов мобильного пользовательского интерфейса, соответствующий внутренним требованиям компании. Очень повезло, что это раз и навсегда поручение оказалось под моей ответственностью. Стек технологий нашей компании — vue, поэтому библиотека компонентов пользовательского интерфейса разработана на основе vue.
В этой статье в основном рассказывается о некоторых моих идеях и способах решения проблем в процессе разработки, а что касается кода, то вы можете сами на него сослаться（在本文的底部有链接）. Компонентов разработано не так много.В круге много отличных библиотек,которые более достойны вашего изучения.Далее расскажу о своей.Идеи и практика.
1. Концепция
Сделать структуру каталогов
| папка | иллюстрировать |
|---|---|
| build | каталог сборки пакета |
| config | каталог конфигурации параметров |
| dist | Каталог упаковки документации |
| docs | Каталог документации |
| examples | Каталог компонентов |
| lib | Каталог упаковки компонентов |
| packages | Каталог компонентов |
| src | каталог ресурсов |
| test | каталог модульных тестов |
Технический отбор
В качестве инструментов управления ресурсами я выбираю webpack и gulp, причина выбора gulp в том, что стили и функции компонентов упакованы отдельно, а задачи gulp просты и удобны в написании. Когда дело доходит до стилей, я выбираю меньше, потому что все время использую меньше в своей работе. Карма выбора для модульного тестирования. Также есть некоторые другие вспомогательные инструменты, такие как babel, eslint, postcss и т.д. Подробности можно увидетьpackage.jsonдокумент.
Во-вторых, начать
Личные привычки, сначала запустить сервис, скажем, установить dev-сервер, настроить dev-скрипт, прописать в папке сборки webpack.dev.config, вход указывает на директорию папки examples, а потом компоненты разработки все сюда отладка. Структура каталогов в примерах аналогична скаффолдингу vue-cli.Здесь используется Flexible.js, который используется в проектах компании.Чтобы соответствовать привычкам разработки других участников, этот метод также используется при отладке кейсов. Так же для того, чтобы соответствовать спецификации команды, я установил rootValue в конфигурации postcss-pxtorem.Если смотреть на код, то здесь стоит обратить внимание. Я также сделал некоторую обработку, когда компоненты были упакованы, что будет обсуждаться позже в этом месте.
После того, как сервис настроен, пора приступать к написанию компонентов. Эта часть энергии в основном размещена в папке packages.Расскажу вкратце о своих дизайнерских идеях.Каждый компонент назван по имени функции для создания подпапки, которую выводит index.js, что удобно для нужд загрузки по запросу позже. Напишите функциональный код компонента в src. Наконец, все компоненты вводятся и выводятся в файле index.js в src корневого каталога. Здесь я использую небольшую хитрость, чтобы предотвратить постоянное увеличение разработки компонентов, что приводит к все большему и большему написанию импорта, я использую его здесьrequire.contextОптимизация кода. После этого я использую эту схему для оптимизации и изменения мест, где регулярно вводится большое количество файлов.
Иконки неизбежно используются при разработке компонентов, здесь я использую два плагина gulp.gulp-iconfontа такжеgulp-iconfont-cssПреобразование файлов SVG введение использования стилей шрифтов. Если вы не используете Gulp, вы можете найти соответствующее использование библиотеки плагинов.
После того, как компонент написан, он внедряется в main.js в примерах, и эффект выглядит следующим образом:
3. Документация и упаковка
Все функции разработаны, а затем создается страница введения документа, которую вы можете прочитать. Эта часть разработана в документах.Для удобства пользователей документ совместим с ПК и мобильными терминалами и использует медиа. Во многих других документах компонентов пользовательского интерфейса мобильный терминал будет отображать модель стиля мобильного телефона.Я наблюдал несколько, и все они используют сервис github.io, представленный в iframe. В частности, чтобы объяснить здесь, я этого не делал, мой метод заключается в упаковке примеров в каталог dist.При запуске службы документации для разработки модель мобильного телефона вводит предварительно упакованный статический файл примеров. Если вы хотите получить последний файл примеров, вам нужно сначала запаковать примеры, а затем запустить службу документов.Здесь может быть неудобное место, то есть примеры и документы разрабатываются одновременно.Два сервиса, и нет интеграции двух. Моя причина в том, что если вы хотите написать кейс, напишите кейс, а если вы сначала напишите документы, больше ничего не пишите.
Упакованы в папку сборки, это запутанное сжатие js с помощью webpack и обработка файлов стилей с помощью gulp.Как упоминалось выше, чтобы больше соответствовать привычкам командной разработки, я использую в примерах гибкие, потому что мы также использовать его в работе, I Когда стиль упакован, отдельные стили каждого компонента сжимаются в две версии, соответственно, в rem и px, а rem обрабатывается pxtorem. Я не буду вводить подробности, вы можете увидеть мой код.
module.exports = {
plugins: {
"postcss-pxtorem": {
"rootValue": 75,
"propList": ["*"]
}
}
}
Последний — модульный тест, эта часть еще только изучается, поэтому я не буду говорить больше.
4. Резюме
На этом работа библиотеки компонентов с 0 по 1 завершена, кратко резюмирую свой опыт разработки:
Сначала подумай, а потом пиши, ты избежишь обходных путей. Работа за этот месяц позволила мне накопить большой опыт разработки и значительно улучшила мои способности к структурному мышлению, что в целом хорошо. Адрес прикреплен в конце, добро пожаловать, чтобы ответить и добиться прогресса вместе.
Желаю успехов в работе
Дэн Вэньбинь
14 февраля 2019 г.