Eine kurze Analyse, wie man Bibliotheken von Drittanbietern über Webpack einführt

Dieser Artikel stellt Ihnen eine kurze Analyse vor, wie Sie Bibliotheken von Drittanbietern über Webpack einführen. Es hat einen gewissen Referenzwert.

Im Allgemeinen gibt es drei Situationen bei der Einführung von Bibliotheken von Drittanbietern:

1. Einführung über CDN; Installieren und importieren;

2. Die Drittanbieter-JS-Datei ist lokal

3. über CDN

Dies ist die einfachste Möglichkeit Wenn Sie beispielsweise Amap einführen, können Sie den folgenden Code direkt am Ende der Datei index.html einfügen. Diese Situation hat nichts mit Webpack zu tun, da die Eingabedatei von Webpack nicht hier ist

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

npm

Pakete, die über npm install installiert werden, werden im Ordner „Node-Module“ abgelegt. Bei Verwendung können sie direkt oben in den verwendeten Dateien eingefügt werden, z. B. „Import“ oder „Require“. Wenn jedoch jede modulare Datei verwendet wird, muss jede Datei diese Datei eines Drittanbieters einführen, was sehr umständlich ist. Zu diesem Zeitpunkt können Sie das Webpack-Plugin verwenden: ProvidePlugin Es versteht sich, dass die Funktion dieses Plug-Ins -in dient zur Integration der Bibliothek eines Drittanbieters und hat einen globalen Geltungsbereich.

Wenn Sie beispielsweise jquery

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

einführen, können Sie $ und jQuery verwenden. Beide stellen jquery dar. Es ist zu beachten, dass der Wert (jquery) nach $ und jQuery derselbe sein muss jquery in npm install jquery Seien Sie konsistent, sonst werden Sie es nicht finden.

Lokale JS-Bibliotheksdatei

Es wird eine Situation geben: Die JS-Datei eines Drittanbieters ist lokal. Wie kann ich sie über das Webpack einführen? Wenn Sie beispielsweise im zweiten Fall von jquery

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

so schreiben, wird jquery definitiv nicht gefunden, da es nicht in den Knotenmodulen enthalten ist. In diesem Fall können Sie die Option „resolve“ im verwenden Webpack-Konfiguration, um einen Alias ​​für jquery anzugeben und seinen Pfad zu konfigurieren.

Wenn unsere jquery.js-Datei im dist-Ordner abgelegt wird

resolve:{
    alias: {
      $: path.resolve(__dirname, './dist/jquery.js'),
      jQuery: path.resolve(__dirname, './dist/jquery.js'),
    }
}

Das ist alles.

Durch Loader

Zusätzlich zum ProvidePlugin-Plug-in gibt es auch einen Import-Loader, der die Arbeit der Einführung von Bibliotheken von Drittanbietern abschließen kann.

Testen Sie, um anzugeben, welche Datei eine Bibliothek eines Drittanbieters einführen muss, und konfigurieren Sie JQuery über Optionen. Nach dem Packen können Sie sehen, dass die gepackte app.js-Datei größer wird.

module: {
        rules: [
            {
                test: path.resolve(__dirname, "./src/app.js"),
                use: "imports-loader"
                options:{
                    $:'jquery'
                }
            }
        ]
    }

Verwandte Empfehlungen:

Detaillierte Erklärung der Webpack4.0-Konfiguration

Für Konfiguration/Index in Vue .js: Detaillierte Erklärung der Konfiguration

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man Bibliotheken von Drittanbietern über Webpack einführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!