web-dev-qa-db-fra.com

Importer un fichier JavaScript et appeler des fonctions à l'aide de Webpack, ES6, ReactJS

Essayer de faire quelque chose que je pense serait très simple. J'aimerais importer une bibliothèque JavaScript existante, puis appeler ses fonctions. Ainsi, par exemple, j'aimerais importer blah.js, puis appeler blah ().

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;

Je me demandais simplement quelle combinaison magique de choses je devais faire pour que cela fonctionne. Peut-être que je manque juste le point. L'exemple donne l'erreur "TypeError: _blah.blah n'est pas défini".

reactjsecmascript-6webpack
61
user1686620

Exportations nommées:

Supposons que vous créez un fichier nommé utils.js, avec les fonctions utilitaires que vous souhaitez rendre disponibles pour d'autres modules (par exemple, un composant React). Ensuite, vous feriez de chaque fonction un nommé export :

export function add(x, y) {
  return x + y
}

export function mutiply(x, y) {
  return x * y
}

En supposant que utils.js se trouve dans le même répertoire que votre composant React, vous pouvez utiliser ses exportations de la manière suivante:

import { add, multiply } from './utils.js';
...
add(2, 3) // Can be called wherever in your component, and would return 5.

Ou, si vous préférez, placez tout le contenu du module sous un espace de noms commun:

import * as utils from './utils.js'; 
...
utils.multiply(2,3)

Exportations par défaut:

Par contre, si vous avez un module qui ne fait qu’une chose (par exemple, une classe React, une fonction normale, une constante ou toute autre chose) et que vous voulez rendre cette chose accessible aux autres, vous pouvez utilisez un exportation par défaut. Disons que nous avons un fichier log.js, avec une seule fonction qui déconnecte l'argument avec lequel il est appelé:

export default function log(message) {
  console.log(message);
}

Cela peut maintenant être utilisé comme ceci:

import log from './log.js';
...
log('test') // Would print 'test' in the console.

Vous n'êtes pas obligé de l'appeler log lorsque vous l'importez, vous pouvez l'appeler comme vous le souhaitez:

import logToConsole from './log.js';
...
logToConsole('test') // Would also print 'test' in the console.

Combiné:

Un module peut avoir à la fois une exportation par défaut (max 1) et des exportations nommées (importées une par une ou en utilisant * avec un alias). React a réellement ceci, considérons:

import React, { Component, PropTypes } from 'react';
132
tobiasandersen
import * as utils from './utils.js';

Si vous faites ce qui précède, vous pourrez utiliser les fonctions de utils.js en tant que

utils.someFunction()
3
KalC