Comment introduire des bibliothèques tierces avec webpack et précautions (exemples de code)-js tutoriel-php.cn

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>

Copier après la connexion

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>')    
}

Copier après la connexion

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

Copier après la connexion

Ensuite, dans webpack.config.js, ajoutez le code suivant :

new webpack.ProvidePlugin({
        _: 'lodash'
}),

Copier après la connexion

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

Copier après la connexion

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']
}),
...

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Ensuite, installez la dépendance de soulignement, la commande est la suivante :

yarn add underscore

Copier après la connexion

Deuxièmement, dans webapck.config, ajoutez le code suivant à .js :

...
module: {
        rules: [
                {
                        test: require.resolve('underscore'),
                        use: 'imports-loader?_=underscore'
                },
                ...
        ]
},
...

Copier après la connexion

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'
}),

Copier après la connexion

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

Copier après la connexion

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'

Copier après la connexion

var $ = require('jquery')

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Le module jquery dans .js ne peut pas être analysé.

Ensuite, ajoutez le code suivant à webpack.config.js :

externals: { 
    jquery: 'jQuery',
    jquery: '$'
},

Copier après la connexion

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

Code source de référence

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!