Как упаковать компоненты SDK, которые не устарели

React.js
Как упаковать компоненты SDK, которые не устарели

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

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

Итак, босс нашел вас, я надеюсь, вы упаковали событие.SDKКомпоненты для нескольких бизнес-доступа компании.

Вы пробормотали в душе: "Я обычно пишу много компонентов, и еще я писал публичные компоненты. Активный компонент ощущается как публичный компонент с бизнес-логикой. Это не должно быть сложно, правда?"

Но ты не имеешь ни малейшего понятия в своем сердце, ты боишься компонентов, которые инкапсулируешьSDKЕсли связанной деловой стороне это не нравится, они попросят самую старшую (наименее выданную) интерфейсную старую карту компании.

Быть объясненным, старая карта глубоко кричала хризантема 枸 чай в изоляционной чашке.

"Этот компонент пакетаSDKДверной проем разделен на компонентный дизайн, разработку, доступ и онлайн, пожалуйста, приходите ко мне по одному».

дизайн компонентов

Хороший дизайн компонента требуетЧеткие обязанности. На этапе проектирования необходимо четко определить обязанности с тремя ролями:

Четкие обязанности с сервером, предоставляющим данные

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

Например: пригласите новых пользователей, чтобы получить вознаграждение в размере xxx юаней.

xxxпеременная, обычно как поле.

ТакПриглашайте новых пользователей, чтобы получить вознаграждениеЧто с этим текстом? Во время мероприятия можноPMЯ обнаружил, что этот текст не работает, и хотел изменить его.

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

Итак, если оценка, вероятно, будет пересмотрена, лучшим способом может быть распространение этой копии в аналогичной структуре:

data: {
  title: "邀请新用户得{{bonus}}元奖励",
  params: {
    bonus: 123
  }
}

Уточнение обязанностей со сторонами доступа к бизнесу

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

Эти возможности делятся на две категории:

  • Методы, предоставляемые деловой стороной во время выполнения

  • Возможности, предоставляемые библиотеками, на которые полагаются бизнес-стороны

вметод выполненияможно использовать какpropsперейти кSDKКомпоненты, такие как метод входа.

возможности библиотеки,SDKЕго необходимо определить какpeerDependencies,НапримерReact,ReactDOM.

ReactНеобходимо определить стек технологийSDKв использованииReactВерсия и бизнесReactверсия должна быть одновременноv16.14до или после, в случаеJSXкомпилируется в другой результат (_jsx.createElementа такжеReact.createElement)

а такжеPMЗавершите процесс активности

Этот шаг и друзья, порвавшие изделие, знают об этом.

разработка компонента

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

На этом этапе следует отметить две вещи:

Подсказка идеального типа

использоватьtsНаписание компонентов и экспорт файлов объявлений типов могут значительно стандартизировать доступ бизнес-партнеров и снизить стоимость связи доступа.

граница ошибки

еслиSDKКомпонент выдает ошибку, вызывая сбой доступной страницы, правильноp0сортbug.

Итак, обязательноSDKошибкаcatchвнутри компонента.

дляReactкомпоненты, сErrorBoundaryОбертывание необходимо.

доступ к бизнесу

SDKКомпонент окончательно разработан и выпущен в компаниюnpmПлатформа.

Деловая вечеринка будетSDKкnpmПредставлен в виде пакета.

На этом этапе необходимо рассмотреть следующие вопросы:

Какая спецификация модуля используется стороной доступа к службе для импорта (ESMещеCJS)?

Если сторона доступаSSRВ виде компонентов доступа на стороне сервера возможно использованиеCJSТехнические характеристики.

CSRобычно используется вESM.

такSDKКомпоненты должны выводиться при упаковке и компиляцииESM,CJSДва конкретных файла.

Если сESMЭкспорт, необходимо учитывать деловую сторонуtreeShakingпотребности

еслиSDKБудет экспортировано несколько компонентов (например, один и тот же активный компонент выводит разные версии для разных бизнесов):

// index.tsx
export { default as Base } from './components/Base';
export { default as SDKForA } from './components/SDKForA';
export { default as SDKForB } from './components/SDKForB';
export { default as SDKForC } from './components/SDKForC';

необходимо учитывать деловую сторонуtreeShakingнужно.

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

// 业务方代码
import SDKForA from 'SDK/dist/modern/components/SDKForA';

вSDKЭкспортировано для активного компонентаnpmМешок.

distКаталог для упаковки скомпилированного продукта.

modernдляESMКанонический путь упаковки, если вы хотите импортироватьCJSпакет, который может бытьmodernизменить наnode.

SDKForAДля компонентов, которые будут представлены.

Если деловая сторона используетbabel-plugin-import, вышеизложенное можно заменить следующим:

// 业务方代码
import { SDKForA } from 'SDK';

КромеjsПомимо документов, но также учитывать деловую сторонуcssТребуется компиляция файла.

Поэтому файл стиля компонента лучше всего отделить от компонента, например, по следующему пути:

- components
  - SDKForA
    - index.tsx
    - style.less

вindex.tsxвведен вstyle.less

изменить на:

- components
  - SDKForA
    - index.tsx
- styles
  - SDKForA
    - style.less
    - style.css

index.tsx

стиль вывода.cssа также.lessДва формата, когда деловая сторона должна дополнительно компилировать стиль, его можно ввести.less, в противном случае напрямую импортировать.css.

Когда бизнес-сторона получает доступ, она может получить доступ следующим образом:

// 业务方代码
import SDKForA from 'SDK/dist/modern/components/SDKForA';
import 'SDK/dist/modern/styles/SDKForA/style.less';

онлайн

После освобождения он на передовой? НЕТ!

В сети происходят интересные вещи

По мере увеличения числа пользователей различныеbugВероятность также увеличилась, в основном в том числе:

  • Исключение интерфейса

  • Не удалось загрузить статический ресурс

  • Ошибки, вызванные различными странными хост-средами

  • Исключения для критических активных процессов

Это требует онлайн-мониторинга и раннего предупреждения.

Если деловая сторона представляетsentry,ДеятельностьSDKможет быть вышеcaseВстроить точки и установить соответствующие платы мониторинга.

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

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

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

Точка захоронения бизнеса даст вам знать.

Суммировать

Чтобы инкапсулировать не жаловаться наSDKкомпонент, необходимо сделать следующее:

  • Уточнить обязанности компонентов и знатьSDKКакие возможности могут быть получены в хост-среде

  • идеальноtsДекларация и границы ошибок

  • Гибкие экспортные продукты, чтобы бизнес мог легко получить доступ

  • Мониторинг бизнеса и кода после выхода в интернет

Сказав это, Лао Ка сделал еще один глоток чая из хризантемы и годжи из термоса, только чтобы узнать:

Чай уже остыл.

Категории