Как разработать библиотеку компонентов пользовательского интерфейса на основе Vue (1)

Vue.js

режим разработки

предварительная демонстрация

При разработке библиотеки компонентов пользовательского интерфейса вам обязательно нужно предварительно просмотреть демонстрацию при изменении кода.

Распространенным решением является использование как разработка общего проектаwebpack-dev-serverкомпоненты предварительного просмотра, например, черезvue-cliИнициализируйте проект или настройте скрипт самостоятельно.

Можно использовать немного литературы и искусстваparcelдля упрощения конфигурации разработки демо (например,muse-ui).

Показать документы

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

Распространенным решением в отрасли является разработка и отображение документов самостоятельно...

Но это вызовет проблему синхронизации библиотеки компонентов и документа.

Почему бы не использовать vuepress?

благодаря vuepressПоддержка вставки компонентов в уценке, поэтому мы можем разрабатывать компоненты во время написания документации.

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

p.s. В документации по компонентам React можно попробовать эти две библиотеки:

объявление типа

Разве не было бы прекрасно, если бы параметры некоторых объектов и методов можно было грамотно подсказывать в процессе разработки и использования?

Как этого добиться?

По сути, это добавление объявления типа, относящегося к компоненту, в соответствующую папку (*.d.ts), и черезsrc/index.d.tsэкспорт.

{
    "typings": "src/index.d.ts",
}

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

Как упаковать

упаковочный инструмент

Как и в случае с упакованной библиотекой, выбирается накопительный пакет.

компонент одного файла

использовать в разработке*.vueТакой однофайловый компонент разрабатывать?

  • muse-uiвообще не пиши<template>использовать толькоrenderфункция.
  • iview,element,vantиспользовать.vueфайл, но стили пишутся отдельно.
  • ant-design-vueиспользовать.jsxФайлы, стили тоже пишутся отдельно.
  • vuxиспользовать ремень<style>из.vueфайл, но должен использоваться при использованииvux-loader.
  • cube-uiиспользовать ремень<style>из.vueфайл, но есть некоторыенастроить.

По смыслу, не пишите вообще<template>Было немного хлопотно, поэтому добавилrollup-plugin-vueплагин для упаковки.vueдокумент.

Но столкнулся с проблемой: как упаковать<style>стиль в?

  • Сначала попробуй не писать<style>, импортируйте файл scss непосредственно в js. Нет проблем, но писать компоненты не интуитивно понятно, да и код одного и того же компонента разбросан в двух местах
  • Тогда попробуй настроитьrollup-plugin-vue, обнаружена ошибка исходной карты. я упомянулissue.

Способ загрузки

различать сцену

Чтобы различать разные сценарии с использованием разных js, упаковано всего три js (commonJs,es module,umd) и сжатый css (dist/tua-ui.css).

{
    "main": "dist/TuaUI.cjs.js",
    "module": "dist/TuaUI.es.js",
}

Полная нагрузка

Большинство UI-библиотек поддерживают полную загрузку, что так же просто, как положить слона в холодильник (ноvuxПоддерживает только загрузку по требованию):

  1. импорт js
  2. импорт css
  3. Установить плагин
import TuaUI from '@tencent/tua-ui'
import '@tencent/tua-ui/dist/tua-ui.css'

Vue.use(TuaUI)

Из-за отсутствия мышления в зале, cube-ui тоже пишет базовый стиль как Vue-плагин, что приводит к отдельному введению, когда оно вводится по запросуStyle, мммммммм...

import {
  /* eslint-disable no-unused-vars */
  Style, // <-- 不写这行按需引入时就没基础样式
  Button
} from 'cube-ui'

нагрузка по требованию

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

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

tree-shaking

Webpack фактически поддерживается при упаковкеtree-shakingДа, тогда можем ли мы напрямую ссылаться на исходный код для загрузки по требованию?

Обратите внимание, что исходный код должен соответствовать спецификации модуля es (импорт, экспорт).

import { TuaToast } from '@tencent/tua-ui/src/'

Vue.use(TuaToast)

попробуй упаковать, нашелtree-shakingне сработало, все равно запаковал весь код.

sideEffects

На самом деле проблема не в ui библиотекеpackage.jsonзаявление вsideEffectsАтрибуты.

В чистом мире модулей ESM определить, какие файлы имеют побочные эффекты, очень просто. Однако наш проект не может достичь такой чистоты, поэтому на данном этапе необходимо предоставить компилятору веб-пакета подсказки, какой код является «чистой частью». - "документация веб-пакета"

Примечание: раздел стилей имеет побочные эффекты! этого не должно бытьtree-shaking!

Если прямое утверждениеsideEffectsдляfalse, то стили не будут включены при упаковке! Поэтому он должен быть настроен следующим образом:

{
    "sideEffects": [ "*.sass", "*.scss", "*.css" ],
}

стили компонентов vuepress

При написании документов с помощью vuepress он обычно находится вdocs/.vuepress/components/Запишите некоторые глобальные компоненты.

При разработке проблем нет, но найдена яма: стили в компонентах обнаруживаются при упаковке документа<style>Все потеряно.

Угадайте, в чем причина?

Этот горшок из предыдущего разделаsideEffects, см. подробностиissue. Решение находится вsideEffectsРига один"*.vue"Вот и все.

Тестовые данные

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

  • Origin
    • dist/js/chunk-vendors.71ea9e72.js ----- 114.04 kb
  • TuaToast
    • dist/js/chunk-vendors.beb8cff5.js ----- 115.03 kb
    • dist/css/chunk-vendors.97c93b2d.css ----- 0.79 kb
  • TuaIcon
    • dist/js/chunk-vendors.25d8bdbd.js ----- 115.00 kb
    • dist/css/chunk-vendors.eab6517c.css ----- 6.46 kb
  • TuaUI
    • dist/js/chunk-vendors.6e0e6390.js ----- 117.39 kb
    • dist/css/chunk-vendors.7388ba27.css ----- 8.04 kb

Подвести итог:

  • js исходного проекта упакован как114.o4kb
  • добавить толькоTuaToastпост js добавлен0.99kb, css добавлено0.79kb
  • добавить толькоTuaIconпост js добавлен0.96kb, css добавлено6.46kb
  • добавить полныйTuaUIпост js добавлен3.35kb, css добавлено8.04kb

Видно, что загрузка по требованию все еще эффективна~

выше продолжение следует...

использованная литература

Категории