Importer fichier JavaScript et d'appeler les fonctions à l'aide de webpack, ES6, ReactJS
Essayer de faire quelque chose que je pense serait très simple. Je voudrais importer un bibliothèque JavaScript et ensuite l'appeler de ses fonctions. Ainsi, par exemple, je voudrais importer blah.js et puis d'appeler bla().
import React from 'react';
import {blah} from 'blah/js/blah.js';
class MyClass extends React.Component {
constructor() {
super();
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize() {
blah.blah();
}
render() {
....
}
}
export default MyClass;
Me demandais ce que la combinaison magique des choses que j'ai à faire pour faire ce travail. Peut-être que je suis juste à côté de l'essentiel. L'exemple donne l'erreur "TypeError: _blah.bla est pas défini".
- Sans un exemple de fichier que vous tentez d'importer, c'est irréfutable. Il n'y a rien de mal avec le code que vous avez posté, mais si ça marche dépendrait de ce qui est exporté à partir de
blah.js
. - Vérifiez dans
blah.js
si vous avez nommée l'exportation deblah
objet. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
Vous devez vous connecter pour publier un commentaire.
Nommé exportations:
Disons que vous créez un fichier appelé
utils.js
, avec les fonctions de l'utilitaire que vous souhaitez rendre disponible pour les autres modules (par exemple, un Réagir composant). Ensuite, vous faites de chaque fonction un nommé à l'exportation:En supposant que utils.js situé dans le même répertoire que votre Réagissent composant, vous pouvez utiliser ses exportations comme ceci:
Ou si vous préférez, tout le contenu du module sous un même espace de noms:
Par défaut exportations:
Si vous avez d'autre part, ont un module qui ne fait qu'une chose (peut être une Réagir la classe, une fonction normale, une constante, ou quoi que ce soit d'autre) et en faire une chose à la disposition des autres, vous pouvez utiliser un d'exportation par défaut. Disons que nous avons un fichier
log.js
, avec une seule fonction qui enregistre tout ce que l'argument qu'il est appelé à:Cela peut maintenant être utilisée comme ceci:
Vous n'avez pas à appeler
log
lors de l'importation, vous pouvez l'appeler ce que vous voulez:Combiné:
Un module peut avoir à la fois un défaut d'exportation (max 1), et nommé exportations (importés, soit un par un, ou à l'aide de
*
avec un alias). Réagir en fait a présent, pensez à:import * as util from './utils.js';
(j'ai ajouté ceci à la réponse ainsi).import * as utils from './utils.js';
qui a le mieux fonctionné pour moiSi vous le faites ci-dessus, vous serez en mesure d'utiliser les fonctions utils.js comme