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

Мотив

Революционное улучшение внутренней структуры TOAST UI Grid побудило меня создать v2 для TOAST UI Calendar. Grid - это библиотека пользовательского интерфейса, которая подчеркивает производительность, поскольку она должна отображать массивные daa, и с введением preact и собственной реактивной системы Grid спровоцировала невероятные инновации. Мне посчастливилось наблюдать за всем процессом со стороны, и, поскольку они были достаточно любезны, чтобы поделиться своими тщательными еженедельными записями, я набрался смелости и начал работать самостоятельно.

Прежде чем мы углубимся в статью, я хотел бы прежде всего выразить благодарность Grid team.

Основное назначение, функции и технологический стек современной библиотеки пользовательского интерфейса

Усовершенствованные библиотеки пользовательского интерфейса, на мой взгляд, подтвержденные сильными сторонами TOAST UI Grid, должны иметь следующие цели и функции.

Назначение библиотеки

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

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

Основные возможности библиотеки

Основные функции библиотеки следующие.

  1. Поддерживает тряску дерева
  2. Оптимизирует процесс рендеринга через виртуальную DOM
  3. Поддерживает рендеринг на стороне сервера

И lodash, и momnet - хорошие библиотеки с отличными функциями. Однако, если вы объединяете все, включая неиспользуемые функции, результирующий размер библиотеки увеличивается, поэтому предоставляются методы оптимизации для уменьшения конечного размера. Встряхивание дерева - один из таких методов, и мы рассмотрим, как мы можем создать библиотеку, поддерживающую встряхивание дерева, чтобы уменьшить результирующий размер веб-страницы.

Стек основных технологий

Все библиотеки, входящие в TOAST UI, объединяются с помощью веб-пакета. Давайте посмотрим, какие еще технологические стеки мы интегрировали. Следующие стеки были недавно введены в TOAST UI Calendar относительно v1.

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

Virtual Dom (preact)
Раньше мы использовали handlebars в качестве механизма шаблонов. Поскольку нам приходилось обновлять всю DOM каждый раз, когда происходит рендеринг, мы решили использовать виртуальную DOM, чтобы свести к минимуму ненужный рендеринг.

Модули ES6
Использование модулей ES6 больше не является прорывом. Однако модули ES6 являются обязательными для выполнения встряхивания дерева, и создание библиотеки пользовательского интерфейса, поддерживающей встряхивание дерева, является еще одной проблемой. Этот конкретный стек будет подробнее рассмотрен в следующем разделе «Причины, лежащие в основе основного технологического стека».

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

sass и postcss
Раньше мы использовали стилус. Однако мы решили использовать sass, чтобы CSS мог быть более структурированным, и postcss, чтобы мы могли назначать уникальные идентификаторы библиотеки классу CSS.

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

Рассуждения, лежащие в основе стека основных технологий

Как я объяснял ранее, я и мои коллеги коллективно решили принять TypeScript. Если вы планируете не использовать TypeScript для создания библиотеки пользовательского интерфейса, способной встряхивать дерево, вы можете добиться того же результата, используя babel, preact и jsx. А теперь давайте разберем аргументы, лежащие в основе принятого нами технологического стека с точки зрения JavaScript.

Поддержка дрожания деревьев

Хотя TOAST UI Calendar поддерживает ежедневные, еженедельные, ежемесячные и другие периодические просмотры, некоторые пользователи предпочитают использовать только определенные типы просмотров. Этим пользователям не нужно включать всю библиотеку только для того, чтобы использовать небольшой набор функций. Если пользователь хочет реализовать функцию ежемесячного просмотра, ему не нужно включать исходный код для еженедельного просмотра. Чтобы уменьшить размер связанной полезной нагрузки JavaScript на стороне пользователя, мы реализуем наш код так, чтобы поддерживалось встряхивание дерева.

Модуль не должен иметь побочных эффектов, чтобы дерево могло трястись.

Чтобы удалить неиспользуемые функции среди функций, экспортированных из модуля, сборщик должен решить, действительно ли функция не использовалась. Например, если экспортированная функция A ссылается на B, библиотека может подумать, что использовалась только A. Однако функция B должна быть включена в комплект. Это то, что известно как побочный эффект, и даже если функция не использовалась декларативно, другие функции могли ссылаться на нее. Сборщик должен учитывать такие случаи, чтобы увидеть, ссылаются ли экспортируемые функции друг на друга или нет. Это сложная проблема, которая может снизить производительность пакета.

Чтобы решить эту проблему, автор библиотеки должен установить флаг, гарантирующий, что библиотека не предназначена для возникновения таких побочных эффектов. Webpack доверяет флагу, а затем игнорирует неиспользуемые модули из пакета. Для этого установите "sideEffects": false в package.json.

После транспиляции библиотека должна использоваться только с чистым JavaScript.

Сначала это может показаться запутанным, но webpack использует несколько инструментов, таких как загрузчики и плагины, при объединении JavaScript. JavaScript, для которого требуется загрузчик, не может быть выполнен непосредственно на виртуальной машине JavaScript, и веб-пакет должен выполнять более мелкие операции, чтобы сделать его работоспособным. Когда библиотека была перекомпилирована и объединена с помощью загрузчика, она, наконец, может работать с чистым JavaScript. Наша библиотека также должна иметь возможность использовать только чистый JavaScript при транспиляции.

Если это так, это означает, что если мы хотим создать модуль ES6, способный встряхивать дерево, мы не можем использовать ничего, что использует веб-пакет.

Это связано с тем, что webpack конвертирует каждый модуль JavaScript в модуль webpack. Даже если вы объединяете с помощью UMD, библиотека преобразуется для использования таких кодов, как __webpack_require__, и все модули собираются в один или несколько файлов пакета. Следовательно, когда пользователь использует библиотеку, это больше не модуль ES6. Если модуль не ES6, он не может быть оптимизирован путем встряхивания дерева. Более того, если все модули собраны в один файл пакета, вероятность побочных эффектов значительно возрастает, поэтому вероятность колебания дерева практически отсутствует.

А что же тогда с Rollup? Rollup - это пакет, который позволяет создавать библиотеки ES6. Rollup не использует собственный метод модуляции, такой как webpack, и поддерживает структуру модуля ES6. Когда библиотека объединяется с помощью объединения, все модули ES6 объединяются в один файл. Однако когда пользователь пытается встряхнуть дерево с помощью webpack, это прерывается из-за побочных эффектов.

Означает ли это, что мы должны отказаться от всех удобных функций загрузчика веб-пакетов? В TOAST UI Calendar v1 в качестве механизма шаблонов используются ручки. Хотя он позволял нам интуитивно писать html, делая его удобным для нас, он также использовал загрузчик веб-пакетов, поэтому нам пришлось искать другое решение. Мы можем использовать только транспайлеры. Решение, которое я нашел, заключалось в использовании preact и jsx, поддерживающих виртуальную модель DOM. Babel и TypeScript преобразуют jsx в h функцию, поэтому, когда вы используете его для транспиляции JavaScript, он производит чистый JavaScript.

Оптимизация рендеринга с помощью виртуальной модели DOM

Хотя preact уже имеет репутацию, он никогда не использовался лабораторией разработки FE, поэтому мы фактически рассматривали возможность использования snabbdom. Однако, как я уже упоминал ранее, preact зарекомендовал себя с Grid, поэтому я чувствовал себя уверенно, используя preact в этом проекте.

Преимущество использования виртуальной модели DOM заключается в том, что она удаляет ненужный рендеринг для оптимизации процесса рендеринга. Другое важное преимущество связано с тряской дерева. С виртуальным DOM мы можем использовать jsx без отдельного механизма шаблонов. Следовательно, нам больше не нужно использовать загрузчик веб-пакетов. jsx можно преобразовать в функцию JavaScript h() через транспилятор, потому что babel и TypeScript поддерживают preact. Кроме того, поскольку нам не нужно использовать загрузчик веб-пакетов, мы можем поддерживать структуру модуля ES6. Кроме того, то, что нам не нужен отдельный шаблонизатор, является еще одним плюсом.

Поддержка рендеринга на стороне сервера

Когда TOAST UI Calendar v1 был впервые разработан, он разрабатывался без учета рендеринга на стороне сервера. Это был часто задаваемый вопрос в сообществе Github, и мне приходилось отвечать на него с сожалением и разочарованием. Мы могли бы реализовать рендеринг на стороне сервера с помощью v1, но поскольку он был построен на реальной DOM, было бы невероятно сложно выполнить его из среды узла.

Однако, поскольку мы выбрали preact, рендеринг на стороне сервера, который в основном преобразует виртуальную модель DOM в строку HTML, оказался несложным.

Настройка среды разработки - шаг за шагом

А теперь перейдем к делу. Вы можете шаг за шагом создавать библиотеку пользовательского интерфейса с функциями и назначением, о которых мы упоминали ранее. Кроме того, вы можете узнать больше о стеке технологий и среде разработки, которые мы фактически используем в FE Development Lab.

Пик на финальном изображении

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

Список файлов единого пакета ES5

  • dist / tui-calendar.js
  • dist / tui-calendar.css
  • dist / tui-calendar.min.js
  • dist / tui-calendar.min.css

Модуль ES6 с возможностью встряхивания дерева будет создан в папке dist/esm, как показано на изображении ниже. (Это прототип v2, и в этой статье мы будем ссылаться только на несколько простых классов).

Теперь давайте рассмотрим список основных технологий и сред разработки и приступим к установке и настройке. В качестве сборщика мы использовали webpack v4.

Основная среда разработки и ее детали

  • Базовая конфигурация
  • Использование инструментов статического анализа
  • 📑 Использование конфигурации генератора документации @ toastui / doc для создания документации по API
  • Конфигурация TypeScript
  • Конфигурация CSS
  • Конфигурация сервера разработки
  • Конфигурация пакета и распространения
  • Использование preact для создания библиотеки пользовательского интерфейса
  • Использование библиотеки для тестирования ее функций

Базовая конфигурация

Создайте корневую папку проекта esm-ui-library и инициализируйте пакет.

mkdir esm-ui-library
cd esm-ui-library
npm init // And Be The Yes Man

Исходная папка должна выглядеть следующим образом.

  • расстояние
  • src
  • изображений
  • дерзость
  • ts

Установите базовый пакет webpack.

npm i --save-dev webpack webpack-cli

Установите TypeScript и его загрузчик.

npm i --save-dev typescript ts-loader

Создайте файл конфигурации веб-пакета. webpack.config.js.

Создайте файл tsconfig.json. Неважно, если вы оставите поле пустым, но если у вас нет файла, произойдет ошибка.

{}

Создайте входной файл src/ts/index.ts.

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

npx webpack --mode development
            Asset     Size  Chunks             Chunk Names
esm-ui-library.js  4.4 KiB    main  [emitted]  main
Entrypoint main = esm-ui-library.js
[./src/ts/index.ts] 66 bytes {main} [built]

Связанные с библиотекой конфигурации

Используйте output из webpack.config.js для настройки параметров, связанных с библиотекой, таких как тип модуля и пространство имен.

Вам не нужно писать модуль libraryExport с помощью commonjs. Однако, если вы экспортируете по умолчанию в модуль ES6, это значение необходимо настроить. Если вы этого не сделаете, вам придется прыгать через тривиальные обручи, как показано ниже.

Перед настройкой

После настройки

const calendar = new tui.Calendar();

Настройка разрешения и псевдонима модуля

Вы можете настроить разрешение модуля, добавив resolve в webpack.config.js. Если вы используете относительный путь при импорте другого модуля, это будет неудобно, потому что вам придется вычислять все относительные пути. Поэтому вы можете добавить псевдоним, чтобы упростить себе задачу.

Перед настройкой

После настройки

Настройка баннера файла пакета

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

Вы можете сделать это, добавив webpack.BannerPlugin в webpack.config.js.

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

пример ›src / ts / month.ts

Использование инструментов статического анализа

Примените eslint, prettier и stylelint, чтобы можно было статически анализировать JavaScript и CSS. Рекомендуется применять статический анализ с самого начала проекта.

Установка eslint

Уместно просто унаследовать четко определенные правила для eslint. Используйте eslint-config-tui.

npm i --save-dev eslint eslint-loader eslint-config-tui eslint-plugin-react

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

npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Установка Prettier

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Установка stylelint

npm i --save-dev stylelint stylelint-config-recommended stylelint-scss stylelint-webpack-plugin

Настроить eslint

Как только файл .eslintrc.js будет заполнен TypeScript, eslint и prettier, задокументируйте следующее.

Поскольку @typescript-eslint/parser был обновлен до версии 2.0, в редакторе часто возникает ошибка, отображающая оператор import как ошибку. Однако это всего лишь ошибка редактора, и он работает нормально. Такая проблема зарегистрирована, и люди ее рассматривают, поэтому давайте обновим ее, когда выйдет новый патч.

Настройка красивее

Заполните свой .prettierrc.js файл следующим образом. Вы можете изменить свои правила, чтобы они лучше соответствовали потребностям вашей команды.
Недавно наша команда из 11 человек провела 30-минутное бурное обсуждение того, следует ли установить printWidth равным 80, 100 или 120. LOL !

Настройка stylelint

Заполните ваш stylelint.config.js файл следующим образом.

Настройка Webpack

Добавлен eslint-loader для статического анализа JavaScript. Если атрибут use имеет тип массива, загрузчик запускается с обратной стороны массива, поэтому примите необходимые меры предосторожности. Если порядок будет обратным, вы закончите статический анализ того, что передал TypeScript.

Настройка кода Visual Studio

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

Затем создайте папку настроек для кода Visual Studio и заполните файл .vscode/settings.json, как показано ниже.

📑 Использование конфигурации генератора документации @ toastui / doc для создания документации по API

Документация по API невероятно важна для любой библиотеки. Разница между первым взглядом на API с хорошо составленной документацией и API без нее огромна.

TOAST UI Doc - это недавно опубликованный генератор документации, который мы пытаемся применить ко всем продуктам TOAST UI. Он анализирует JSDoc для создания документации API и объединяет ее со всеми примерами в единый документ. С помощью нескольких конфигураций вы можете легко создать документацию для любой библиотеки JavaScript. Вы еще больше убедитесь, взглянув на нашу демо.

Установка пакета

npm i -g @toast-ui/doc

Завершение файла конфигурации

Сначала создайте файл tuidoc.config.json.

Поскольку TypeScript еще не поддерживается, вы можете просто создать документацию по API в отношении модулей ES6, созданных в папке dist/esm.
Если вы настроите репозиторий Github, вы сможете увидеть фактический источник напрямую.
Поскольку Ниже приведен лишь пример, вы можете настроить изображение и текст в соответствии со своими потребностями.

Добавление JSDoc

Добавьте JSDoc следующим образом.

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

Если вы добавите скрипт в package.json и запустите его, документация будет создана в папке _latest.

Конфигурация TypeScript

Поскольку мы уже установили пакет TypeScript ранее, давайте завершим файл конфигурации TypeScript. Создайте два разных файла конфигурации. Один будет перенесен с ES5 и создаст единый файл пакета. Другой будет транслироваться с помощью ES6 и создаст модуль ES6, способный сотрясать дерево.

Единый файл пакета ES5

Поскольку мы уже добавили ts-loader, настройка нашего веб-пакета уже завершена. Затем заполните файл конфигурации TypeScript следующим образом.

tsconfig.json для ES5

Хотя мы добавили псевдоним в конфигурацию веб-пакета, Visual Studio Code покажет ошибку, говорящую, что он не может найти модуль. Однако вы можете исправить ошибку, добавив файл конфигурации TypeScript и установив псевдоним baseUrl и paths.

Добавление файла входа в библиотеку - package.json
Задайте точкой входа библиотеки файл отдельного пакета ES5. Это будет свойство main package.json.

{
  "main": "dist/esm-ui-library.js"
}

Модуль ES6 (возможность встряхивания дерева)

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

Добавьте еще один файл конфигурации TypeScript для преобразования TypeScript в модуль ES6.

tsconfig.esm.json для ES6

Вот различия между файлом выше и файлом для ES5.

  • Изменение: "target": "es6"
  • Добавить: "moduleResolution": "node", добавить, если пользователь библиотеки разрабатывает в среде узла или код выполняется в узле.
  • Добавить: "outDir": "dist/esm/", добавить, чтобы настроить путь назначения для модуля ES6
  • Удалить: sourceMap, в этом нет необходимости, так как модуль ES6 не нужно связывать

Настройка пути к модулю для ES6 - package.json

{
  "module": "dist/esm/",
  "sideEffects": false
}
  • Свойство module: настраивает путь поиска, если используется как модуль ES6.
  • Свойство sideEffects: Возможно, встряхивание дерева не может удалить все ненужные модули из-за побочных эффектов. Этот флаг гарантирует, что эта библиотека не подвержена побочным эффектам. За этот флаг отвечает автор библиотеки, и он может выполняться декларативно, когда веб-пакет выполняет встряхивание дерева.

Изменение псевдонима на относительный путь для модулей ES6

Даже после переноса TypeScript псевдоним типа @src все еще существует.

Если пользователь библиотеки импортирует модули ES6, @src не может быть прочитан, поэтому он выдаст ошибку, сообщающую, что модуль не может быть найден. Следовательно, псевдоним должен быть преобразован обратно в относительные пути. Для этого вы можете добавить ttypescript - Transform Typescript и typescript-transform-paths plugin.

npm i --save-dev ttypescript typescript-transform-paths

Добавьте в плагин модуль tsconfig.esm.json для ES6.

Перед настройкой

После настройки

Настройка CSS

Поскольку v1 использует стилус для транспиляции CSS, мы использовали стилус-загрузчик. Ранее я упоминал, что для поддержки встряхивания дерева JavaScript мы не можем использовать какие-либо загрузчики веб-пакетов. Однако для CSS это другой сценарий. С CSS можно использовать любые загрузчики и инструменты, потому что CSS можно просто добавить в окончательный пакет HTML.

npm i --save-dev css-loader style-loader mini-css-extract-plugin

Импорт CSS

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

webpack.config.js

Использование SCSS

В то время как стилус - невероятный инструмент, разработчики TOAST UI Calendar больше привыкли к дерзости. Также сыграло свою роль более высокая позиция на рынке.

Установите sass и sass-loader.

npm i --save-dev node-sass sass-loader

Регистрация уникальных префиксов библиотеки в селекторах классов

Для CSS календаря TOAST UI Calendar мы используем префикс tui-full-calendar- для написания наших селекторов классов. Мы назначаем уникальные идентификаторы, чтобы исключить дублирование селекторов. Для v1 мы использовали preprocess-loader и заменили строки кода стилуса в процессе сборки.

Часть {css-prefix} из файла стилуса будет заменена на tui-full-calendar-.

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

Установите postcss-loader и postcss-prefixer.

npm i --save-dev postcss-loader postcss-prefixer

Теперь CSS выглядит намного аккуратнее.

Если вы посмотрите на измененные результаты с помощью postcss, все они будут предварены следующим образом.

Объединение изображений для использования с CSS

Используйте url-loader, чтобы включить в комплект изображения, которые будут использоваться с CSS в base64.

npm i --save-dev url-loader

Настройка Webpack для объединения CSS

Добавьте конфигурации CSS в файл конфигурации веб-пакета module.rules.

Конфигурация сервера разработки

Установите webpack-dev-server и используйте html-webpack-plugin, чтобы убедиться, что страница загружается.

npm i --save-dev webpack-dev-server html-webpack-plugin

Добавьте html-webpack-plugin в файл webpack.config.js и в конфигурации сервера разработки. Здесь нужно остерегаться того, что вам нужно добавить расширение '.js' к resolve.extensions. Если вы не добавите '.js', ни один из модулей js, прочитанных webpack-dev-server, не будет выполнен; поэтому сервер не будет работать.

Хотя на экране ничего не отображается, если вы запустите его, вы увидите, что JavaScript и CSS загрузились хорошо.

npx webpack-dev-server --mode development

Конфигурация пакета и распространения

Теперь пора проверить, были ли успешно созданы файл пакета ES5 и файлы модуля ES6.

Добавьте сценарий npm, который запускает пакеты разных типов и запускает сервер. Сценарий ("doc"), использующий @ toastui / doc, был изменен для создания модуля ES6 и последующего создания документации по API.

Создание файла единого пакета ES5

Сборка для версий для разработки и производства. Вы должны увидеть файлы в папке dist.

npm run build:dev
npm run build:prod

Создание модуля ES6

Файл создан в папке dist/esm.

npm run build:esm

Как должен выглядеть созданный файл

Выбор файла для публикации в npm

Вам не нужно публиковать в npm какие-либо ненужные файлы, поэтому выбирайте только то, что вам нужно.

package.json

Использование preact для создания библиотеки пользовательского интерфейса

Сначала установите preact и preact-render-to-string для рендеринга на стороне сервера.

npm i --save preact preact-render-to-string

Во-первых, просто создайте входной файл и класс, отображающий месяц и неделю. renderToString - это функция, которая преобразует компоненты preact в строки HTML.

index.ts

base.ts

month.tsx

week.tsx

Использование библиотеки для тестирования ее функций

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

  • Tree Shaking Test - проверка того, уменьшается ли размер из-за объединения только необходимых модулей
  • Тест рендеринга на стороне сервера - тестирование генерации строки HTML

Тестовый код

Следующий тестовый код импортирует модули недели и месяца для визуализации и отображает месяц на стороне сервера для создания строк HTML.

На экране

После запуска тестов вы должны увидеть неделю, месяц и HTML-код, который является результатом отрисовки месяца на стороне сервера.

Тест на встряхивание дерева

Размер файла пакета составляет 12,8 КБ, и вы можете видеть, что файл пакета включает модуль month.tsx, а также week.tsx.

      Asset       Size  Chunks             Chunk Names
 index.html  551 bytes          [emitted]
    main.js   12.8 KiB       0  [emitted]  main
main.js.map   49.8 KiB       0  [emitted]  main

Давайте удалим месяц из источника и снова попробуем объединить. Встряхивание дерева должно вмешаться, чтобы удалить модули месяца.

Размер пакета был уменьшен до 12,6 КБ, и вы должны увидеть, что файл month.tsx был удален из пакета.

      Asset       Size  Chunks             Chunk Names
 index.html  551 bytes          [emitted]
    main.js   12.6 KiB       0  [emitted]  main
main.js.map   49.4 KiB       0  [emitted]  main

Заключительные замечания

На любом языке невероятно важно удалить ненужный источник для уменьшения конечного размера файла. Это связано с тем, что увеличение размера файла неизбежно приводит к увеличению стоимости. Что касается библиотеки пользовательского интерфейса JavaScript, чем больше функций в библиотеке, тем больше становится размер. Однако пользователи могут захотеть использовать только определенный набор функций, которые предоставляет библиотека. Следовательно, не приведет ли метод оптимизации для Интернета к улучшению библиотеки пользовательского интерфейса? Хотя я выбрал метод встряхивания дерева, их гораздо больше.

Календарь TOAST UI стал любимым с тех пор, как мы открыли исходный код хорошо написанной версии v1. Он получил более 7 тысяч звезд на Github, и я искренне рад, что он стал любимым openource. Процесс планирования TOAST UI Calendar v2, выбор технологического стека и управление возможностями были интригующими задачами. Пришло время сделать еще один шаг. Я искренне надеюсь, что эта статья может помочь другим людям. Полный исходный код можно найти здесь.

Если у вас есть функция, которую вы хотите реализовать в TOAST UI Calendar v2, не стесняйтесь оставлять ее в Github issues. Давай сохраним импульс!