Как опубликовать библиотеку Vue.компоненты js?

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

Я хотел бы опубликовать это на NPM, чтобы очистить мою кодовую базу и вытащить ее из моего проекта как твердый хорошо протестированный модуль. Я указал основной файл package.json загрузить индекс, который импортирует все, что я хочу разоблачить:

https://github.com/stephan-v/vue-search-filters/

индекс содержит на момент:

import AbstractFilter from './src/components/filters/abstract/AbstractFilter.vue';
import Search from './src/store/modules/search';

module.exports = {
    AbstractFilter,
    Search
};

для этого мне нужно транспилировать это, так как компилятор babel обычно не будет транспилировать файлы, импортированные из node_modules (исправьте меня, если я ошибаюсь здесь). Кроме того, я, вероятно, был бы хорошей идеей сделать это, чтобы его можно было использовать в разных системах.

как транспилировать только файлы, которые мне нужны, хотя с Webpack? Нужно ли для этого создавать отдельную конфигурацию?

как выглядит такая конфигурация? Я знаю, что у vue-cli есть а build команда для одного компонента файла, но это немного отличается.

любые советы или предложения о том, как транспилировать что-то подобное, приветствуются.

редактировать

это кажется хорошим началом:

https://github.com/Akryum/vue-share-components

самое важное для пользователей Webpack - это то, что вам нужно транспилировать файлы в UMD, которые можно установить by:

libraryTarget: 'umd'

это будет убедитесь, что ваш transpiling для Universal Module Definition, что означает, что ваш код будет работать в разных средах,таких как AMD, CommonJS, как простой тег скрипта и т. д.

кроме того, что это импорт, чтобы предоставить свойство externals в webpack:

externals: {}

здесь вы можете определить, какие библиотеки ваших пользователей проекта, но не должны быть встроены в ваш . Например, вы не хотите, чтобы библиотека Vue компилировалась / транспилировалась в источник ваш пакет NPM.

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

Webpack документы

это также полезная страница, которая подробно рассказывает о том, как опубликовать что-то с помощью Webpack:

https://webpack.js.org/guides/author-libraries/#add-librarytarget

10
ecmascript-6 javascript node.js vue.js webpack

2 ответов

лучший способ, вероятно, будет построить модуль и установить main в своем package.json до my_dist/my_index.js. В противном случае каждый проект, который будет использовать ваш модуль, должен будет добавить его в include что довольно утомительно.

вы также хотите, чтобы ваша сборка webpack следовала UMD (универсальное определение модуля). Для этого вы должны установить libraryTarget to umd:

...
output: {
  filename: 'index.js',
  library:'my_lib_name',
  libraryTarget: 'umd'
},
...

также хорошо будет добавить Vue to externals так что вы не упаковали дополнительные 200kb vue библиотека.

externals: {
  vue: 'vue'
},
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

и добавьте его в peerDependencies на package.json:

...
"peerDependencies": {
  "vue": "^2.0.0"
},
"devDependencies": {
  "vue": "^2.0.0"
}
...

Если вам нужен существующий пример того, как упаковать vue.компонент js, вы можете посмотреть в одном из модулей, которые я поддерживаю:

https://github.com/euvl/vue-js-popover

особенно webpack.config.js и package.json будет интересно для вас.

12

Я искал аналогичное решение и нашел rollup https://github.com/thgh/rollup-plugin-vue2 (но не смог заставить его работать) и этот компонент https://github.com/leftstick/vue-expand-ball где весь код компонента компилируется в один повторно используемый js-файл. Я знаю, что это не правильное решение, но может быть достаточно для ваших нужд.

0