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

79

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

javascript angular angular-cli Kris Hollenbeck
quelle
Scheint, als hätten sie auf Typoskript 2.0 umgestellt
Nathan Smith
Werfen
Nathan Smith
Danke für den Link, aber das ist nicht das, wonach ich suche. Dies dient zum Hinzufügen der Definitionsdateien. Ich versuche herauszufinden, wie JavaScript-Bibliotheken von Drittanbietern in mein Projekt aufgenommen werden können.
Kris Hollenbeck
Webpack angle2 Beispiel, wie verschiedene für den Anbieter, eines für Polymorphismus, eines für die App und eines für das CSS gebündelt werden, um die App sauber zu halten.
Jorawar Singh

Antworten:

90

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';.

Kris Hollenbeck
quelle
4
Wie kann ich in Typescript auf jquery verweisen, nachdem ich das Skript zu angle-cli.json hinzugefügt habe?
Nthaxis
1
Übrigens: Wenn es sich bei der hinzugefügten externen Datei um eine Polyfill handelt, gibt es einen speziellen Mechanismus für das, was in src/polyfills.ts(ab Beta.31)
rmag
3
Wenn Sie jQuery in Ihrem Angular-Projekt verwenden, machen Sie es falsch. Ich liebe jQuery, es hat mich in meiner Karriere weit gebracht, aber wenn Sie Angular richtig verwenden, ist jQuery nicht mehr erforderlich.
Blair Connolly
5
@BlairConnolly, obwohl ich damit einverstanden bin und wir gerne jQuery loswerden würden. Wir verwenden eine Jquery-Benutzeroberfläche von einem anderen Team in unserem Unternehmen, das derzeit keine Zeit hat, die gesamte Benutzeroberfläche neu zu schreiben. Manchmal haben die Leute einfach keine Wahl.
Kris Hollenbeck
1
Es gibt etwas darüber geschrieben hier , die vorschlagen> Sobald Sie eine Bibliothek über die Skripte Array importieren, sollten Sie es über eine Import - Anweisung nicht importieren in Ihrem Typoskript Code (zB Import * wie $ von ‚jquery‘;)
PaulCo
21

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.

Christian Ulbrich
quelle
Das ist großartig, weil ich eine js-Konfigurationsdatei pro Umgebung erstellen kann. Lassen Sie sie dort und laden Sie sie zur Laufzeit, anstatt die Datei environment.ts zu verwenden und für jede Umgebung einen Winkel zu erstellen (schrecklich ...)
Erik Philips
Haben Sie ein Beispiel für die Verwendung von Polyfills oder das Laden bestimmter Komponenten?
Steve Lam
@SteveLam Bitte seien Sie genauer oder stellen Sie eine neue Frage. Normalerweise werden Polyfills nicht in eine bestimmte Komponente geladen , sondern global, es sei denn, Sie möchten, dass Ihre Komponenten in sich geschlossen sind. Selbst dann ist es vorzuziehen, die erwartete Laufzeitumgebung zu definieren und den Verbraucher der Komponente entscheiden zu lassen, wann und wie sie geladen werden sollen eine Polyfüllung.
Christian Ulbrich
Danke Chris, hast du einen Artikel darüber?
Steve Lam
Hallo, ich verwende Angular 7, wenn ich mi App starte, wird das Skript auf der Indexseite geladen, aber ich muss das Skript auf einer anderen Seite verwenden. Wenn ich auf eine andere Seite klicke, wird das Skript entladen. Wie kann ich es auf eine bestimmte Seite laden oder für eine ganze Anwendung?
Luis Alberto Juarez
3

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 .

Prashant Barve
quelle
2

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.

Svenn
quelle
7
Von Antworten nur auf Links wird abgeraten. Bitte zitieren Sie die wesentlichen Teile der Antwort aus den Referenzlinks, da die Antwort ungültig werden kann, wenn sich die verlinkten Seiten ändern.
Stuart Siegler
-1

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.

zilj
quelle
1
Die Angular Cli Webpack-Konfiguration ist tatsächlich Teil des Angular Cli Node-Pakets. Also kann ich das leider nicht ändern. In der CLI müssen beispielsweise voreingestellte Befehle erstellt werden. ng builddas alles wird von der cli erledigt. Aber ich dachte, es gibt wahrscheinlich eine Möglichkeit, Dinge als Teil des Builds hinzuzufügen. Aber ich habe kein klares Beispiel gesehen.
Kris Hollenbeck
Ah, ich entschuldige mich. Ich hatte Winkel-2-Fragen gefiltert, aber diese rutschte durch. Viel Glück.
zilj