कोणीय क्लि वेबपैक, बाहरी जेएस फाइलों को कैसे जोड़ें या बंडल करें?

Question 1

मुझे यकीन नहीं है कि सिस्टमजेस से वेबपैक पर कोणीय क्लीयर को बदलने के बाद जेएस फाइलें (विक्रेताओं) को कैसे शामिल किया जाए।

उदाहरण के लिए

विकल्प ए

मेरे पास कुछ js फाइलें हैं जो npm के माध्यम से स्थापित की गई थीं। स्क्रिप्ट टैग को हेड टैग में इस तरह जोड़ना काम नहीं करता है। न ही यह सबसे अच्छा तरीका लगता है।

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

विकल्प बी

इन js फ़ाइलों को वेबपैक बंडल के भाग के रूप में शामिल करें। ऐसा लगता है कि जिस तरह से यह शायद किया जाना चाहिए। हालाँकि मुझे यकीन नहीं है कि यह कैसे करना है क्योंकि सभी वेबपैक कोड को कोणीय-क्लि-वेबपैक नोड पैकेज के पीछे छिपा हुआ लगता है। मैं सोच रहा था कि शायद एक और वेबपैक कॉन्फिगर है जिसे हम एक्सेस कर सकते हैं। लेकिन मुझे यकीन नहीं है क्योंकि मैं एक नया कोणीय-क्लि-वेबपैक प्रोजेक्ट बनाते समय नहीं देखा था।

और जानकारी:

मैं जिन js फ़ाइलों को शामिल करने की कोशिश कर रहा हूं, उन्हें कोणीय परियोजना से पहले शामिल करने की आवश्यकता है। उदाहरण के लिए jQuery और एक तृतीय पक्ष js lib है जो मॉड्यूल लोडिंग या टाइपस्क्रिप्ट के लिए वास्तव में सेटअप नहीं है।

संदर्भ https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

Question 2

कोणीय-क्ली 7.xx को कोणीय 7.xx के साथ प्रयोग करके अंतिम बार परीक्षण किया गया

इस का उपयोग कर पूरा किया जा सकता scripts:[]में .angular-cli.json।

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

नोट: जैसा कि प्रलेखन वैश्विक पुस्तकालय स्थापना में सुझाव देता है: यदि आप अपनी styles(या scripts!) संपत्ति का मूल्य बदलते हैं, तो:

यदि आप इसे चला रहे हैं, तो एनजी सेवा को पुनः आरंभ करें

..तो scripts.bundle.jsफ़ाइल के माध्यम से ** globalcontext में निष्पादित स्क्रिप्ट देखें ।

नोट: जैसा कि नीचे टिप्पणी में चर्चा की गई है। जेएस कामगार जो कि यूएमडी मॉड्यूल का समर्थन करते हैं, जैसे कि ईएस 6 आयातों को भी आयात किया जा सकता है। उदाहरण के लिए import $ from 'jquery';:।

Question 3

scripts:[]तब कुछ के <head>साथ जोड़ने के लिए उपयोग करने के लिए एक सूक्ष्म अंतर है <script>। से स्क्रिप्ट scripts:[]में जोड़ दी scripts.bundle.jsकि हमेशा शरीर टैग में लोड हो जाता है और इस प्रकार लोड किया जाएगा के बाद में स्क्रिप्ट <head>। मैन्युअल रूप से एक फ़ोल्डर (उदाहरण के लिए एक NPM स्क्रिप्ट के साथ) के लिए स्क्रिप्ट कॉपी करने के लिए इस प्रकार अगर स्क्रिप्ट लोड हो रहा है आदेश मामलों (यानी आप एक वैश्विक polyfill लोड करने के लिए की जरूरत है), तो अपने ही एकमात्र विकल्प है और एक के रूप में इस फ़ोल्डर जोड़ने के संपत्ति के लिए .angular-cli.json।

तो अगर आप वास्तव में कुछ इस पर निर्भर लोड किए जाने से पहले ही (कोणीय विकल्प ए ), तो आपको लगता है कि कोणीय निर्माण में शामिल किया जाएगा एक फ़ोल्डर में मैन्युअल रूप से इसे कॉपी करने की जरूरत है और फिर आप इसे मैन्युअल लोड कर सकते हैं एक साथ <script>में <head>।

इस प्रकार, विकल्प प्राप्त करने के लिए आपको निम्न करना होगा:

में एक vendorफ़ोल्डर बनाएँsrc/
इस फ़ोल्डर को संपत्ति के रूप में जोड़ें .angular-cli.json:

"assets": [
    "assets",
    "favicon.ico",
     "vendor"
  ]

अपने वेंडर स्क्रिप्ट node_modules/some_package/somejs.jsको कॉपी करेंvendor
इसे मैन्युअल रूप से लोड करें index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

हालाँकि अधिकांश समय आपको केवल संकुल के लिए इस दृष्टिकोण की आवश्यकता होती है, जो कि वैश्विक रूप से उपलब्ध होने की आवश्यकता है, बाकी सब से पहले (यानी कुछ निश्चित पॉलीफिल्स)। क्रिश का जवाब विकल्प बी के लिए सही है और आपको वेबपैक बिल्ड (मिनिमाइजेशन, हैशिंग, ...) का लाभ मिलता है।

हालाँकि, यदि आपकी लिपियों को विश्व स्तर पर उपलब्ध होने की आवश्यकता नहीं है और यदि वे मॉड्यूल-तैयार हैं तो आप उन्हें आयात कर सकते हैं src/polyfills.tsया बेहतर आयात कर सकते हैं केवल तभी जब आप उन्हें अपने विशिष्ट घटकों में आवश्यकता हो।

लिपियों के माध्यम से scripts:[]या मैन्युअल रूप से उन्हें उपलब्ध कराने के माध्यम से विश्व स्तर पर उपलब्ध कराना, इसे समस्याओं का एक सेट लाता है और वास्तव में इसका उपयोग तभी किया जाना चाहिए, जब यह बिल्कुल आवश्यक हो।

Question 4

आपको फ़ाइल .angular-cli.jsonफ़ाइल खोलने की आवश्यकता है और "scripts:"यदि आप बाहरी सीएसएस जोड़ना चाहते हैं तो आपको "styles":उसी फ़ाइल में शब्द खोजने की आवश्यकता है ।

नीचे दिखाए गए उदाहरण के रूप में आप देखेंगे कि बूटस्ट्रैप Js ( bootstrap.min.js) और बूटस्ट्रैप CSS ( bootstrap.min.css) में कैसे शामिल हैं .angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

यह सुनिश्चित करने के लिए कि यदि आपके पास अपनी खुद की js फाइल है तो आप अपना फ़ाइल पथ .angular-cli.jsonउसी स्थान पर ( "scripts":[]) में जोड़ सकते हैं ।

Question 5

आप इस पृष्ठ पर एक नज़र डालना चाहते हो सकते हैं: https://github.com/angular/angular-cli#global-lc.nation

यह .js और .css फ़ाइलों को शामिल करने के तरीके की मूल बातें दिखाता है

कुछ जावास्क्रिप्ट पुस्तकालयों को वैश्विक दायरे में जोड़ने की जरूरत है, और जैसे कि वे एक स्क्रिप्ट टैग में हैं। हम इसे एप्स [0]। स्क्रिप्ट्स और एप्स का उपयोग करके कर सकते हैं।

Question 6

मैंने पहले कोणीय-क्ली का उपयोग नहीं किया था लेकिन मैं वर्तमान में एक कोणीय / वेबपैक निर्माण के साथ काम कर रहा हूं। आदेश jQuery और अन्य विक्रेताओं के साथ अपने आवेदन प्रदान करने के लिए मैं, webpack के प्लगइन का उपयोग ProvidePlugin()। यह आम तौर पर आपके पास बैठेगा webpack.config.js: यहाँ jquery, lodash और क्षण पुस्तकालयों के लिए एक उदाहरण है। यहाँ प्रलेखन के लिए एक कड़ी है (जो सबसे अच्छा अस्पष्ट है)

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash',
    moment: 'moment',
  })
]

अविश्वसनीय रूप से, यह वास्तव में आपको इसे तुरंत उपयोग करने की अनुमति देता है, बशर्ते कि अन्य सभी वेबपैक सेटअप सही ढंग से किया गया हो और इसके साथ स्थापित किया गया हो npm।