Rollup-plugin-typescript2: फ़ाइल आयात देखें

क्या आप अपना tsconfig और रोलअप कॉन्फ़िगरेशन पोस्ट कर सकते हैं?

या प्रजनन के साथ एक छोटा रेपो :)

दुर्भाग्य से मेरे पास "छोटा" रेपो नहीं है। मैं यहां काम कर रहा हूं, webpack से rollup पर माइग्रेट करने का प्रयास कर रहा हूं।

में आयात rollup.config.js करने के लिए बदला जा सकता है rollup-plugin-typescript2 अंतर देखने के लिए।

नमस्ते।

सबसे पहले इस प्लगइन पर काम करने के लिए आपका बहुत-बहुत धन्यवाद। यह वास्तव में rollup-plugin-typescript से कहीं अधिक समझ में आता है।

मैं पुष्टि कर सकता हूं कि यह समस्या मौजूद है और एक छोटा डेमो भंडार स्थापित करें:
https://github.com/danimoh/rollup-plugin-typescript2-vue-demo

यदि आप लाइन import AnotherComponent from './AnotherComponent.vue'; कमेंट करते हैं तो यह संकलन करता है, लेकिन दुर्भाग्य से इस लाइन के सक्षम होने के साथ नहीं।

यह मज़ेदार है कि हमने लगभग उसी समय इस समस्या का सामना किया। शायद यह हाल के एक बदलाव के कारण हुआ था?
रोलअप, रोलअप प्लगइन्स और टाइपस्क्रिप्ट के बारे में बहुत सीमित ज्ञान के साथ मेरी ओर से एक अनुमान होगा:
क्या यह संभव है कि टाइपप्रति स्वयं रोलअप के बजाय AnotherComponent आयात करने का प्रयास कर रहा हो या rollup-plugin-vue उस आयात को पहले संभाल रहा हो?

यह समझाएगा कि क्यों rollup-plugin-typescript में यह समस्या नहीं है क्योंकि यह प्रति फ़ाइल आधार पर transpileModule साथ संकलित करता है।

इस मामले में, निम्नलिखित दिलचस्प हो सकते हैं: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#customizing -module-resolution

इस मुद्दे पर किसी भी काम की बहुत सराहना की जाती है।

दोनों रेपो पर पुन: प्रस्तुत, सुनिश्चित नहीं है कि यह एक ही समस्या है, लेकिन यह संभावना है।

दूसरे मामले को ठीक करने के लिए हमें वास्तव में मॉड्यूल रिज़ॉल्यूशन को रोलअप पर वापस भेजने की आवश्यकता है ताकि vue प्लगइन यह काम कर सके।

रोलअप के मॉड्यूल रिज़ॉल्यूशन और टाइपस्क्रिप्ट को जोड़ने में समस्या यह है कि बाद के संस्करणों में रोलअप context.resolveId(...) से एक वादा लौटाता है। तो कॉल चेन इस तरह दिखती है:

• रोलअप कॉल प्लगइन का रूपांतरण
• प्लगइन कॉल टाइपप्रति के LanguageService.getEmitOutput
• भाषा सेवा LanguageHost.resolveModuleNames प्लगइन के कार्यान्वयन को कॉल करती है और उम्मीद करती है कि हल किए गए पथ उस फ़ंक्शन में वापस आ जाएंगे
• होस्ट कॉल रोलअप का PluginContext.resolveId
• रोलअप एक वादा लौटाता है
• अगर मैं सही ढंग से समझूं, तो मैं केवल एक वादे के साथ एक और वादा कर सकता हूं

LanguageService सख्ती से समकालिक प्रतीत होता है: https://github.com/Microsoft/TypeScript/issues/1857

Plugin.transform स्वयं एक वादा वापस कर सकता है, लेकिन एक पर्यवेक्षक वस्तु पर कॉलबैक के अंदर गहरे किए गए कई वादों का पीछा करने की यांत्रिकी इस समय मुझे दूर करती है।

कुछ हद तक संबंधित: https://github.com/rollup/rollup/issues/2631

हैलो एज़ोलेंको।

आजकल जावास्क्रिप्ट में एसिंक्रोनस विधियों का अर्थ है वादे लौटाने वाले तरीके। नया async / await सिंटैक्स अनिवार्य रूप से एसिंक्रोनस विधियों के लिए सिंटैक्टिक चीनी है जो डेवलपर को सिंक्रोनस कोड के समान अपना कोड लिखने में सक्षम बनाता है, async विधियां अभी भी वादे लौटाती हैं। हालांकि await उपयोग केवल async विधियों में ही किया जा सकता है। जैसा कि आपने देखा, LanguageHost.resolveModuleNames विधि अतुल्यकालिक नहीं है और इसलिए सादे जावास्क्रिप्ट में वादे की प्रतीक्षा करने के बाद ही उस विधि से वापस लौटना संभव नहीं है।

हालांकि, NodeJs में, इस तरह की चीजें वास्तव में वर्तमान थ्रेड पर सिंक्रोनस विधि प्रदान करके संभव है, फिर एसिंक्रोनस विधि पर कूदकर और एसिंक्रोनस विधि के हल होने पर सिंक्रोनस विधि पर वापस कूदना। इसके चारों ओर फाइबर या रैपर देखें जैसे कि sync.js ।

इस प्रकार, एसिंक विधि आमंत्रण वाली बात वास्तव में कोई समस्या नहीं है। हालांकि एक और समस्या हो सकती है। जबकि प्लगइन संदर्भ एक विधि प्रदान करता है resolveId , यह पर्याप्त नहीं होगा। Vue सिंगल फाइल कंपोनेंट्स से टाइपस्क्रिप्ट कोड निकालने के लिए हमें transform के rollup-plugin-vue को कॉल करना होगा। प्लगइन संदर्भ दुर्भाग्य से उस कार्यक्षमता की पेशकश नहीं करता है।

इसे हल करने का एक तरीका यह हो सकता है कि rollup-plugin-vue को अपनी परियोजना पर निर्भरता के रूप में जोड़ें और सीधे vue प्लगइन पर transform को ट्रिगर करें। यह निश्चित रूप से सुंदर नहीं है और रोलअप प्लगइन्स के साथ काम करने का इच्छित तरीका नहीं है।

एक और तरीका यह हो सकता है कि रोलअप को सभी आयातों को एकत्रित करने देने के लिए पहले रन में प्रति फ़ाइल आधार पर transpileModule में transform केवल transpileModule को चलाने के लिए, vue प्लगइन को transform एकल चलाने दें फ़ाइल घटकों और निकाले गए टाइपस्क्रिप्ट कोड को कैश करें। फिर रोलअप समाप्त होने से पहले, ट्रांसपाइल किए गए कोड को त्याग दें और उस कोड पर एक उचित टाइपस्क्रिप्ट संकलन करें जिसे हमने renderChunk या generateBundle प्लगइन हुक में कैश किया था। यह अन्य प्लगइन्स के साथ हस्तक्षेप कर सकता है, हालांकि यह उस कोड में अतिरिक्त परिवर्तन लागू करता है जिसे हम त्याग देंगे।

अभी के लिए मुझे अभी तक और अधिक सुंदर समाधान नहीं दिख रहा है।

संपादित करें: दूसरे विचार पर, दूसरा दृष्टिकोण शायद _that_ बदसूरत नहीं है। renderChunk या generateBundle हुक के बजाय, प्लगइन खुद का पता लगा सकता है जब अंतिम आयात आयात किया जा रहा है और उस बिंदु पर स्क्रैच से संकलन शुरू करें और संकलित फ़ाइल को रोलअप कतार में जोड़ें जैसे कि यह वास्तव में अन्य सभी प्लगइन्स द्वारा भी संसाधित किया जा सकता है। पहले से जेनरेट की गई फाइलों को अभी भी खारिज करने की जरूरत है, हालांकि इससे बचने के लिए वे अंतिम बंडल में समाप्त हो जाते हैं।
फिर भी, यह दृष्टिकोण कुछ प्रसंस्करण समय बर्बाद करता है क्योंकि यह अन्य प्लगइन्स को उन फ़ाइलों पर भी देता है जिन्हें हम वैसे भी त्याग देंगे।

@danimoh @eddow दोनों उदाहरण रेपो के लिए वर्कअराउंड, आपत्तिजनक आयातों के ठीक ऊपर // @ts-ignore साथ त्रुटि जाँच अक्षम कर रहा है।

त्रुटि मूल रूप से टाइपस्क्रिप्ट शिकायत कर रही है कि यह नहीं जानता कि *.vue सामान किस प्रकार का है ( Cannot find module अर्थ मॉड्यूल प्रकार है)। एक बार जब वह चुप हो जाता है, तो सबकुछ सही ढंग से संकलित होता प्रतीत होता है। नकारात्मक पक्ष यह है कि vue फ़ाइलों से आयात की जाने वाली चीज़ें any प्रकार की होती हैं और त्रुटि जाँच में मदद नहीं करती हैं।

(न्यूनतम रेपो में, पहले घटक को दूसरे के संदर्भ की आवश्यकता होती है, अन्यथा रोलअप ट्रीशेक इसे बंडल से दूर कर देता है)

@danimoh हाँ, संदर्भ के माध्यम से रोलअप से मॉड्यूल स्रोत प्राप्त करने का कोई तरीका नहीं है। इसमें से अधिकांश vue प्लगइन पक्ष पर किया जा सकता है (मैंने वहां एक मामला खोला), लेकिन अभी भी संभावित नुकसान हैं, जैसे कि rpt2 को आयात करने वाली स्क्रिप्ट को बदलने से पहले निकाली गई स्क्रिप्ट को बदलने की आवश्यकता होगी।

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

vue प्लगइन हैंडल ts देने के विकल्प के रूप में, निम्नलिखित एक वैध दृष्टिकोण और बदसूरत हैक्स का एक बेहतर पुनरावृत्ति हो सकता है जिसे मैंने पहले प्रस्तावित किया था:

• क्या Vue प्लगइन इंस्टेंस options हुक के माध्यम से उजागर हुआ है?
  इस तरह हम vue प्लगइन पर transform मेथड को कॉल कर सकते हैं।
• https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API से मुझे ऐसा प्रतीत होता है कि ts CompilerHost और LanguageServiceHost को कस्टम fileExists खिलाया जा सकता है readFile , getScriptSnapshot और इसी तरह।
• यदि दोनों काम करते हैं, तो हम टाइपस्क्रिप्ट को वीयू प्लगइन से प्राप्त कोड को एएसटी में पार्स कर सकते हैं और उस एएसटी से आयात एकत्र कर सकते हैं और अगर वे .vue फाइलें हैं तो वीयू प्लगइन से अनुरोध करें। सभी vue फ़ाइलों के लिए, हम निकाले गए टाइपस्क्रिप्ट कोड को कैश करते हैं और vue आयात के लिए उस कैश्ड ts कोड को वापस करने के लिए readFile जैसी विधियों को अधिलेखित कर देते हैं।

संपादित करें: वास्तव में, यदि हम fileExists और readFile को अधिलेखित कर सकते हैं, तो हमें एएसटी को पार करके स्वयं आयात एकत्र करने की आवश्यकता नहीं होगी क्योंकि टाइपस्क्रिप्ट इन विधियों को उन सभी आयातों के लिए कॉल करने वाला है जिन्हें वह आयात करना चाहता है वैसे भी। फिर हमें केवल मांग पर vue प्लगइन को कॉल करने की आवश्यकता है।

Vue प्लगइन इंस्टेंस शायद उजागर हो गया है, मुझे नहीं पता कि रोलअप प्लगइन्स को एक-दूसरे को कॉल करने की अपेक्षा करता है और अगर उस मामले में कुछ टूट जाएगा (तुरंत या भविष्य में)।

आपका दूसरा बिंदु काम करेगा, ठीक यही LanguageServiceHost के लिए है।

यह दृष्टिकोण काम कर सकता है, मुख्य नकारात्मक पक्ष संभावित रूप से कमजोर युग्मन के साथ vue प्लगइन और थ्रोअवे काम के लिए अतिरिक्त चक्र है।

मेरी इच्छा है कि रोलअप के पास प्लगइन को बदलने के लिए एक तरीका था और वर्तमान फ़ाइल को पुनः प्रयास करने से पहले एक निर्भरता को बदलने की घोषणा की गई थी, फिर इसे सफाई से लागू किया जा सकता था ...

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

हाँ, रोलअप में कुछ वास्तु परिवर्तन की आवश्यकता होगी। हो सकता है कि कोई इस तरह से कुछ लागू करने के लिए कोई मुद्दा खोल सकता है लेकिन इसमें शायद उम्र लग जाएगी।
इसके अलावा, मुझे यकीन नहीं है कि यह चीजों को वास्तव में बेहतर बनाता है या नहीं। हमें अभी भी यह सुनिश्चित करना है कि टाइपस्क्रिप्ट सभी फाइलों में टाइप चेकिंग करने के लिए पूरी चीज को एक साथ संकलित करता है। अन्यथा हम भी हो सकती हैं इस ।

यह मेरे लिए इस सेटअप के साथ काम करता है, एक एकल Vue घटक को संकलित करने के लिए:

import VuePlugin from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'

export default {
  plugins: [
    typescript({
      typescript: require('typescript'),
      objectHashIgnoreUnknownHack: true,
    }),
    VuePlugin(/* VuePluginOptions */),
  ],
  input: 'src/components/HelloWorld.vue',
  output: [
    { file: 'dist/HelloWorld.cjs.js', format: 'cjs' },
    { file: 'dist/HelloWorld.esm.js', format: 'esm' },
  ],
}

मुझे यकीन नहीं है कि लैंग = "टीएस" के साथ वीयू एसएफसी से मॉड्यूल बनाने का यह सबसे अच्छा तरीका है।

अगर किसी के पास कोई सलाह है तो कृपया मुझे बताएं।

यह मेरे लिए इस सेटअप के साथ काम करता है, एक एकल Vue घटक को संकलित करने के लिए:

ठीक है, लेकिन यह वास्तविक उपयोग का मामला नहीं है। वह है हैलो वर्ल्ड। किसी को भी समस्या को समझने में परेशानी हो रही है, यहां मैंने जो हासिल किया है।

रोलअप सचमुच ऐसा नहीं कर सकता

क्यों? यहाँ एक उदाहरण है:

<script lang="ts">
import Bar from './Bar.vue';
...
</script>

1) Vue प्लगइन स्क्रिप्ट को टाइपस्क्रिप्ट प्लगइन पर भेजता है
2) टाइपस्क्रिप्ट प्लगइन एक .vue फ़ाइल का सामना करता है, लेकिन यह जानने का कोई तरीका नहीं है कि इसके साथ क्या करना है क्योंकि रोलअप प्लगइन्स को वेबपैक जैसे आयात पर अन्य प्लगइन्स को स्थगित करने के लिए एक तंत्र प्रदान नहीं करता है। नियमित जेएस प्लगइन्स को स्थगित कर सकता है, लेकिन कोड पहले से ही एक प्लगइन द्वारा संसाधित किया जा रहा है।
3) मुझे वास्तव में समझ में नहीं आता कि यह lang=scss या lang=ts से अलग क्यों है, लेकिन मुझे लगता है कि ऐसा है।

अच्छा, मैं क्या कर सकता हूँ?

बहुत ज्यादा नहीं।

लेकिन vuetify! बफ़ी!

Vuetify टाइपस्क्रिप्ट है, लेकिन SFC का उपयोग नहीं करता है। यह शुद्ध रेंडर फ़ंक्शन है।

Buefy SFC और रोलअप का उपयोग करता है, लेकिन कोई टाइपस्क्रिप्ट नहीं।

हालांकि वास्तव में, मैं कुछ नहीं कर सकता?

आप इसे पसंद नहीं करेंगे। प्रत्येक Vue फ़ाइल के लिए आपको टाइपस्क्रिप्ट फ़ाइल से आयात करने की आवश्यकता है, आपको एक नियमित जावास्क्रिप्ट फ़ाइल मध्यस्थ बनाना होगा।

import Bar from './Bar.vue';

export default Bar;

तब और उसके बाद ही आप रोलअप के साथ अपनी टाइपप्रति SFC घटक lib बनाने में सक्षम होंगे।

गीज़, वह बेकार है

यदि आप एक बेहतर समाधान के साथ आए हैं, तो मुझे यह सुनना अच्छा लगेगा।