Angular Cli Webpack, Wie füge ich externe JS-Dateien hinzu oder bündle sie?

Question 1

Ich bin nicht sicher, wie JS-Dateien (Anbieter) nach dem Wechsel von Angular Cli von SystemJs zu Webpack eingeschlossen werden sollen.

Zum Beispiel

Option A.

Ich habe einige JS-Dateien, die über npm installiert wurden. Das Hinzufügen von Skript-Tags zum Head-Tag funktioniert nicht. Es scheint auch nicht der beste Weg zu sein.

<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>

Option B.

Fügen Sie diese JS-Dateien als Teil des Webpack-Bundles hinzu. Dies scheint die Art und Weise zu sein, wie es wahrscheinlich gemacht werden sollte. Ich bin mir jedoch nicht sicher, wie ich das machen soll, da der gesamte Webpack-Code hinter dem Angular-Cli-Webpack-Knotenpaket versteckt zu sein scheint. Ich dachte, vielleicht gibt es eine andere Webpack-Konfiguration, auf die wir möglicherweise Zugriff haben. Ich bin mir jedoch nicht sicher, da ich beim Erstellen eines neuen Angular-Cli-Webpack-Projekts keinen gesehen habe.

Mehr Info:

Die JS-Dateien, die ich einschließen möchte, müssen vor dem Angular-Projekt eingefügt werden. Zum Beispiel jQuery und eine js lib eines Drittanbieters, die nicht wirklich für das Laden von Modulen oder Typoskript eingerichtet ist.

Referenzen https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

Question 2

Zuletzt getestet mit angle-cli 7.xx mit Angular 7.xx

Dies kann mit scripts:[]in erreicht werden .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
  }
}

Hinweis: Wie in der Dokumentation in der globalen Bibliotheksinstallation angegeben: Wenn Sie den Wert Ihrer styles(oder scripts!) Eigenschaft ändern , gilt Folgendes:

Starten Sie ng serve neu, wenn Sie es ausführen.

.. um die Skripte zu sehen, die in einem ** globalen Kontext über die scripts.bundle.jsDatei ausgeführt werden.

Hinweis: Wie in den Kommentaren unten erläutert. JS-Bibliotheken, die UMD-Module über es6-Importe wie jQuery unterstützen, können auch mithilfe der es6-Importsyntax in Ihre Typoskriptdateien importiert werden. Zum Beispiel : import $ from 'jquery';.

Question 3

Es gibt einen feinen Unterschied zu verwenden scripts:[]dann etwas zu dem auf dem Hinzufügen <head>mit <script>. Skripte von werden scripts:[]zu dem hinzugefügt, das scripts.bundle.jsimmer in das Body-Tag geladen wird und somit NACH Skripten in geladen wird <head>. Wenn also um Fragen Skript Laden (dh Sie eine globale polyfill laden müssen), dann ist Ihre einzige Option , um manuell kopieren Skripte in einen Ordner (zB mit einem NPM - Skript) und fügen Sie diesen Ordner als Vermögenswert zu .angular-cli.json.

Wenn Sie also wirklich darauf angewiesen sind, dass etwas vor dem Winkel selbst geladen wird ( Option A ), müssen Sie es manuell in einen Ordner kopieren, der in den Winkelaufbau aufgenommen wird, und dann können Sie es manuell mit einem <script>In laden <head>.

Um Option a zu erreichen , müssen Sie also:

Erstellen Sie einen vendorOrdner insrc/
Fügen Sie diesen Ordner als Asset hinzu zu .angular-cli.json:

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

Kopieren Sie Ihr Anbieterskript node_modules/some_package/somejs.jsnachvendor
Laden Sie es manuell in index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

Meistens benötigen Sie diesen Ansatz jedoch nur für Pakete, die global verfügbar sein müssen, vor allem anderen (dh bestimmten Polyfills). Die Antwort von Kris gilt für Option B und Sie profitieren vom Webpack-Build (Minification, Hashes, ...).

Wenn Ihre Skripte jedoch nicht global verfügbar sein müssen und modulbereit sind , können Sie sie in src/polyfills.tsoder noch besser nur dann importieren, wenn Sie sie in Ihren spezifischen Komponenten benötigen.

Die globale Verfügbarkeit von Skripten über scripts:[]oder durch manuelles Laden bringt eigene Probleme mit sich und sollte eigentlich nur verwendet werden, wenn dies unbedingt erforderlich ist.

Question 4

Sie müssen die Datei öffnen .angular-cli.jsonund suchen "scripts:"oder wenn Sie externes CSS hinzufügen möchten, müssen Sie das Wort "styles":in derselben Datei finden.

Als Beispiel unten sehen Sie, wie das Bootstrap Js ( bootstrap.min.js) und das Bootstrap CSS ( bootstrap.min.css) Folgendes enthalten .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"
  ],

Wenn Sie eine eigene js-Datei haben, können Sie Ihren Dateipfad hier .angular-cli.jsonan derselben Stelle (in "scripts":[]) hinzufügen .

Question 5

Vielleicht möchten Sie einen Blick auf diese Seite werfen: https://github.com/angular/angular-cli#global-library-installation

Es zeigt die Grundlagen zum Einfügen von .js- und .css-Dateien

Einige Javascript-Bibliotheken müssen zum globalen Bereich hinzugefügt und so geladen werden, als wären sie in einem Skript-Tag. Wir können dies mit den Eigenschaften apps [0] .scripts und apps [0] .styles von angle-cli.json tun.

Question 6

Ich habe Angular-Cli noch nicht verwendet, arbeite aber derzeit mit einem Angular / Webpack-Build. Um meine Anwendung mit jQuery und anderen Anbietern zu versorgen, verwende ich das Webpack-Plugin ProvidePlugin(). Dies wird normalerweise in Ihren webpack.config.js: Hier ist ein Beispiel für jquery-, lodash- und moment-Bibliotheken. Hier ist ein Link zur Dokumentation (die bestenfalls vage ist)

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

Unglaublich, es ermöglicht Ihnen tatsächlich, es sofort zu verwenden, vorausgesetzt, alle anderen Webpack-Setups wurden korrekt durchgeführt und mit installiert npm.