web-dev-qa-db-ja.com

Module.exportsおよびes6 Import

バベルと反応します。私はimportsとmodule.exportsとこの混乱を持っています。 ES6コードをES5に変換する際にbabelがインポートとエクスポートをそれぞれrequireとmodule.exportsに変換すると仮定します。

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

私は例を作り上げました。

// 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を使用してトランスコンパイルしました。これは私に次のエラーを与えます

Uncaught TypeError：（0、_animals.Tiger）は関数ではありません

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

ここに何が欠けていますか？

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

babeljses6-module-loader
21
Nani

export { Tiger }はmodule.exports.Tiger = Tigerと同等です。逆に、module.exports = Tigerはexport default Tigerと同等です。したがって、module.exports = Tigerを使用してからimport { Tiger } from './animals'を試みると、実質的にTiger.Tigerを要求していることになります。

25
Matt Molnar

インポートする場合：

module.exports = Tiger

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

import * as Tiger from './animals'

その後、動作します。

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

16
jmarceli

私にとって、これをwebpack.config.tsに適用しようとしています。上記は機能しませんimport * as X from "./X";別のエラーが表示されます。

TypeScriptのwebpack.config.tsのes6インポートを使用したModule.exports

enter image description here

const getConfig = ( appDir: string, distDir: string, env: any, args: any ): webpack.Configuration => {
    const config: webpack.Configuration = {
        return config;
    };
};

module.exports = getConfig;
0
Sigex