Разработка библиотеки компонентов Vue

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

1. В каждом проекте есть часть общих компонентов, которые нужно либо копировать каждый раз.
2. Сложность поддержки: если есть ошибка или требуется новая функция, все проекты должны быть повторно скопированы.

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

Следуя принципу достаточности, мы отказались от подхода создания на основе Element UI из-за высокой стоимости обучения. Позже мы обнаружили, что способ создания библиотеки компонентов в iview похож на конфигурацию, созданную с помощью vue-cli, поэтому мы использовали его в качестве основы для создания среды разработки;

Идея создания среды

Используя vue-cli в качестве основы, после установки мы модифицируем файл конфигурации; Мы изучили множество методов упаковки компонентов, но они были слишком простыми и не соответствовали способу разработки с использованием vue-cli. Возможно, это было бы сложно понять. Мы изучили некоторые открытые фреймворки и наконец поняли некоторые концепции:

• Среда разработки похожа на ту, которую создаёт vue-cli по умолчанию.
• Отличие заключается в упаковке компонентов, которая должна быть упакована в файлы JavaScript и CSS.
• Содержимое, публикуемое в npm, определяется файлами .npmignore и package.json.

После понимания этих моментов можно приступать к созданию;

Процесс создания см. здесь: https://zq99299.gitbooks.io/vue-note/content/chapter/vu_components_lib/

Информацию о npm см. здесь: https://zq99299.gitbooks.io/gitbook-guide/content/chapter/node_npm.html#если-появляется-команда-недействительна

Первый пример библиотеки компонентов: https://www.npmjs.com/package/tlz-vue-components-lib Поскольку это внутренний проект компании, исходный код не публикуется.

Команды запуска

• dev:examples — запуск в среде разработки.
• build:prodLib — упаковка компонентов в JavaScript.
• build:prodStyl — упаковка стилей в CSS.

Проблема с упаковкой инструментальных классов

В процессе использования я поместил готовые инструментальные классы в папку src/utils. При упаковке компонентов никаких действий над файлами в этой папке не производилось. При использовании в проекте полного стека Vue при упаковке возникает следующая ошибка:

ERROR in static/js/vendor.054b63dba333824e79d5.js from UglifyJs
Unexpected token: name (AxiosHttp) [./~/vue-components-lib/lib/utils/http/AxiosHttp.js:18,0][static/js/vendor.054b63dba333824e79d5.js:13109,6]

Причина ошибки заключается в том, что, возможно, требуется использовать babel для преобразования перед упаковкой. В этой версии я ещё не знаю, как использовать babel. Временное решение: в конфигурации babel проекта vue-cli добавьте каталог этого инструментального класса, чтобы vue-cli мог преобразовать его при упаковке; Если у вас есть идеи, вы можете отправить PR;

  {
         test: /\.js$/,
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'),resolve('node_modules/vue-components-lib/lib/utils')]
       },

История обновлений

0.0.5 — 2017-12-27

В файле build/buildProdLib.js добавлена функция копирования каталога src/utils, позволяющая упаковать некоторые часто используемые инструментальные классы.