मैं आयनिक 2 में node_modules से जावास्क्रिप्ट + सीएसएस कैसे शामिल करूं?

Question

मुझे अपने आयनिक 2 ऐप के भीतर पूर्ण कैलकेंडर और chart.js शामिल करने की आवश्यकता है। (आयनिक 2 आरसी.3) मैंने प्रासंगिक मॉड्यूल स्थापित करने के लिए एनपीएम का उपयोग किया है, और स्क्रिप्ट मेरे node_modules फ़ोल्डर में हैं।
मैं अपने ऐप में node_modules फ़ोल्डर से स्क्रिप्ट/सीएसएस को सही तरीके से कैसे शामिल करूं?

बातें मैं कोशिश की है:

• मैन्युअल www फ़ोल्डर में प्रासंगिक js/सीएसएस फ़ाइलों की प्रतिलिपि, और index.html में सामान्य <script> और <link> तत्वों के साथ संदर्भ उन्हें। (मैं ज्यादातर इस काम मिल गया है, लेकिन यह बहुत भद्दा लगता है)
• , मेरे app.module.ts और/या अपने कस्टम component.ts फ़ाइलों में उन्हें आयात जैसे import 'chart.js/dist/Chart.bundle.min.js'; (यह काम करता है की तरह है, लेकिन मैं त्रुटियों को प्राप्त करें कि अंतर्निहित स्क्रिप्ट को jQuery नहीं मिल रहा है, इसलिए मुझे अभी भी ऊपर के रूप में index.html में jQuery को शामिल करना होगा)

निश्चित रूप से एक बेहतर तरीका है?

Answer 1

मेरा मानना ​​है कि यह सबसे साफ तरीका है जिसे मैंने देखा है।

हम अनिवार्य रूप से आयनिक बिल्ड स्क्रिप्ट के प्रति भाग को ओवरराइड करने जा रहे हैं। उन्होंने इसे प्रोत्साहित करने और इसे सरल बनाने के लिए बिल्ड स्क्रिप्ट बनाई है।

आप यह मानते हुए पहले से ही स्थापित करने के लिए जो कुछ भी आप की जरूरत पुस्तकालय NPM उपयोग किया है:

npm install chart.js --save 

पर (जो परियोजना के रूट में node_packages फ़ोल्डर में chart.js पुस्तकालय स्थापित करता है)

देखो /node_modules/@ionic/app-scripts/config/copy.config.js। यही वह है जिसे हम ओवरराइड कर रहे हैं, इसलिए इसकी सामग्री को /config/copy.config.js पर फ़ाइल में कॉपी करें (आपको/config फ़ोल्डर बनाना होगा)।

module.exports = { 
    include: [ 
    { 
     src: '{{SRC}}/assets/', 
     dest: '{{WWW}}/assets/' 
    }, 
    { 
     src: '{{SRC}}/index.html', 
     dest: '{{WWW}}/index.html' 
    }, 
    { 
     src: '{{SRC}}/manifest.json', 
     dest: '{{WWW}}/manifest.json' 
    }, 
    { 
     src: '{{SRC}}/service-worker.js', 
     dest: '{{WWW}}/service-worker.js' 
    }, 
    { 
     src: 'node_modules/ionic-angular/polyfills/polyfills.js', 
     dest: '{{BUILD}}/polyfills.js' 
    }, 
    { 
     src: 'node_modules/ionicons/dist/fonts/', 
     dest: '{{WWW}}/assets/fonts/' 
    }, 
    { 
     src: './node_modules/chart.js/dist/Chart.bundle.min.js', 
     dest: '{{BUILD}}/Chart.bundle.min.js' 
    }, 
    ] 
}; 

अंतिम अनुभाग एक हम पर कहा, कहीं न कहीं है कि वास्तव में निर्माण में खींच लिया जाएगा करने के लिए chart.js फाइल कॉपी किया गया।

"config": { 
    "ionic_copy": "./config/copy.config.js" 
}, 

अब जब आप का निर्माण, फ़ाइल:

हमारी स्क्रिप्ट प्राप्त करने के लिए इस्तेमाल किया जा, package.json इसके बारे में बताया जा रहा है, तो अपने /package.json फाइल करने के लिए इस "config" खंड जोड़ने की जरूरत है प्रतिलिपि बनाई जाएगी, और अधिक जोड़ने के लिए, पहले किए जाने के बाद यह स्पष्ट रूप से आसान है। आयनिक बिल्ड प्रक्रिया के अन्य भाग भी हैं जिन्हें आप ओवरराइड कर सकते हैं, यह देखने लायक है।

https://ionicframework.com/docs/v2/resources/app-scripts/

अब आप उस में आसानी से कॉल कर सकते हैं, एक ही विकल्प index.html के अंदर है:

<script src="build/Chart.bundle.min.js"></script> 

लाभ कर रहे हैं, यदि आप एक मॉड्यूल अद्यतन को स्थापित, बदल फाइलों में अपडेट कर दिया जाएगा आपका निर्माण, और साथ ही, सब कुछ आसानी से वीसीएस के साथ काम करता है और नए वातावरण स्थापित करता है, क्योंकि निर्भरता एनपीएम द्वारा संभाली जाती है, और हमारा स्क्रिप्ट विस्तार अन्य सभी का ख्याल रखता है।:-)

आशा है कि मदद करता है! :-)