web-dev-qa-db-fra.com

comment utiliser webpack pour charger CDN ou lib externe javascript du fournisseur dans un fichier js et non dans un fichier html

J'utilise le kit de démarrage réactif pour la programmation côté client. Il utilise react et webpack. Aucun index.html ou aucun code HTML à éditer, tous les fichiers js. Ma question est si je veux charger une librairie js du vendeur depuis le cloud, comment puis-je le faire?

Ce serait facile à faire dans un fichier HTML. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

Cependant, dans le fichier js, il utilise uniquement les packages installés par npm. Comment puis-je importer la bibliothèque ci-dessus sans fichier HTML? J'ai essayé d'importer et d'exiger, ils ne fonctionnent que pour les fichiers locaux.

mise à jour 10/21/15 Jusqu'à présent, j'ai essayé deux directions, ni l'idéal.

  1. @minheq oui, il existe un fichier html en quelque sorte pour le kit de démarrage réactif. C'est html.js sous src/components/Html. Je peux mettre cloud lib et toutes ses dépendances comme ceci:
        <div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
        <script src="/app.js"></script>
        <script dangerouslySetInnerHTML={this.trackingCode()} />
    </body>

Les bonnes nouvelles sont que cela fonctionne, je n'ai besoin de rien faire d'autre dans le fichier js, aucune importation ou besoin. Cependant, j'ai maintenant deux bibliothèques jquery chargées de différentes manières. L'un ici, l'autre via NPM et WebPack. Je me demande si cela me causera des ennuis plus tard. Le routage de réaction que j'utilise me donne l'erreur "Variable non définie" si je tape un chemin d'accès nul dans la fenêtre du navigateur en raison du chargement côté serveur, je suppose. Donc, cette solution n'est pas très bonne.

  1. Utiliser la fonctionnalité Webpack externals. Ceci est documenté comme: lien . "Vous pouvez également utiliser les options externes pour les applications lorsque vous souhaitez importer une API existante dans le bundle. Par exemple, vous souhaitez utiliser jquery à partir de CDN (balise distincte) tout en voulant exiger (" jquery ") dans votre bundle. spécifiez-le comme externe: {externals: {jquery: "jQuery"}}. " Cependant, la documentation que j'ai trouvée à quelques endroits est difficile à comprendre. Jusqu'à présent, je ne sais pas comment l'utiliser pour remplacer <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> en HTML.
javascriptnode.jsreactjswebpack
40
jay.m

Il existe un fichier html qui est définitivement utilisé pour servir aux utilisateurs avec votre bundle js attaché. Probablement vous pourriez attacher la balise de script dans ce fichier html

0
minheq

externals n'est pas destiné à vous permettre de le faire. Cela signifie "ne compilez pas cette ressource dans le dernier paquet car je l'inclurai moi-même"

Ce dont vous avez besoin est une implémentation de chargeur de script telle que script.js . J'ai également écrit une application simple pour comparer différentes implémentations de chargeur de script: lien .

17
Tom Chen
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});
14
Johnny

Vous pouvez créer une balise de script dans votre JS en tant que

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
7
Jack Spektor

Utilisez les externals :

externals vous permet de spécifier pour votre bibliothèque des dépendances qui ne sont pas résolues par webpack, mais deviennent des dépendances de la sortie. Cela signifie qu'ils sont importés de l'environnement pendant l'exécution.

3
Griffith