Обновлено 29.07.2020 Команда электронной коммерции Hangzhou Youzan срочно нуждается в 10+ HC, охватывающих интерфейс, Java, тестирование, если вы заинтересованы, пожалуйста, свяжитесь с lvdada@youzan.com или напрямую свяжитесь с wx: wsldd225
предисловие
Команда фронтенда Шан Чжуана уже некоторое время использует weex для трехтерминальной унифицированной разработки.На момент публикации этой статьи большая часть страниц приложения «Дарендиан» была переработана с помощью weex, а некоторые основные компоненты и бизнес-компоненты также были накоплены за этот период.
Предыдущий способ обслуживания компонентов состоял в том, чтобы поддерживать папку компонентов в проекте проекта Daren Store.Из-за ежедневной итерации разработки, параллельных требований и увеличения числа разработчиков этот метод обслуживания также выявил некоторые проблемы.
1. Разработчики могутНе стесняйтесь разрабатывать и изменять компоненты в компонентах в соответствии с требованиями, нарушая согласованные спецификации или скрывая ошибки.
2,Отсутствует спецификация компонента определенияНапример, при разработке некоего требования разработчик А чувствует, что эту функцию можно разделить на компоненты, поэтому он определяет и использует ее прямо в компонентах, но на самом деле это псевдотребование. использует его снова, что приводит к компоненту компонентов Частичная избыточность библиотеки.
3.Процесс извлечения компонентов нельзя использовать вместе, типа А одноклассники по разработке вырезали ветку фичиfeature/A, и извлек общий компонент по проектуComponentA, B разработал функциональную ветку B, а также хочет использовать этуComponentAКомпоненты, но в настоящее время они находятся в разных ветках, и код нельзя использовать совместно.
4. . .
Исходя из вышеуказанного неудобства, мы пытаемся извлечь компоненты и поместить их во внутренний частный репозиторий npm, чтобы поддерживать их в виде пакетов npm.
То есть мы будемspon-ui（内部组件库名称）Поддержание как отдельного проекта и формирование спецификации разработки библиотеки компонентов с ограничениями может эффективно решить вышеуказанные проблемы.
Эта статья представляет собой некоторую практику этого процесса извлечения, в том числеОтладка компонентов,Отладка документа,использование нпм,выпуск компонентаи так далее. Конечно, синтаксис weex такой же, как и у vue, и эти методы применимы и к vue.
1. Отладка библиотеки компонентов
Первый взглядspon-uiСтруктура каталогов проекта библиотеки компонентов.
|- spon-ui
||-- build
||-- docs
||-- examples
||-- packages
|||--- weex-field
||||---- index.js
||||---- field.vue
||||---- example.vue
||||---- readme.md
||||---- package.json
||-- src
- Некоторые файлы выполнения скриптов хранятся в сборке для отладки и публикации проекта.
- Сценарий для отладки документов хранится в документах, и создается сервер отладки документов.
- Сценарии для отладки компонентов хранятся в примерах, и создается сервер отладки компонентов. (без хранения примеров компонентов)
- пакеты содержат фактические компоненты вместе с их документацией и примерами.
- src содержит общедоступные методы, которые может использовать компонент.
Отладка компонентов
Папка с примерами содержит соответствующие скрипты для отладки компонентов, эту папку не нужно менять в процессе разработки, а только определяет некоторую логику сервера отладки. Примеры реальных компонентов не включены.
Реальный пример хранится в соответствующем каталоге компонента,example.vueВнедрить компонент vue в текущий каталог при отладкеexample.vueОтладка, поскольку для отладки компонента требуется имитация использования компонента (изменение входящих значений, взаимодействие с пользователем и т. д.).
при исполненииnpm run dev:componentsКогда, развивающиеся студенты увидят, что браузер открывает страницу:
Выберите компонент, который вы хотите отлаживать, например weex-dialog, и войдите в интерфейс отладки weex-dialog.
Когда разработчики изменят содержимое компонента weex-dialog в каталоге пакетов в это время, они увидят измененное содержимое в режиме реального времени и отладят его.
Вывод QR-кода в консоль
Кроме того, разработанные нами компоненты основаны на weex, а это означает, что разрабатываемые компоненты должны поддерживать три терминала (iOS android H5), поэтому QR-код текущего компонента js будет напечатан в консоли для нативной отладки.
Как вывести QR-код в консоль тоже небольшой трюк.Сначала используйте библиотеку QR-кода js для генерации изображения QR-кода из ресурса, а затем используйте механизм консоли для вывода фонового изображения для печати QR код.
console.log("%c", "padding:75px 80px 75px;line-height:160px;background:url(" + base64 + ") no-repeat;background-size:160px");
Вся страница отладки отображается в виде одной страницы, используяvue-routerДля управления маршрутизацией weex также поддерживаетvue-router, так что эта отдельная страница также хорошо работает в нативном формате.
Автоматически генерировать информацию о компонентах
при каждом исполненииnpm run dev:componentsкоманда, она будет автоматически сгенерирована в соответствии с компонентами в каталоге пакетовnav-list.jsфайл, этот индексный файл используется для определенияvue-routerинформация о маршрутизации и список компонентов домашней страницы отладки. Это полностью превращает процесс отладки в черный ящик, где разработчикам нужно только сосредоточитьсяpackagesРазвитие в каталоге может быть.
const routes = navList.map((item) => {
const path = item.path;
return {
path,
// 需要加vue后缀，不然webpack会将examples下的所有文件都require一下
component: require('examples/' + item.exampleRequire + '.vue'),
};
});
routes.push({
path: '/',
component: require('./app.vue'),
})
// 组件列表也通过 nav-list.js 渲染
<spon-cell-group>
<spon-cell
v-for="(page, jndex) in item.list"
:key="jndex"
:title="page.title"
:is-link="true"
@click="changePage(page)"
></spon-cell>
</spon-cell-group>
webpack требует динамических ресурсов
В этой статье используется веб-пакет 3.x.x.
При запросе динамического модуля, упомянутого в предыдущем разделе, если тип файла не указан, вебпак потребует все ресурсы в каталоге.Проблема в том, что если в каталоге есть файл определенного типа, а соответствующий загрузчик отсутствует используется, во время компиляции будет сообщено об ошибке. Если не добавлено в предыдущем разделе.vueсуффикс, для веб-пакета потребуются все ресурсы в каталоге примеров.
Поэтому при определении компонентов каждого маршрута вам нужно добавить суффикс vue, чтобы найти файл vue.
component: require('examples/' + item.exampleRequire + '.vue'),
};
Документация для веб-пакета указана наВеб-пакет Это PE .org/guides/…
Принцип динамического требования указан в официальной документации webpack, дляrequire("./template/" + name + ".ejs");Ссылка с выражением, webpack анализирует здесь запрос и получает две части информации:
1. Каталог./template2. Правило сопоставления/^.*\.ejs$/
Затем webpack получит контекстный модуль на основе этих двух данных, этот модуль содержит./templateВсе каталоги, начиная с.ejsсуффиксные модули.
{
"./table.ejs": 42,
"./table-row.ejs": 43,
"./directory/folder.ejs": 44
}
есть еще одинrequire.context()Метод может настраивать правила динамического обращения.Также есть примеры в документации.На официальном сайте дается демо на основе этого, которое знакомит со всеми модулями, отвечающими правилам, в каталоге.
function importAll (r) {
r.keys().forEach(r);
}
importAll(require.context('../components/', true, /\.js$/));
Отладка документов
Когда разработка компонента почти завершена, необходимо написать соответствующие документы для облегчения использования и исполнения коллегами и друзьями.npm run dev:docsБудет открыт сервер отладки документов, чтобы помочь учащимся писать документы.
Логика сервера документов размещена вdocsВ каталоге он также отделен от кода компонента.Информация о компоненте слева динамически получается из информации о компоненте в каталоге пакетов, а предварительный просмотр компонента справа используется напрямую.examplesЛогика отладки компонента в каталоге, средняя часть взята из компонента в компонентеreadme.mdдокумент.
Вся заявка на документ также основана наvue + vue-routerразработка.
<div class="nav-bar-container">
<page-nav></page-nav>
</div>
<div class="document-area-container markdown-body">
<router-view></router-view>
</div>
<div class="mock-phone-container">
<page-preview :component-name="componentName"></page-preview>
</div>
<router-view>Это содержимое документа, отображаемого по соответствующему маршруту, соответственно при определении маршрутной информации необходимо определить маршрут и соответствующий маршрут.readme.mdдорожка.
const routes = navList.map((item) => {
const path = item.path;
return {
path,
component: require('mds/' + item.mdRequire + '.md'),
};
});
const router = new VueRouter({
routes,
});
уценка конвертировать vue
используется при ссылке на компонент.mdсуффикс, здесь принятvue-markdown-loaderЗагрузчик от Ele.me. Этот загрузчик по-прежнему использует vue-loader, чтобы сначала преобразовать содержимое md в html, а затем преобразовать его в однофайловую форму, требуемую vue для vue-loader.
var renderVueTemplate = function(html, wrapper) {
// 本文作者注
// 传入的html是根据 markdown插件将md转换而来
var $ = cheerio.load(html, {
decodeEntities: false,
lowerCaseAttributeNames: false,
lowerCaseTags: false
});
...
// 本文作者注
// 将html转换成 vue-loader 所需的字符串形式
result =
`<template><${wrapper}>` +
$.html() +
`</${wrapper}></template>\n` +
output.style +
'\n' +
output.script;
return result;
};
var result =
'module.exports = require(' +
loaderUtils.stringifyRequest(
this,
'!!vue-loader!' +
markdownCompilerPath +
'?raw!' +
filePath +
(this.resourceQuery || '')
) +
');';
// 本文作者注
// 将转换好的字符串传给 vue-loader
return result;
2. Инжиниринг на основе скрипта npm
"scripts": {
"bootstrap": "npm i",
"dev:components": "node build/bin/dev-entry.js",
"dev:docs": "node build/bin/docs-dev-entry.js",
"build:docs": "node build/bin/docs-build.js",
"pub:docs": "npm run bootstrap && npm run clean && node build/bin/release.js",
"pub:components": "node build/bin/prepublish.js && lerna publish --skip-npm --skip-git && node build/bin/publish.js",
"clean": "rm -rf docs/dist && rm -rf docs/deploy",
"add": "node build/bin/add.js"
},
В этом проекте извлекаются все часто используемые команды, и, наконец, раскрываются команды, используемые студентами-разработчиками: 4:
npm run dev:components 组件的调试
npm run dev:docs 文档的调试
npm run pub:docs 文档的发布
npm run pub:components 组件的发布
Рекомендуется прочитать блог Руан Ифэнруководство по использованию скриптов npm, в котором подробно рассказывается о скрипте npm.
Автоматически генерировать леса
npm run addИнформация о каркасах, необходимая для компонента, будет автоматически добавлена, чтобы облегчить учащимся разработку новых компонентов.
Рекомендуется здесьjson-templater/stringМодуль работает со строковыми шаблонами.
Некоторые значения в файле скаффолдинга будут отличаться в зависимости от имени компонента, и соответствующее содержимое скаффолдинга будет автоматически сгенерировано в соответствии с именем компонента, что более удобно для разработки.
npm link
Компоненты локально разработанные, и завершены письменные примеры и документация, но я не знаю, что использование не появится странной ошибкой в реальных проектах.
Самый примитивный способ — скопировать компоненты в npm-пакет в проекте для реальной отладки.
Конечно, npm также предоставляет методы для решения этой проблемы.
1. Первый вspon-uiКорневой каталог библиотеки компонентов выполняетnpm link
2. Вернитесь в каталог проекта и выполнитеnpm link spon-ui, две команды могут отображать spon-ui, на который изначально ссылались в проекте, на локальныйspon-uiв каталог.
3.npm unlinkОтмените мягкую цепочку.
3. Зависимости исходного кода
Сценарий npm, упомянутый в предыдущем разделе, не упоминает процесс упаковки компонентов, потому что, если упаковка выполняется на уровне компонентов, он добавит некоторый избыточный код веб-пакета и увеличит байты, а эта библиотека компонентов в настоящее время полностью используется внутренними проектами. Среда упаковки существует в проекте, и нет необходимости заранее упаковывать.
Следовательно, выпущенный пакет компонентов — это все компоненты под пакетами, а проект зависит от исходного кода компонента, который называетсязависимости исходного кода.
Чтобы добиться зависимости от исходного кода, вам необходимо изменить конфигурацию babel в бизнес-проекте (не в этом компонентном проекте). исключатьspon-uiкомпоненты
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules(?!\/.*(spon-ui).*)/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
},
У Диди есть статьиПуть к компиляции и оптимизации webpack-приложенийОбсуждаются преимущества зависимостей исходного кода.
4. Публикация компонентов
мы использовалиlernaДля управления выпуском компонентов в lerna есть два метода выпуска: один заключается в том, что все компоненты проекта выпускаются как пакет, а другой заключается в том, что несколько компонентов проекта могут быть выпущены по отдельности.
Мы использовали первый, то есть все компоненты объединены в один дистрибутив. Этот метод не использует силу lerna, но все же хорош для управления номерами версий перед выпуском. Если вы хотите в будущем выпускать каждый компонент отдельно, можно изменить конфигурацию.
Управление версиями
Управление тестовой версией
Как упоминалось выше, разработка текущей библиотеки компонентов по-прежнему зависит от итерации требований, никто в небольшой команде специально не разрабатывает компоненты, и разработка компонентов будет итерироваться вслед за итерацией требований.
Затем, после того как требования к ранним изменениям компонентов пройдут собрание по рассмотрению, проект официально войдет в процесс разработки. При разработке проекта будет различаться тестовая среда и предварительная полная среда, поэтому номер версии компонента также должен отличать тестовую среду от полной среды.
npm publish --tag
Введите тег публикации, по умолчанию будет выпущен пакет npm.latestЭтикетка, каждое исполнениеnpm publishавтоматически установит тег на последнюю версию, которую также можно понимать как стабильную версию, поэтому нам нужно добавить еще один тег
npm publish --tag dev
Эта команда представляет собой добавлениеdevтег и вставьте номер версии этого выпускаdevЭтикетка.
воплощать в жизньnpm dist-tag ls spon-uiВы можете просмотреть информацию о номере версии, соответствующую текущей этикетке.
➜ spon-ui git:(master) npm dist-tag ls spon-ui
dev: 0.1.0-12
latest: 0.1.0
При установке spon-ui в проект выполнить его по ситуации
npm i spon-ui@dev
npm i spon-ui@latest
5. пакет npm5-lock.json
Выпуск компонента завершен, и его можно использовать в проекте.Мы обновили с npm3.x до npm5, но обнаружили, что выполнениеnpm iЯвление не согласуется с научно-популярными статьями в Интернете.
Упоминается, что независимо от того, как изменяется файл package.json и многократно выполняется npm i, npm будет загружаться в соответствии с информацией о версии, описанной в файле блокировки.
Также упоминается, что при повторении npm i npm будет игнорировать информацию о блокировке и загружать модуль обновления в соответствии с информацией о версии семантической версии пакета в package.json (блокировка кажется бесполезной).
Согласно информации, с момента выхода npm 5.0 правила npm i менялись трижды.
1. версия npm 5.0.x, как бы ни менялся package.json, npm буду качать по файлу блокировки
GitHub.com/annual-rank/annual-rank/is…Этот выпуск жаловался на эту проблему, очевидно, вручную изменил package.json, почему вы не дали мне пакет обновления! Потом это привело к проблеме 5.1.0...
2. После версии 5.1.0 установка npm будет игнорировать файл блокировки для загрузки последней версии npm.
Потом кто-то поднимал эту темуGitHub.com/annual-rank/annual-rank/is…Жалобы на эту проблему окончательно превратились в правила после версии 5.4.2.
3. После версии 5.4.2GitHub.com/annual-rank/annual-rank/is…
Общий смысл в том, что если package.json изменен, а package.json и файл блокировки разные, то выполнитьnpm iВ это время npm загрузит последний пакет в соответствии с номером версии и семантическим значением в пакете и обновит его до блокировки.
Если оба находятся в одном и том же состоянии, выполнитеnpm iОн будет загружен согласно блокировке, независимо от того, новая ли версия фактического пакета пакета.
Суммировать
Вышеизложенный практический процесс миграции компонентов пользовательского интерфейса из проекта и поддержки их в виде пакетов npm.Несовершенство еще будет проверено временем.Я надеюсь, что часть содержимого может вам помочь.
Цель на 2019 год: исключить английский язык! Я открыл новый публичный аккаунт, чтобы записывать курс программиста, изучающего английский язык
Друзья, которые хотят улучшить свой английский, могут обратить внимание на официальный аккаунт: csenglish программисты изучают английский, тратят 10 минут на сдачу домашних заданий каждый день, учи английский со мной