Создавая новую дизайн-систему, я импортировал устаревший код jQuery и изучил процесс создания перспективной кодовой базы с помощью TypeScript и Rollup.js.

Я строю дизайн-системы для своих клиентов. Один из недавних проектов заключался в том, чтобы взять пару статических файлов CSS и JS и преобразовать их в гибкую, хорошо документированную систему, состоящую из множества отдельных компонентов.

Зачем создавать дизайн-систему?

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

Первая задача в проекте по адаптации существующего сайта — получить контроль над CSS. Вы слышали о таблицах стилей «только для добавления»? Это таблица стилей, которую все боятся менять, потому что не знают, что они сломают, удалив ее. Поэтому люди просто добавляют новые селекторы в конец вместо того, чтобы рефакторить или изменять что-то выше.

Итак, теперь вместо 1000 строк CSS в одном файле у меня есть 20 различных файлов SCSS, которые объединяются с миксинами и включениями, а затем компилируются в один файл CSS, который затем можно безопасно минимизировать для производства. CSS, который не управляется с помощью инструмента сборки, — это тупик в обслуживании. Я часто использую SCSS через node-sass , но вы также можете использовать PostCSS для своего инструмента сборки, он поддерживает импорт через плагины, а переменные CSS являются опцией в зависимости от требований совместимости вашего браузера.

Разбивка вашего CSS на множество различных небольших файлов SCSS, каждый из которых содержит всего 50 строк связанного кода, является разумным решением для удобства сопровождения. После того, как вы это сделаете, можно отменить и заменить элементы пользовательского интерфейса, которые больше не используются, простым добавлением и удалением компонентов в файле main.scss.

CSS, который не управляется с помощью инструмента сборки, — это тупик в обслуживании.

Теперь, когда дело доходит до JavaScript, все может стать сложнее. Когда вы имеете дело с большой базой устаревшего кода, вы сталкиваетесь с некоторыми из тех же проблем со старыми файлами JS, которые полны кода, к которому люди боятся прикасаться. Начинка с jQuery просто работает, и ее не стоит полностью переписывать. Но мы можем улучшить нашу кодовую базу javascript точно так же, как мы сделали кодовую базу CSS. Вы можете взять один или несколько больших JS-файлов, содержащих множество различных виджетов и элементов взаимодействия с пользовательским интерфейсом, и разделить их на несколько файлов. Я помещаю новый файл в тот же каталог компонентов, который содержит файл .scss и шаблон html для документации.

Я твердо верю в преимущества TypeScript. Добавление ввода поверх вашего кода только улучшит ситуацию. Компилятор TypeScript обнаружит ошибки, о которых вы не подозревали. Вставка старого фрагмента кода jQuery в файл .ts покажет вам много интересного. Особенно, если вы также настроили TSLint в проекте. VS Code отлично справляется с запуском TSLint в ваших проектах. Вот мой файл TSLint.config для самоуверенной, но все же щадящей настройки. Вместо того, чтобы болтать об этих вещах во время проверки кода, просто согласитесь с этим файлом один раз и вперед.

А как насчет самой конфигурации TypeScript? Здесь нужно принять несколько решений. Один важный вопрос: к какой цели совместимости вы стремитесь? В этом проекте нам нужно было поддерживать IE 11. Это означает ES5, а не ES6. Поэтому, когда мы пишем код, который использует определенную функцию из более новой версии, например промисы, нам нужно иметь дело с полифиллами. TypeScript сделает за вас немного полифиллинга, но не так много, как Babel. Вы должны убедиться, что ваши настройки target и lib верны. Target предназначена для версии, в которую вы хотите скомпилировать, lib предназначена для библиотек, которые будут доступны в области, которую вы выполняете. Вариант с типами предназначен для того, чтобы сделать определения jQuery доступными глобально для всего кода TS, потому что мы включаем jQuery на страницу из CDN, а не связываем его.

Чтобы скомпилировать машинописный код, вы можете установить его глобально или создать скрипт NPM, который запускает tsc -p ./ в корне вашего проекта.

В приведенном выше файле мы используем модули «esnext», чтобы мы могли писать современный код с современным импортом. Целью является «es5», и мы включаем библиотеку «es5». Поскольку мы используем промисы, нам нужно включить полифил промисов в наш реальный код…

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

Посетите https://polyfill.io/, чтобы узнать, как легко добавить полифиллы на свой веб-сайт без их объединения.

Настройка накопительного пакета

В этом сценарии мне нужно, чтобы Rollup.js делал 3 разные вещи:

  • Выведите один файл пакета JS, ориентированный на браузер, для включения на домашнюю страницу, содержащую все наиболее важные виджеты пользовательского интерфейса. Поддержка рабочего браузера означает установку выходного формата iife, а также запуск кода через минификатор (предполагается, что terser работает быстрее, чем UglifyJS) для производства.
  • Выведите современный файл модуля ES для прямой совместимости.
  • Вывод отдельных JS-файлов, готовых к производству, для каждого компонента отдельно.

Вот конфиг, который делает все это за меня.

Этот код сканирует каталог src моего компонента на наличие любого файла .ts и создает конфигурацию, которая выводит один минимизированный файл javascript только для этого одного компонента пользовательского интерфейса. Эти файлы могут быть включены в производственный сайт по мере необходимости, но не всегда будут включены в основной пакет из-за размера и производительности.

Чтобы сгенерировать этот основной пакет, он просматривает файл «main.ts» с определенной точкой входа и помещает все это во IIFE и включает все необходимые модули, выполняя встряхивание дерева по пути, чтобы уменьшить размер пакета.

Используйте накопительный пакет, установив его глобально или в зависимостях проекта, а затем запустив rollup -c из корня каталога вашего проекта. Опять создаю для этого NPM-скрипт: "scripts": { "js:build": "rollup -c" }, — и альт.

Я также изменяю настройки своего рабочего пространства VS Code, чтобы включить панель ярлыков сценариев NPM на боковой панели. Это упрощает использование этих скриптов для людей, которым неудобно работать в командной строке.

Рефакторинг устаревшего кода

Если вы хотите выполнить самый базовый уровень рефакторинга, просто переименуйте файл .js в файл .ts, устраните ошибки и предупреждения, а затем в файл main.ts включите код, используя Импорт для побочных эффектов.

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

Затем в файле main.ts вы можете импортировать эту функцию и явно вызывать ее там, где хотите.

Если вам нужно использовать виджеты jQuery-ui в современных модулях ES, вот краткий пример включения части библиотеки в ваш пакет.

После того, как вы закончите работу по созданию этой системы, будет намного проще начать заменять компоненты новым кодом javascript, по одному компоненту за раз. Может быть, вы начнете писать новые блестящие веб-компоненты для будущего. Или, возможно, вы хотите начать создавать компоненты пользовательского интерфейса в React или Vue или FRETS. У вас уже будет большая часть инфраструктуры для замены старого кода новым кодом по частям — и преимущества TypesScript можно сразу применить к вашему устаревшему коду.

Надеюсь, это дало вам несколько идей о том, как начать рефакторинг старого javascript в новую поддерживаемую систему проектирования компонентов пользовательского интерфейса. Если вы хотите нанять кого-то, кто сделает это за вас, обратитесь по адресу [email protected].