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

76

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

user1686620
quelle
1
Ohne ein Beispiel für die Datei, die Sie importieren möchten, ist dies nicht zu beantworten. An dem von Ihnen geposteten Code ist nichts auszusetzen, aber ob er funktioniert, hängt davon ab, aus was exportiert wird blah.js.
Loganfsmyth
Checken Sie ein, blah.jswenn Sie den Export des blahObjekts benannt haben. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Everettss

Antworten:

162

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';
Tobiasandersen
quelle
Sinnvoll, aber jetzt erhalte ich folgende Fehler: SyntaxError: Exportdeklarationen werden möglicherweise nur auf der obersten Ebene eines Moduls
angezeigt
Dann exportieren Sie wahrscheinlich Dinge in andere Blöcke. Wie der Fehler lautet, müssen Sie dies in der obersten Ebene tun (dh außerhalb von Blöcken).
Tobiasandersen
Wie kann ich nur util importieren und Funktionen wie util.add (), util.multiply () aufrufen?
Jiawen
@jiawen Du kannst tun: import * as util from './utils.js'; (Ich habe dies auch zur Antwort hinzugefügt).
Tobiasandersen
Oh, das habe ich verpasst. Vielen Dank!
Jiawen
4
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()
KalC
quelle