Heim > Artikel > Web-Frontend > So führen Sie Bibliotheken von Drittanbietern mit Webpack und Vorsichtsmaßnahmen ein (Codebeispiele)
So führen Sie Bibliotheken von Drittanbietern mit Webpack und Vorsichtsmaßnahmen ein (Codebeispiele)
- 不言nach vorne
- 2019-01-15 11:20:162709Durchsuche
In diesem Artikel geht es um die Methoden und Vorsichtsmaßnahmen (Codebeispiele) für die Einführung von Bibliotheken von Drittanbietern. Ich hoffe, dass er für Sie hilfreich ist .
Im Allgemeinen müssen wir uns keine Sorgen um die von uns verwendeten Bibliotheken von Drittanbietern machen, da diese nicht im npm-Management-Repository zu finden sind.
Wenn Sie eine bestimmte Bibliothek wie jquery benötigen, können Sie den Skriptbefehl npm install jquery direkt ausführen, um die für dieses Projekt erforderlichen Abhängigkeiten zu installieren.
Dann können Sie in der Moduldatei jquery verwenden , übergeben Sie Import $ from 'jquery' oder var $ = require('jquery') zur Einführung.
Dies ist eine gängige Methode, um Bibliotheken von Drittanbietern in mit Webpack erstellte Projekte einzuführen.
Hinweis: Um den Beispielcode besser zu demonstrieren, basiert das Beispiel auf dem Nodemon-Artikel.
In verschiedenen Szenarien gelten jedoch unterschiedliche Anforderungen für mit Webpack erstellte Projekte:
Die Größe des Projekts ist klein genug (cdn)
Wenn es sich um die Verarbeitungsmethode von webapck handelt, können Sie den Artikel webapck – Minimieren der Build-Ausgabe lesen.
Verwenden Sie Nicht-Webapck-Verarbeitungsmethoden wie CDN.
Der Vorgang ist auch sehr einfach. Wenn Sie das HTML-Webpack-Plugin verwenden, führen Sie direkt eine Bibliothek eines Drittanbieters (z. B. jquery) auf einem bestimmten CDN (z. B. Boot-CDN) in die Vorlagendatei ein template/index.html, der Referenzcode lautet wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>third party</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </body> </html>
Verwenden Sie dann module.js in jquery. Der Referenzcode lautet wie folgt:
require('./module.css');
module.exports = function() {
$(document.body).append('<h1>hello webpack</h1>')
}
Führen Sie abschließend npm run aus Nachdem der Build abgeschlossen ist, sehen Sie im Browser die Worte „Hallo Webpack“. Der Hintergrund ist ein roter Seiteneffekt.
Verwenden Sie Bibliotheken von Drittanbietern (Provide-Plugin oder Imports-Loader) in der globalen Umgebung
Um zu vermeiden, dass Sie jedes Mal Bibliotheken von Drittanbietern verwenden müssen, müssen Sie Folgendes tun to use import oder require( ) verweist auf sie und kann als globale Variablen definiert werden.
Das integrierte Plug-in von Webpacks ProvidePlugin kann dieses Problem lösen. Einzelheiten finden Sie in der Einführung von ProvidePlugin.
Um Konflikte mit der von cdn referenzierten JQuery zu vermeiden, wird hier lodash verwendet.
Installieren Sie zunächst die lodash-Abhängigkeit mit dem folgenden Befehl:
yarn add lodash --dev
Fügen Sie dann in webpack.config.js den folgenden Code hinzu:
new webpack.ProvidePlugin({
_: 'lodash'
}),
Zweitens im Modul. js Fügen Sie den folgenden Code hinzu:
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...
Führen Sie abschließend den Befehl „npm run test script“ aus. Nachdem der Build abgeschlossen ist, können Sie 1,2,3,4,5,6,~ zur Browserseite hinzufügen.
Wenn Sie angeben möchten, dass eine bestimmte Toolfunktion von lodash global verwendet werden kann, z. B.: _.concat,
Ändern Sie zunächst webapck.config.js wie folgt. Der Code lautet wie folgt:
...
new webpack.ProvidePlugin({
// _: 'lodash',
_concat: ['lodash', 'concat']
}),
...
Ändern Sie dann module.js. Der Code lautet wie folgt:
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...
Wenn Sie keine Plug-Ins verwenden möchten, können Sie auch die Verwendung von Import-Loader in Betracht ziehen , was auch den gleichen Zweck erreichen kann.
Um unnötige Störungen zu vermeiden, können Sie zur Demonstration einen Unterstrich verwenden.
Installieren Sie zunächst die Imports-Loader-Abhängigkeit. Der Befehl lautet wie folgt:
yarn add imports-loader --dev
Dann installieren Sie die Unterstrich-Abhängigkeit. Der Befehl lautet wie folgt:
yarn add underscore
Zweitens: Fügen Sie in webapck.config.js den folgenden Code hinzu:
...
module: {
rules: [
{
test: require.resolve('underscore'),
use: 'imports-loader?_=underscore'
},
...
]
},
...
Hinweis: Sowohl Underscore als auch Lodash werden mit dem Singleton-Modell entwickelt. Die Namen ihrer instanziierten Konstruktoren sind beide _, um sie zu unterscheiden muss geändert werden. Für den Imports-Loader ist es etwas schwierig, dieses Logo mit einem Alias zu versehen, aber Provide-Plugin hat dieses Problem nicht und kann einen personalisierten Alias festlegen.
Ändern Sie webpack.config.js. Der Code lautet wie folgt:
new webpack.ProvidePlugin({
// _: 'lodash',
// _concat: ['lodash', 'concat'],
__: 'lodash'
}),
Kann als __ und Unterstrich_ definiert werden, damit lodash es unterscheiden kann.
Ändern Sie dann module.js. Der Code lautet wie folgt:
...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...
Speichern Sie abschließend alle Dateien. Sie können ähnliche Ergebnisse im Browser sehen (nach dem Speichern startet Nodemon automatisch die Browser) .
CDN und Externals
Ich bin schon einmal auf einige Probleme mit Externals gestoßen. Der Grund, warum wir sie im Detail erklären müssen, ist, dass viele Leute nicht verstehen, was sie sind verwendet für.
Szenenreproduktion:
Zuvor gab es ein Projekt, das jquery verwendete. Da diese Bibliothek relativ klassisch ist, wird in verschiedenen Modulen der Anwendung häufig auf sie verwiesen. Die Verwendungsmethode ist wie folgt:
import $ from 'jquery'
oder
var $ = require('jquery')
Das Ergebnis ist, dass die Datei nach Abschluss des Builds relativ groß ist. Dann erwägen Sie die Verwendung eines CDN, wie oben beschrieben. Auf diese Weise müssen Sie die Import- oder Anforderungsreferenzen löschen und die installierte JQuery-Abhängigkeit löschen. Da die Projektstruktur jedoch chaotisch ist und es viele Module gibt, wird dies der Fall sein, um das Problem einer unzureichenden oder fehlenden Änderung zu vermeiden Anwendungsfehler verursachen. Was zu tun?
Einige Leute sagen, dass der Zweck der Verwendung von CDN bedeutungslos ist, wenn die JQuery-Abhängigkeit nicht gelöscht wird. Die Verwendung von extern kann dieses Problem lösen.
Sie können den folgenden Code in der Datei module.js hinzufügen:
...
var $ = require('jquery')
...
Speichern Sie dann die Datei und stellen Sie fest, dass die Build-Ausgabe den folgenden Fehler auslöst:
ERROR in ./module.js Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1' @ ./module.js 3:0-23 @ ./main.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js
in Modul module.js jquery kann nicht analysiert werden.
Fügen Sie als Nächstes den folgenden Code zu webpack.config.js hinzu:
externals: {
jquery: 'jQuery',
jquery: '$'
},
wobei jquery für jquery in require('jquery') steht und jQuery und $ für jquery stehen. Die Bibliothek selbst stellt Instanziierungskennungen bereit . CDNisierung anderer Bibliotheken, Modifikationen ähnlich wie bei JQuery.
Wenn Sie sich jedoch zu Beginn des Projekts für die Verwendung von CDN entscheiden, verwenden Sie var $ = require('jquery') oder import $ from 'jquery' nicht in einem Modul, das jquery verwendet, obwohl dies nicht dazu führt ein Fehler. Wenn jedoch aus irgendeinem Grund später eine Jquery-Abhängigkeit eingeführt wird, müssen Sie var $ = require('jquery') oder import $ from 'jquery'; verwenden.
Das obige ist der detaillierte Inhalt vonSo führen Sie Bibliotheken von Drittanbietern mit Webpack und Vorsichtsmaßnahmen ein (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!