interface Web
js tutoriel
Comment introduire des bibliothèques tierces avec webpack et précautions (exemples de code)
Comment introduire des bibliothèques tierces avec webpack et précautions (exemples de code)
Ce que cet article vous apporte concerne les méthodes et les précautions (exemples de code) pour introduire des bibliothèques tierces dans webpack. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .
Généralement, nous n'avons pas à nous soucier des bibliothèques tierces que nous utilisons, car elles ne peuvent pas être trouvées dans le référentiel de gestion npm.
Si vous avez besoin d'une certaine bibliothèque, telle que jquery, vous pouvez exécuter directement la commande de script npm install jquery pour installer les dépendances requises pour ce projet
Ensuite, dans le fichier du module en utilisant jquery ; , passez Import $ from 'jquery' ou var $ = require('jquery') à introduire.
Il s'agit d'un moyen courant d'introduire des bibliothèques tierces dans des projets construits avec webpack.
Remarque : Afin de mieux démontrer l'exemple de code, l'exemple est basé sur l'article nodemon.
Cependant, selon différents scénarios, il existe des exigences différentes pour les projets construits avec webpack :
La taille du projet est suffisamment petite (cdn)
S'il s'agit de la méthode de traitement de webapck, vous pouvez vous référer à l'article webapck - Minimizing the Build Output.
Utilisez des méthodes de traitement non webapck, telles que CDN.
L'opération est également très simple. Si vous utilisez html-webpack-plugin, introduisez directement une bibliothèque tierce (telle que : jquery) sur un certain CDN (telle que : boot CDN) dans le fichier modèle. template/index.html , le code de référence est le suivant :
<!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>
Ensuite, utilisez module.js dans jquery, le code de référence est le suivant :
require('./module.css');
module.exports = function() {
$(document.body).append('<h1>hello webpack</h1>')
}Enfin , exécutez npm run test et la construction est terminée. Enfin, vous verrez les mots hello webpack dans le navigateur, avec un effet de page rouge en arrière-plan.
Utiliser des bibliothèques tierces (provide-plugin ou importations-loader) dans l'environnement global
Afin d'éviter d'utiliser des bibliothèques tierces à chaque fois, vous devez utiliser import ou require() y fait référence et peut être défini comme des variables globales.
Le plug-in intégré de ProvidePlugin de webpack peut résoudre ce problème. Pour plus de détails, veuillez vous référer à l'introduction de ProvidePlugin.
Pour éviter les conflits avec jquery référencé par cdn, lodash est utilisé ici.
Tout d'abord, installez la dépendance lodash avec la commande suivante :
yarn add lodash --dev
Ensuite, dans webpack.config.js, ajoutez le code suivant :
new webpack.ProvidePlugin({
_: 'lodash'
}),Deuxièmement , dans Ajoutez le code suivant à module.js :
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...Enfin, exécutez la commande npm run test script Une fois la construction terminée, vous pouvez ajouter 1,2,3,4,5 au fichier. page du navigateur 6,~.
Si vous souhaitez spécifier qu'une certaine fonction de l'outil de lodash peut être utilisée globalement, telle que : _.concat,
Tout d'abord, modifiez webapck.config.js comme suit, le code est comme suit :
...
new webpack.ProvidePlugin({
// _: 'lodash',
_concat: ['lodash', 'concat']
}),
...Ensuite, modifiez module.js, le code est le suivant :
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...Si vous n'aimez pas utiliser des plug-ins, vous pouvez également envisager en utilisant import-loader, qui peut également atteindre le même objectif.
Afin d'éviter toute interférence inutile, vous pouvez utiliser le trait de soulignement pour démontrer.
Tout d'abord, installez la dépendance importations-loader, la commande est la suivante :
yarn add imports-loader --dev
Ensuite, installez la dépendance de soulignement, la commande est la suivante :
yarn add underscore
Deuxièmement, dans webapck.config, ajoutez le code suivant à .js :
...
module: {
rules: [
{
test: require.resolve('underscore'),
use: 'imports-loader?_=underscore'
},
...
]
},
...Remarque : le trait de soulignement et lodash sont tous deux développés à l'aide du modèle singleton, et les noms de leurs constructeurs instanciés sont tous deux _. Afin de les distinguer, ils doivent apporter une modification à l'un d'entre eux. Il est un peu difficile pour importers-loader d'aliaser ce logo, mais provide-plugin n'a pas ce problème et peut définir un alias personnalisé.
Modifiez webpack.config.js, le code est le suivant :
new webpack.ProvidePlugin({
// _: 'lodash',
// _concat: ['lodash', 'concat'],
__: 'lodash'
}),Vous pouvez définir lodash comme __ et underscore_ pour distinguer.
Ensuite, modifiez module.js, le code est le suivant :
...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...Enfin, enregistrez tous les fichiers, vous pouvez voir des résultats similaires dans le navigateur (après enregistrement, nodemon automatiquement démarrer l'appareil de navigation).
cdn et externes
J'ai déjà rencontré des problèmes avec les externes La raison pour laquelle nous devons les expliquer en détail est que beaucoup de gens ne comprennent pas ce qu'ils sont. utilisé pour.
Reproduction de scène :
Avant, il y avait un projet qui utilisait jquery. Cette librairie étant relativement classique, elle est fréquemment référencée dans différents modules de l'application. La méthode d'utilisation est la suivante :
import $ from 'jquery'
ou
var $ = require('jquery')Le résultat est qu'une fois la construction terminée, le fichier est relativement volumineux. Pensez ensuite à utiliser un CDN, comme décrit ci-dessus. De cette façon, vous devez supprimer l'importation ou exiger des références et supprimer la dépendance jquery installée. Cependant, comme la structure du projet est compliquée et qu'il existe de nombreux modules, afin d'éviter le problème de sous-modification ou de modification manquante. provoquer des erreurs d’application. Ce qu'il faut faire?
Certaines personnes disent que si la dépendance jquery n'est pas supprimée, le but de l'utilisation de cdn n'aura aucun sens. L'utilisation d'un externe peut résoudre ce problème.
Vous pouvez ajouter le code suivant dans le fichier module.js :
...
var $ = require('jquery')
...Ensuite, enregistrez le fichier et constatez que la sortie de build affiche l'erreur suivante :
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
Le module jquery dans .js ne peut pas être analysé.
Ensuite, ajoutez le code suivant à webpack.config.js :
externals: {
jquery: 'jQuery',
jquery: '$'
},où jquery représente le jquery dans require('jquery'), et jQuery et $ représentent C'est une instanciation identifiant fourni par la bibliothèque jquery elle-même. CDNisation d'autres bibliothèques, modifications similaires à jquery.
Cependant, si vous décidez d'utiliser cdn au début du projet, n'utilisez pas var $ = require('jquery') ou importez $ from 'jquery' dans un module qui utilise jquery, même si cela n'entraînera pas de problème. une erreur. , mais si pour une raison quelconque, une dépendance jquery peut être introduite plus tard, vous devez alors utiliser var $ = require('jquery') ou importer $ from 'jquery';.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack
Jun 15, 2023 pm 06:17 PM
Vue est un excellent framework JavaScript qui peut nous aider à créer rapidement des applications Web interactives et efficaces. Vue3 est la dernière version de Vue, qui introduit de nombreuses nouvelles fonctionnalités et fonctionnalités. Webpack est actuellement l'un des packagers de modules et outils de construction JavaScript les plus populaires, qui peut nous aider à gérer diverses ressources dans nos projets. Cet article explique comment utiliser Webpack pour empaqueter et créer des applications Vue3. 1. Installez Webpack
PHP et Vue : une combinaison parfaite d'outils de développement front-end
Mar 16, 2024 pm 12:09 PM
PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.
Questions fréquemment posées par les enquêteurs front-end
Mar 19, 2024 pm 02:24 PM
Lors des entretiens de développement front-end, les questions courantes couvrent un large éventail de sujets, notamment les bases HTML/CSS, les bases JavaScript, les frameworks et les bibliothèques, l'expérience du projet, les algorithmes et les structures de données, l'optimisation des performances, les requêtes inter-domaines, l'ingénierie front-end, les modèles de conception et les nouvelles technologies et tendances. Les questions de l'intervieweur sont conçues pour évaluer les compétences techniques du candidat, son expérience en matière de projet et sa compréhension des tendances du secteur. Par conséquent, les candidats doivent être parfaitement préparés dans ces domaines pour démontrer leurs capacités et leur expertise.
Django est-il front-end ou back-end ? Vérifiez-le!
Jan 19, 2024 am 08:37 AM
Django est un framework d'application Web écrit en Python qui met l'accent sur un développement rapide et des méthodes propres. Bien que Django soit un framework Web, pour répondre à la question de savoir si Django est un front-end ou un back-end, vous devez avoir une compréhension approfondie des concepts de front-end et de back-end. Le front-end fait référence à l'interface avec laquelle les utilisateurs interagissent directement, et le back-end fait référence aux programmes côté serveur. Ils interagissent avec les données via le protocole HTTP. Lorsque le front-end et le back-end sont séparés, les programmes front-end et back-end peuvent être développés indépendamment pour mettre en œuvre respectivement la logique métier et les effets interactifs, ainsi que l'échange de données.
Partage d'expérience en développement C# : compétences en développement collaboratif front-end et back-end
Nov 23, 2023 am 10:13 AM
En tant que développeur C#, notre travail de développement comprend généralement le développement front-end et back-end. À mesure que la technologie se développe et que la complexité des projets augmente, le développement collaboratif du front-end et du back-end est devenu de plus en plus important et complexe. Cet article partagera quelques techniques de développement collaboratif front-end et back-end pour aider les développeurs C# à effectuer leur travail de développement plus efficacement. Après avoir déterminé les spécifications de l’interface, le développement collaboratif du front-end et du back-end est indissociable de l’interaction des interfaces API. Pour assurer le bon déroulement du développement collaboratif front-end et back-end, le plus important est de définir de bonnes spécifications d’interface. La spécification de l'interface implique le nom de l'interface
Qu'est-ce qu'un ESM modulaire frontal ?
Feb 25, 2024 am 11:48 AM
Qu'est-ce que l'ESM front-end ? Des exemples de code spécifiques sont requis. Dans le développement front-end, ESM fait référence à ECMAScriptModules, une méthode de développement modulaire basée sur la spécification ECMAScript. ESM apporte de nombreux avantages, tels qu'une meilleure organisation du code, l'isolation entre les modules et la réutilisabilité. Cet article présentera les concepts de base et l'utilisation d'ESM et fournira quelques exemples de code spécifiques. Le concept de base d'ESM Dans ESM, nous pouvons diviser le code en plusieurs modules, et chaque module expose certaines interfaces pour que d'autres modules puissent
Comment implémenter la messagerie instantanée sur le front-end
Oct 09, 2023 pm 02:47 PM
Les méthodes de mise en œuvre de la messagerie instantanée incluent WebSocket, Long Polling, Server-Sent Events, WebRTC, etc. Introduction détaillée : 1. WebSocket, qui peut établir une connexion persistante entre le client et le serveur pour obtenir une communication bidirectionnelle en temps réel. Le frontal peut utiliser l'API WebSocket pour créer une connexion WebSocket et obtenir une messagerie instantanée en envoyant et en recevant. messages 2. Long Polling, une technologie qui simule la communication en temps réel, etc.
Explorer la technologie front-end du langage Go : une nouvelle vision du développement front-end
Mar 28, 2024 pm 01:06 PM
En tant que langage de programmation rapide et efficace, le langage Go est très populaire dans le domaine du développement back-end. Cependant, peu de gens associent le langage Go au développement front-end. En fait, l’utilisation du langage Go pour le développement front-end peut non seulement améliorer l’efficacité, mais également ouvrir de nouveaux horizons aux développeurs. Cet article explorera la possibilité d'utiliser le langage Go pour le développement front-end et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre ce domaine. Dans le développement front-end traditionnel, JavaScript, HTML et CSS sont souvent utilisés pour créer des interfaces utilisateur.
