Vue библиотека с зависимостями vuetify

Question

Мне нужно сделать многоразовый пакетный компонент vue, загрузить его на npm для собственного использования в различных проектах. Для этого я также использую vuetify для стилей. И я строю это с vue -cli-service.

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

Что я хочу, так это узнать, есть ли это любой способ создания vue библиотек с зависимостями vuetify.

Кодовая песочница проекта:

https://codesandbox.io/s/optimistic-glade-j9icu?file= / package. json

Кодовая песочница для тестирования переносимых библиотек

https://codesandbox.io/s/fast-pond-cs6l9?file= / src / plugins / vuetify. js

Репозиторий:

https://github.com/Tauromachian/v-number-stepper.git

Любой информация была бы полезна, я использовал vue -cli-service, так как это кажется более простым, но я готов перейти на накопительный пакет или веб-пакет.

Answer 1

В файле package.json указан один и тот же файл для тегов main и module. Я подозреваю, что проблема здесь в том, что вы используете import на общем модуле. js (CJS). Он работает в одном проекте, потому что вы импортируете файл. vue из components, а не из экспортированного модуля, поэтому вы тестируете что-то совсем другое в одном случае.

module запись необязательна, но существует для того, чтобы вы могли указать общий модуль js (т.е. require() compatible) для точки входа main и модуль ESM (т.е. import) для записи module.

Вы предоставили один и тот же файл для обоих, и общий (cjs) модуль не будет импортироваться через запись module.

Вы не делаете У вас есть вариант ESM в папке dist, но у вас есть файл UMD, который поддерживает оба. Поэтому он должен быть совместим с импортом, что означает, что вы можете указать его для поля module: в файле package.json.

Попробуйте изменить:

  "main": "dist/v-number-stepper.common.js",
  "module": "dist/v-number-stepper.common.js",

до:

  "main": "dist/v-number-stepper.common.js",
  "module": "dist/v-number-stepper.umd.js",

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

Вам нужно будет опубликовать sh и забрать его снова (если только вы сначала не протестировали все это с npm link в lib и npm link v-number-stepper в основном проекте, как я предложил в моем другом ответе).

См. эту страницу для получения информации о пакете. json поля для CJS и ESM, и эта страница для получения информации о CJS и UMD. Также эта страница для информации по npm link, которая сэкономит время, если вы сделаете что-то подобное очень много.

Answer 2

Я написал общедоступный пакет NPM, который расширяет Vuetify ( см. v-stripe-elements в npm). Я также написал подробную серию постов в блоге о том, как сделать это самостоятельно , в том числе о том, как настроить среду разработки, бороться с TypeScript и опубликовать sh. Также доступно:

• демо на Codepen
• источник на GitHub
• Пустой проект шаблон на GitHub

Надеюсь, это положит начало вашему процессу разработки! Я думаю, что один только шаблон проекта должен сэкономить вам немного времени и усилий.

Answer 3

Я не вижу проблемы с внешним пакетом, который имеет зависимость Vuetify, если вы соединяете части вместе, вы не загружаете более одного Vue экземпляра. Это приводит к проблеме в этом Vuetify Issue (ссылается непосредственно на ключевой ответный комментарий, но см. Также вопрос вверху, о котором я спрашивал).

Основной способ избегайте многократного использования, если загружается Vue:

import Vue from 'vue'

с без пути в пакете импорта , без указания c имени файла (например, Common JS или Версии ESM и во избежание конфликтов между Vue средой исполнения, в которой есть компилятор и компилятор без).

Затем, если вы импортируете его просто как 'vue', вы можете определить, какой файл вы получите в конфигурации вашего веб-пакета (как в этом выпуске выше) или аналогичным образом, если вы используете что-то вроде накопительного пакета.

Похоже, это то, как вы загружаете его в оба основных файла. js в вашем коде.

Кроме того, вы на самом деле не спрашивали об этом, но вам не нужно публиковать sh ваша библиотека зависимостей на NPM, если у вас оба репозитория git локальные. Вы можете просто использовать npm link в проекте библиотеки, а затем npm link (name) в основном проекте, и это эффективно добавит библиотеку, как если бы вы только что добавили ее из NPM в обычном режиме. Подробнее см. Документацию команды npm link .

Answer 4

Если вы скопируете весь код вашего package.json в другой проект Vue, который вы можете использовать npm install, CLI автоматически загрузит все ваши зависимости.