Web-Frontend
js-Tutorial
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)
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools
Mar 16, 2024 pm 12:09 PM
PHP und Vue: eine perfekte Kombination von Front-End-Entwicklungstools In der heutigen Zeit der rasanten Entwicklung des Internets ist die Front-End-Entwicklung immer wichtiger geworden. Da Benutzer immer höhere Anforderungen an das Erlebnis von Websites und Anwendungen stellen, müssen Frontend-Entwickler effizientere und flexiblere Tools verwenden, um reaktionsfähige und interaktive Schnittstellen zu erstellen. Als zwei wichtige Technologien im Bereich der Front-End-Entwicklung können PHP und Vue.js in Kombination als perfekte Waffe bezeichnet werden. In diesem Artikel geht es um die Kombination von PHP und Vue sowie um detaillierte Codebeispiele, die den Lesern helfen sollen, diese beiden besser zu verstehen und anzuwenden
Häufig gestellte Fragen von Front-End-Interviewern
Mar 19, 2024 pm 02:24 PM
In Front-End-Entwicklungsinterviews decken häufige Fragen ein breites Themenspektrum ab, darunter HTML/CSS-Grundlagen, JavaScript-Grundlagen, Frameworks und Bibliotheken, Projekterfahrung, Algorithmen und Datenstrukturen, Leistungsoptimierung, domänenübergreifende Anfragen, Front-End-Engineering, Designmuster sowie neue Technologien und Trends. Interviewerfragen sollen die technischen Fähigkeiten, die Projekterfahrung und das Verständnis des Kandidaten für Branchentrends beurteilen. Daher sollten Kandidaten in diesen Bereichen umfassend vorbereitet sein, um ihre Fähigkeiten und Fachkenntnisse unter Beweis zu stellen.
Erfahrungsaustausch in der C#-Entwicklung: Fähigkeiten zur kollaborativen Front-End- und Back-End-Entwicklung
Nov 23, 2023 am 10:13 AM
Als C#-Entwickler umfasst unsere Entwicklungsarbeit in der Regel die Front-End- und Back-End-Entwicklung. Mit der Weiterentwicklung der Technologie und der zunehmenden Komplexität von Projekten wird die gemeinsame Entwicklung von Front-End und Back-End immer wichtiger und komplexer. In diesem Artikel werden einige kollaborative Front-End- und Back-End-Entwicklungstechniken vorgestellt, um C#-Entwicklern dabei zu helfen, die Entwicklungsarbeit effizienter abzuschließen. Nach der Festlegung der Schnittstellenspezifikationen ist die gemeinsame Entwicklung von Front-End und Backend untrennbar mit dem Zusammenspiel der API-Schnittstellen verbunden. Um den reibungslosen Ablauf der kollaborativen Front-End- und Back-End-Entwicklung sicherzustellen, ist es am wichtigsten, gute Schnittstellenspezifikationen zu definieren. Bei der Schnittstellenspezifikation handelt es sich um den Namen der Schnittstelle
Ist Django Front-End oder Back-End? Hör zu!
Jan 19, 2024 am 08:37 AM
Django ist ein in Python geschriebenes Webanwendungs-Framework, das Wert auf schnelle Entwicklung und saubere Methoden legt. Obwohl Django ein Web-Framework ist, müssen Sie zur Beantwortung der Frage, ob Django ein Front-End oder ein Back-End ist, ein tiefes Verständnis der Konzepte von Front-End und Back-End haben. Das Front-End bezieht sich auf die Schnittstelle, mit der Benutzer direkt interagieren, und das Back-End bezieht sich auf serverseitige Programme. Sie interagieren mit Daten über das HTTP-Protokoll. Wenn das Front-End und das Back-End getrennt sind, können die Front-End- und Back-End-Programme unabhängig voneinander entwickelt werden, um Geschäftslogik bzw. interaktive Effekte sowie den Datenaustausch zu implementieren.
Erkundung der Front-End-Technologie der Go-Sprache: eine neue Vision für die Front-End-Entwicklung
Mar 28, 2024 pm 01:06 PM
Als schnelle und effiziente Programmiersprache erfreut sich Go im Bereich der Backend-Entwicklung großer Beliebtheit. Allerdings assoziieren nur wenige Menschen die Go-Sprache mit der Front-End-Entwicklung. Tatsächlich kann die Verwendung der Go-Sprache für die Front-End-Entwicklung nicht nur die Effizienz verbessern, sondern Entwicklern auch neue Horizonte eröffnen. In diesem Artikel wird die Möglichkeit der Verwendung der Go-Sprache für die Front-End-Entwicklung untersucht und spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis dieses Bereichs zu erleichtern. In der traditionellen Frontend-Entwicklung werden häufig JavaScript, HTML und CSS zum Erstellen von Benutzeroberflächen verwendet
So implementieren Sie Instant Messaging im Frontend
Oct 09, 2023 pm 02:47 PM
Zu den Methoden zur Implementierung von Instant Messaging gehören WebSocket, Long Polling, vom Server gesendete Ereignisse, WebRTC usw. Detaillierte Einführung: 1. WebSocket, das eine dauerhafte Verbindung zwischen dem Client und dem Server herstellen kann, um eine bidirektionale Kommunikation in Echtzeit zu erreichen. Das Front-End kann die WebSocket-API verwenden, um eine WebSocket-Verbindung herzustellen und Instant Messaging durch Senden und Empfangen zu erreichen 2. Long Polling, eine Technologie, die Echtzeitkommunikation usw. simuliert.
Django: Ein magisches Framework, das sowohl Front-End- als auch Back-End-Entwicklung bewältigen kann!
Jan 19, 2024 am 08:52 AM
Django: Ein magisches Framework, das sowohl Front-End- als auch Back-End-Entwicklung bewältigen kann! Django ist ein effizientes und skalierbares Webanwendungs-Framework. Es unterstützt mehrere Webentwicklungsmodelle, einschließlich MVC und MTV, und kann problemlos hochwertige Webanwendungen entwickeln. Django unterstützt nicht nur die Back-End-Entwicklung, sondern kann auch schnell Front-End-Schnittstellen erstellen und durch die Vorlagensprache eine flexible Ansichtsanzeige erreichen. Django kombiniert Front-End-Entwicklung und Back-End-Entwicklung zu einer nahtlosen Integration, sodass sich Entwickler nicht auf das Lernen spezialisieren müssen
Kombination von Golang- und Front-End-Technologie: Entdecken Sie, welche Rolle Golang im Front-End-Bereich spielt
Mar 19, 2024 pm 06:15 PM
Kombination von Golang und Front-End-Technologie: Um zu untersuchen, welche Rolle Golang im Front-End-Bereich spielt, sind spezifische Codebeispiele erforderlich. Mit der rasanten Entwicklung des Internets und mobiler Anwendungen ist die Front-End-Technologie immer wichtiger geworden. Auch in diesem Bereich kann Golang als leistungsstarke Back-End-Programmiersprache eine wichtige Rolle spielen. In diesem Artikel wird untersucht, wie Golang mit Front-End-Technologie kombiniert wird, und sein Potenzial im Front-End-Bereich anhand spezifischer Codebeispiele demonstriert. Die Rolle von Golang im Front-End-Bereich ist effizient, prägnant und leicht zu erlernen
