Puis-je utiliser un ES6/2015 module d'importation de définir une référence dans le "global" de la portée?
J'ai cette situation où je suis en train d'importer une bibliothèque existante, que je vais appeler troublesome
(à l'aide de Webpack/Babel FWIW) et il a une référence mondiale pour jQuery
dans lequel je suis en train de les résoudre à l'aide du module de la syntaxe.
J'ai importé avec succès jquery dans le "local" champ d'application d'un module, via:
import jQuery from 'jquery'
j'ai donc essayé:
import jQuery from 'jquery'
import 'troublesome'
mais peut-être pas étonnant, j'obtiens quelque chose comme jQuery is not a function
coup de pied arrière de troublesome.js
J'ai essayé ceci:
System.import('jquery')
.then(jQuery => {
window.jQuery = jQuery
})
import 'troublesome'
mais, il s'avère que System.import
est de la partie, soi-disant, 'module loader' spec, qui a été retiré de l'es6/2015 specs, de sorte qu'il n'est pas fourni par Babel. Il y a un poly-remplir, mais Webpack ne serait pas en mesure de gérer la dynamique des importations réalisées via des appels à System.import
de toute façon.
mais... si je l'appelle, les fichiers de script dans index.html comme:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>
la référence à jQuery
est résolu dans troublesome.js
et les choses sont bonnes,
mais je préfère éviter la balise de script route comme webpack n'est pas gérer ceux-ci.
Peut-on recommander un décent stratégie pour faire face à de tels scénarios?
mise à jour
avec quelques conseils de @TN1ck, j'ai été finalement en mesure d'identifier un Webpack centrée sur la solution, en utilisant la importations-chargeur
La configuration de cette solution ressemble à quelque chose comme ceci:
//...
module: {
loaders: [
//...
{
test: require.resolve('troublesome'),
loader: "imports?jQuery=jquery,$=jquery"
}
]
}
- Êtes-vous juste essayer de faire de
jquery
disponible danstroublesome
? - Avez-vous essayez d'assigner jQuery pour objet de fenêtre? Si la fenêtre.jQuery = jQuery?
- jquery doit être dans le format approprié afin que vous puissiez importer comme ça. En d'autres termes, vous devrez peut-être modifier votre local jquery et de l'exporter en tant que ES6 module.
Vous devez vous connecter pour publier un commentaire.
Calage des modules est le chemin à parcourir: http://webpack.github.io/docs/shimming-modules.html
Je cite à partir de la page:
plugin ProvidePlugin
Ce plugin permet d'un module disponible en tant que variable dans chaque module. Le module est requis uniquement si vous utilisez la variable.
Exemple: Faire $ et jQuery disponibles dans chaque module sans écrire
require("jquery")
.Pour l'utiliser avec votre webpack-config juste ajouter cet objet à un tableau appelé plugins dans la config:
ProvidePlugin
est dans la même solution de la famille, de sorte que vous def méritent le creds pour me pointer dans la bonne direction.module.exports = { entry: xxx, output: ... }
. Juste ajouterplugins: [new webpack.ProvidePlugin({$: 'jquery, ...})]
au dictionnaire. Pour plus d'informations sur la façon d'utiliser webpack, découvrez ce guide de pete chasse.Pour es6/2015 j'ai effectué les opérations suivantes.
Alors vous pouvez l'utiliser comme normal
Espère que cette aide.
Importation
jQuery
dans votre module n'est pas disponible pour'troublesome'
. Au lieu de cela, vous pourriez créer un wrapper fin de module pour'troublesome'
qui fournitjQuery
et tout autre "globals".troublesome-module.js:
Ensuite dans votre code, vous devriez être en mesure de
J'ai eu un problème similaire, à l'aide de jspm et dygraphs. La façon dont je l'ai résolu était d'utiliser le chargement dynamique comme vous avez tenté à l'aide de
System.import
mais l'important était de la chaîne de charge de chaque année consécutive, une "partie" à l'aide deSystem.import
de nouveau à l'intérieur de la promesse onfulfillment gestionnaire (à l'époque) après le réglage de l'espace de noms global variable. Dans mon scénario, j'ai effectivement eu à avoir importation de plusieurs étapes séparées entrethen
gestionnaires.La raison qu'il ne fonctionne pas avec jspm, et probablement pourquoi il n'a pas travailler pour vous aussi, c'est que le
import ... from ...
syntaxe est évalué avant le code, et certainement avantSystem.import
qui de async.Dans votre cas, il pourrait être aussi simple que:
Également de noter que la
System
chargeur de module de recommandation a été laissée en dehors de la finale ES6 spécification, et un nouveau chargeur de spec est en cours de rédaction.npm install import-loader
.import 'troublesome'
avecimport 'imports?jQuery=jquery,$=jquery!troublesome
.À mon avis, c'est la solution la plus simple à votre question. Il est similaire à la réponse que vous avez écrit dans votre question @TN1ck, mais sans modifier votre webpack config. Pour en savoir plus, voir: https://github.com/webpack/imports-loader
De calage est bon et il y a différentes façons de régler ce, mais aussi par ma réponse ici, le plus simple est en fait tout simplement de revenir à l'utilisation d'exiger pour le chargement de la bibliothèque, qui exige que le mondial de dépendance - alors assurez-vous que votre fenêtre. l'affectation est avant qui nécessitent, et ils sont tous les deux après vos autres importations, et votre commande doit rester comme prévu. Le problème est causé par Babel de levage importations, telles qu'elles ont toutes été exécuté avant tout autre code.