ES6中模塊的導入和導出

我正在重構我的模塊導入導出結構。這裏的目標是通過index.js在多個文件（即UserReducer.js和Home.js）中導入UserActions。ES6中模塊的導入和導出

項目的樹形結構是這樣的：

js 
|_ modules 
| |_ user 
| | |_index.js 
| | |_UserActions.js 
| | |_UserReducer.js 
| | |_UserSagas.js 
|_ containers 
| |_ Home.js

這是modules/user/index.js內容：

import * as UserActions from './UserActions' 
import * as UserSagas from './UserSagas' 
import UserReducer from './UserReducer' 

export { UserActions, UserReducer, UserSagas }

最初的行動正在從UserActions文件直接導入，在這兩個UserReducer.js和Home.js如下：

in UserReducer.js：import * as UserActions from './UserActions'
在Home.js：import * as UserActions from 'modules/user/UserActions'

，一切都正常工作。現在我想讓這兩個導入使用上面的index.js文件。

步驟1）

內部UserReducer，我改變從導入線：

import * as UserActions from './UserActions'

到：

import { UserActions } from '.' // fetches the named export from index.js

這是工作。

步驟2）

內Home.js，我改變進口專線：

import * as UserActions from 'modules/user/UserActions'

到：

import { UserAction } from 'modules/user'

現在的WebPack不抱怨，但瀏覽器在UserReducer中拋出錯誤，UserActions未定義。

最後：

使用import { UserActions } from 'path_to_index.js'符號的作品，只要我用它只在一個地方（可能是兩個文件）。

只要我用它在這兩個地方，所有的地獄破散...

任何想法？謝謝

編輯：我意識到，上述錯誤只有在user/index.js導入和導出UserSagas時纔會發生。如果我直接從它們的文件導入UserSagas而不是將它添加到index.js，則應用程序可以正常運行。

來源

2017-02-10 Khorkhe

因此，在UserReducer.js中，您正在導入導入UserReducer.js的index.js？聽起來像循環依賴。我想這是後果。無論如何，您總是可以嘗試在已命名導入的未定義錯誤的地方導入'*'並記錄導入的內容。 – estus

用花括號，我相信它只導入指定的模塊（在這種情況下，動作）。如果是這樣，它不會導致循環dep。是的，import *按照它應該打印的動作類型和函數定義。但是我想要的輸入是未定義的日誌記錄 – Khorkhe

再次，在UserReducer.js中，您正在導入導入UserReducer.js的文件。這是循環依賴性，CD不好。即使這可以在真正的ES6模塊中按預期工作（不確定），但沒有真正的ES6模塊（ES模塊規範甚至尚未完成）。這些模塊是經過轉換的，你依賴巴貝爾如何對待CD。如果您發現問題不在CD中，請將其從等式中刪除，然後根據該問題重新提出問題。 – estus

原因@estus是正確的，即使從index.js導入另一個導出的零件也會導致循環依賴。

我想索引。js是用戶獨特的界面，但它看起來只適用於「用戶」之外的組件。在內部，導入將直接來自操作文件

來源

2017-02-13 04:09:39 Khorkhe

ES6中模塊的導入和導出

回答

相關問題