Importieren Sie JavaScript-Datei- und Aufruffunktionen mit Webpack, ES6, ReactJS

Der Versuch, etwas zu tun, würde ich für sehr einfach halten. Ich möchte eine vorhandene JavaScript-Bibliothek importieren und dann deren Funktionen aufrufen. So möchte ich zum Beispiel blah.js importieren und dann blah () aufrufen.

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;

Ich frage mich nur, welche magische Kombination von Dingen ich tun muss, damit dies funktioniert. Vielleicht verpasse ich nur den Punkt. Das Beispiel gibt den Fehler "TypeError: _blah.blah ist undefiniert".

Benannte Exporte:

Angenommen, Sie erstellen eine Datei mit dem Namen " utils.jsDienstprogrammfunktionen", die Sie für andere Module (z. B. eine React-Komponente) verfügbar machen möchten. Dann würden Sie jede Funktion zu einem benannten Export machen :

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

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

Angenommen, utils.js befindet sich im selben Verzeichnis wie Ihre React-Komponente, können Sie die Exporte wie folgt verwenden:

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

Wenn Sie möchten, platzieren Sie den gesamten Inhalt des Moduls unter einem gemeinsamen Namespace:

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

Standardexporte:

Wenn Sie andererseits ein Modul haben, das nur eines ausführt (eine React-Klasse, eine normale Funktion, eine Konstante oder etwas anderes) und dieses Ding anderen zur Verfügung stellen möchten, können Sie einen Standardexport verwenden . Angenommen, wir haben eine Datei log.jsmit nur einer Funktion, die das Argument abmeldet, mit dem sie aufgerufen wird:

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

Dies kann jetzt folgendermaßen verwendet werden:

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

Sie müssen es nicht aufrufen, logwenn Sie es importieren, Sie können es tatsächlich so aufrufen, wie Sie möchten:

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

Kombiniert:

Ein Modul kann sowohl einen Standardexport (max. 1) als auch benannte Exporte haben (entweder einzeln importiert oder *mit einem Alias ​​verwendet). React hat tatsächlich Folgendes:

import React, { Component, PropTypes } from 'react';

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

Wenn Sie die oben genannten Schritte ausführen, können Sie Funktionen in utils.js as verwenden

utils.someFunction()