Jak opublikować bibliotekę komponentów Vue.js?

Question

Pracuję nad projektem zawierającym moduł Vuex i abstrakcyjne komponenty, z których użytkownicy mogą korzystać.

Chciałbym opublikować to na NPM, aby oczyścić moją bazę kodową i odciągnąć to od mojego projektu jako solidny sprawdzony moduł. Mam określony plik główny w package.json załadować indeks, który importuje wszystko chcę wystawiać:

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

Indeks zawiera to w tej chwili:

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

module.exports = { 
    AbstractFilter, 
    Search 
}; 

Aby to działało muszę aby to przenieść, ponieważ kompilator babel zwykle nie przenosi plików zaimportowanych z node_modules (Popraw mnie, jeśli się mylę tutaj). Poza tym prawdopodobnie byłby to dobry pomysł, aby mógł być używany przez różne systemy.

Jak mogę przenieść tylko te pliki, których potrzebuję, mimo że korzystam z pakietu Web Pack? Czy muszę utworzyć osobną konfigurację dla tego?

Jak wygląda taka konfiguracja? Wiem, że vue-cli ma komendę build dla jednego pojedynczego komponentu pliku, ale jest to trochę inne.

Wszelkie wskazówki i sugestie dotyczące przeniesienia czegoś takiego są mile widziane.

Edit

Wydaje się to dobry początek, a także:

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

Najbardziej import rzeczą dla użytkowników WebPACK zauważyć jest to, że trzeba transpile plików w UMD, które mogą ustawiane przez:

libraryTarget: 'umd' 

To sprawi, że twoje transporty będą Universal Module Definition, co oznacza kod będzie pracować w różnych środowiskach, takich jak AMD, CommonJS, jako prosty tagu script, itp

Poza tym, że jest import do zapewnienia externals w WebPacka:

externals: {} 

Tutaj można określ, które biblioteki są Twoimi użytkownikami projektu, ale nie powinny być wbudowane w Twój plik dist. Na przykład nie chcesz, aby biblioteka Vue została skompilowana/przeniesiona do źródła twojego pakietu NPM.

Będę badać nieco więcej, jak dotąd najlepsze opcje wyglądają jak samemu stworzyć własny projekt Jeśli chcę elastyczności i testów jednostkowych.

WebPACK docs

Jest to również przydatna strona, która idzie w głąb, jak opublikować coś z Webpack:

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

Answer 1

Najlepszym sposobem będzie prawdopodobnie zbudowanie modułu i ustawienie main w swoim package.json na my_dist/my_index.js. W przeciwnym razie każdy projekt, który użyje twojego modułu, będzie musiał dodać go do include, co jest żmudne.

Będziesz także chciał, aby Twoja kompilacja pakietu sieciowego działała zgodnie z UMD (Definicja modułu uniwersalnego). W tym celu należy ustawić libraryTarget do umd:

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

Również dobrze będzie dodać Vue do externals tak, że nie pakować dodatkowy conajmniej 200kb biblioteki Vue.

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

i dodać go do peerDependencies w package.json:

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

Jeśli potrzebujesz istniejący przykład jak zapakować składnik vue.js, można zapoznać się w jednym z modułów utrzymuję :

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

Szczególnie webpack.config.js i package.json będzie dla Ciebie interesujący.

Answer 2

szukałem podobnego rozwiązania i znaleźć pakiet zbiorczy https://github.com/thgh/rollup-plugin-vue2 (ale nie był w stanie sprawić, żeby działało) i ten komponent https://github.com/leftstick/vue-expand-ball gdzie cały kod komponentu zostanie skompilowany do jednego pliku js wielokrotnego użytku. Wiem, że to nie jest właściwe rozwiązanie, ale może jest wystarczające dla twoich potrzeb.