51

バベルで反応。imports と module.exports と混同しています。ES6コードをES5に変換するとき、バベルはインポートとエクスポートをそれぞれrequireとmodule.exportsに変換すると思います。

あるモジュールから関数をエクスポートし、その関数を別のモジュールにインポートすると、コードは正常に実行されます。しかし、module.exports を使用して関数をエクスポートし、「import」を使用してインポートすると、実行時に関数ではないというエラーがスローされます。

私は例を調理しました。

// Tiger.js
function Tiger() {
    function roar(terrian){
        console.log('Hey i am in ' +  terrian + ' and i am roaing');
    };
    return roar;
}

module.exports = Tiger;

// animal.js
import { Tiger } from './animals';

var animal = Tiger();
animal("jungle");

プリセットes2015でbabelを使用してトランスコンパイルしました。これにより、次のエラーが表示されます

キャッチされていない TypeError: (0 , _animals.Tiger) は関数ではありません

しかし、 を削除して にmodule.exports = Tiger;置き換えると、export { Tiger };正常に動作します。

ここで何が欠けていますか??

編集: モジュールバンドラーとして browserify を使用しています。

4

3 に答える 3

58

export { Tiger }と同等module.exports.Tiger = Tigerです。

逆に、module.exports = Tigerと同等export default Tigerです。

したがって、使用module.exports = Tigerしてから試みると、import { Tiger } from './animals'効果的に を求めていることになりますTiger.Tiger。

于 2016-01-14T16:52:35.573 に答える
37

インポートする場合:

module.exports = Tiger

次の構造を使用できます。

import * as Tiger from './animals'

それはうまくいくでしょう。

別のオプションは、@Matt Molnar で説明されているようにエクスポートを変更することですが、インポートされたコードの作成者である場合にのみ可能です。

于 2018-05-09T20:31:30.403 に答える