Vue.js घटकों की लाइब्रेरी कैसे प्रकाशित करें?

Question

मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जिसमें एक विएक्स मॉड्यूल और एक अमूर्त घटक हैं जो उपयोगकर्ता विस्तार कर सकते हैं।

मैं इसे अपने कोडबेस को साफ करने के लिए एनपीएम पर प्रकाशित करना चाहता हूं और इसे एक ठोस अच्छी तरह से परीक्षण मॉड्यूल के रूप में अपने प्रोजेक्ट से दूर खींचना चाहता हूं। मैं 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 
}; 

इस कार्य के लिए मैं की जरूरत है इसे बेबेल करने के बाद से एक बेबेल कंपाइलर सामान्य रूप से node_modules से आयातित फ़ाइलों को पारदर्शी नहीं करेगा (अगर मैं यहां गलत हूं तो मुझे सुधारें)। इसके अलावा मैं शायद ऐसा करने का अच्छा विचार रखूंगा ताकि इसे विभिन्न प्रणालियों द्वारा उपयोग किया जा सके।

वेबपैक के साथ मुझे केवल उन फ़ाइलों को कैसे ट्रांसफर कर सकता है जिन्हें मुझे चाहिए? क्या मुझे इसके लिए एक अलग कॉन्फ़िगरेशन बनाना है?

इस तरह की कॉन्फ़िगरेशन कैसा दिखता है? मुझे पता है कि vue-cli में एक एकल फ़ाइल घटक के लिए build कमांड है लेकिन यह थोड़ा अलग है।

इस तरह कुछ कैसे पारदर्शी करने के बारे में कोई सुझाव या सुझाव स्वागत है।

संपादित

यह रूप में अच्छी तरह एक अच्छी शुरुआत की तरह लगता है:

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

Webpack उपयोगकर्ताओं को नोटिस के लिए सबसे अधिक आयात बात यह है कि आप UMD में अपनी फ़ाइलें transpile करने की जरूरत है जो कर सकते हैं द्वारा सेट किया गया:

libraryTarget: 'umd' 

यह सुनिश्चित करेगा कि आप के लिए पारदर्शी हो रहे हैं Universal Module Definition, अपने कोड एक सरल स्क्रिप्ट टैग के रूप में, एएमडी, CommonJS की तरह अलग अलग वातावरण में काम करेंगे, आदि

अर्थ इसके अलावा webpack में बाहरी संपत्ति प्रदान करने के लिए आयात यह है कि: यदि आप कर सकते हैं यहाँ

externals: {} 

परिभाषित करें कि कौन से पुस्तकालय आपके प्रोजेक्ट उपयोगकर्ता हैं लेकिन इसे आपके dist फ़ाइल में नहीं बनाया जाना चाहिए। उदाहरण के लिए आप नहीं चाहते हैं कि वू लाइब्रेरी को आपके एनपीएम पैकेज के स्रोत में संकलित/पारदर्शी किया जाए।

मैं थोड़ा और शोध करूंगा, अब तक का सबसे अच्छा विकल्प खुद को कस्टम प्रोजेक्ट बनाने की तरह दिखता है यदि मुझे लचीलापन और इकाई परीक्षण चाहिए।

Webpack डॉक्स

यह भी जो कैसे Webpack के साथ कुछ प्रकाशित करने के बारे में गहराई में चला जाता है एक उपयोगी पृष्ठ है:

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

Answer 1

संभवतः मॉड्यूल बनाने और main को package.json से my_dist/my_index.js में सेट करने का सबसे अच्छा तरीका होगा। अन्यथा आपके मॉड्यूल का उपयोग करने वाली हर परियोजना को इसे include में जोड़ना होगा जो कठिन है।

आप अपने वेबपैक को यूएमडी (यूनिवर्सल मॉड्यूल डेफिनिशन) का पालन करने के लिए भी बनाना चाहते हैं। उसके लिए आपको सेट करना होगा libraryTargetumd रहे हैं:

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

इसके अलावा एक अच्छी बात externals को Vue जोड़ने के लिए इतना है कि आप Vue पुस्तकालय के अतिरिक्त 200kb पैक नहीं किया होगा।

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

और package.json में peerDependencies में जोड़ें:

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

आप कैसे एक vue.js घटक पैक करने के लिए के एक मौजूदा उदाहरण की जरूरत है, तो आप मॉड्यूल मैं बनाए रखने में से एक में एक बार देख ले सकते हैं :

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

विशेष रूप से webpack.config.js और package.json आप के लिए दिलचस्प होगा।

Answer 2

मैं एक ऐसी ही समाधान के लिए खोज रहा था और रोलअप https://github.com/thgh/rollup-plugin-vue2 पाया (लेकिन यह काम करने में सक्षम नहीं था) और यह घटक https://github.com/leftstick/vue-expand-ball जहां सभी घटक कोड एक पुन: प्रयोज्य जेएस-फाइल में संकलित हो जाता है। मुझे पता है कि यह उचित समाधान नहीं है लेकिन शायद यह आपकी आवश्यकताओं के लिए पर्याप्त है।