4

(v6) にバンドルされている React &Refluxアプリを開発していますが、es6 モジュールの依存関係の問題が発生しています。webpackbabel-loader

たとえば、還流.connect()mixinを使用するコンポーネントがあります。

import MyStore from '../stores/my-store';

const Component = React.createClass({
    mixins: [Reflux.connect(MyStore)]
});

このように各ファイルにすべてのモジュールを個別にインポートすると、すべて問題ありません。

次に、分解された import ステートメントを使用してコードを改善しようとしました。

...コンポーネント内:

//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead

...そしてjs/index.js:

import One from './one';
import Two from './two';
import Three from './three';

export { One, Two, Three };

上記の手法を使用すると、すべてのコンポーネントを 1import行でインポートできるため、アプリのソース コード ファイルはより簡潔になります。

しかし、これを使用すると、いくつかの依存関係が使用されてしまいundefinedます

同じ更新された例を使用すると...

//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead

const Component = React.createClass({
    mixins: [Reflux.connect(MyStore)]
});

...MyStoreパラメータundefinedはReflux.connectメソッドで終了します。

__webpack_require__(xxx)デバッガーでトラブルシューティングを試みましたが、生成されたバンドル内のステートメントで何が起こっているのかよくわかりません。個々のモジュールを再エクスポートするファイルbabel-loaderがある場合、webpackが必要とする循環依存関係が存在する必要があります。index.js

これを理解するのに役立つツールを知っていますか? 試してみmadgeましたが、es6 モジュールでは動作しません。どこに問題があるかを教えてくれるものは何も見つかりませんでした

4

2 に答える 2

0

importステートメントは、外部モジュールからエクスポートされた関数、オブジェクト、またはプリミティブをインポートするために使用されます。

MDN doc に従って、ディレクトリではなくモジュールをインポートできます。

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

参考URL：
https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/ es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html

回避策として、1 つのファイルを保持base.jsし、3 つのファイルすべてを含めます。

于 2015-12-02T06:44:26.100 に答える