[解決済み] webpack、ES6、ReactJSを使ったJavaScriptファイルのインポートと関数呼び出し

質問

非常に簡単だと思われることをしようとしています。私は既存のJavaScriptライブラリをインポートし、その関数を呼び出したいと思っています。 例えば、私はblah.jsをインポートし、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;

ただ、これを動作させるためには、どんな魔法のような組み合わせが必要なのかが気になります。 もしかしたら、私がポイントを逃しているだけかもしれません。 この例では、エラー "TypeError が発生します。_blah.blah is undefined"と表示されます。

どのように解決するのですか?

ネームドエクスポートです。

というファイルを作成したとしましょう。 utils.js というファイルを作成し、他のモジュール（例えばReactコンポーネント）で利用できるようにしたいユーティリティ関数が書かれているとします。そして、それぞれの関数を という名前のエクスポート :

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

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

utils.jsがReactコンポーネントと同じディレクトリにあると仮定すると、そのexportsはこのように使うことができます。

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

あるいは、お望みであれば、モジュールの内容全体を共通の名前空間の下に置いてください。

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

デフォルトの輸出品です。

一方、1つのことしかしないモジュール（Reactクラス、通常の関数、定数、その他何でも）があり、そのことを他の人が利用できるようにしたい場合、そのモジュールに対して デフォルトのエクスポート . 例えば、次のようなファイルがあるとします。 log.js があり、呼び出された引数をログアウトする関数がひとつだけあるとします。

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

これでこんな風に使えるようになりました。

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

を呼び出す必要はありません。 log と呼ぶ必要はなく、好きなように呼べばいいのです。

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

合体しました。

モジュールはデフォルトのエクスポート(最大1)と、名前付きエクスポート(1つずつインポート、または * を使ったエイリアス)を持つことができます。Reactは実際にこれを持っています、考えてみてください。

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