2017-07-25 36 views
9

Pracuję nad projektem zawierającym moduł Vuex i abstrakcyjne komponenty, z których użytkownicy mogą korzystać.Jak opublikować bibliotekę komponentów Vue.js?

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

Odpowiedz

8

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.

+0

Dzięki temu wygląda na bardzo dobry początek i prawdopodobnie to, czego szukam. Sprawdzę to dziś wieczorem i dam znać, jeśli odpowie na moje pytanie. –

+0

Po prostu ciekawy, czy utworzyłeś konfigurację webpacka dla tego projektu sam, czy wziąłeś części z innego projektu, który również buduje dla 'umd'? –

+0

Ponadto, w jaki sposób rozwijasz się w tym projekcie? Nie ma żadnego obserwatora ani importu Vue.js. Wygląda na to, że możesz się rozwijać tylko poprzez podpięcie całego projektu do repo, które faktycznie importuje Vue, jak sobie z tym radzisz? Najlepiej byłoby mieć całkowicie niezależny projekt, aby móc przeprowadzać testy jednostkowe, testy e2e itp. –

0

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.

+0

Rollup jest jednak kolejnym narzędziem do pakowania, chciałabym pozostać w systemie eko-paku Webpack, ponieważ to jest to, czego już używam. Wiem, jak przenosić pliki. Potrzebuję tylko sposobu na przeniesienie każdego pliku osobno do ogólnych plików ES5 odpowiednich dla wszystkich systemów modułów. Dziękuję za odpowiedź. –