Importer fichier JavaScript et d'appeler les fonctions à l'aide de webpack, ES6, ReactJS

Question

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;

Je 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".

Answer 1

Nommé à l'exportation:

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 a nommé à l'exportation:

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

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

En supposant que utils.js situé dans le même répertoire que votre Réagissent composant, vous pouvez utiliser ses exportations comme ceci:

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, tout le contenu du module sous un même espace de noms:

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

Par défaut, les 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 une valeur par défaut à l'exportation. Disons que nous avons un fichier log.js, avec une seule fonction qui enregistre tout ce que l'argument qu'il est appelé à:

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

Cela peut maintenant être utilisée comme ceci:

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

Vous n'avez pas à appeler c' log lors de l'importation, vous pouvez l'appeler ce que vous voulez:

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

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 React, { Component, PropTypes } from 'react';

Answer 2

import * as utils from './utils.js'; 

Si vous le faites ci-dessus, vous serez en mesure d'utiliser les fonctions utils.js comme

utils.someFunction()