導入JavaScript文件具有相同名稱的目錄他們內部

在我的反應，的WebPack項目，我有反應的組分的以下項目結構：導入JavaScript文件具有相同名稱的目錄他們內部

Component/ 
├── Component.jsx 
├── index.jsx 
└── styles.css

的index.jsx文件只是進口和出口Component.jsx;是在需要它的文件的原因，它允許以下的用法：

import Component from '../Component'

，而不是

import Component from '../Component/Component'

然而，這似乎像它可能是一個不必要的額外步驟，要求所有新組件跟隨。

考慮到這一點，我的問題是：我能擁有兩全其美嗎？我希望能夠在我的目錄中只有Component.jsx和styles.css，但不必在我的import聲明中使用該名稱兩次。

來源

2017-02-28 alanbuchanan

'從'./''導入組件？ –

讓我建議你如下結構我個人很喜歡：。

你的組件樹狀結構（作爲一個例子每個組件都有一個不同的文件夾結構，它是由你來保持它的整潔Index.jsx在組件文件夾只是標準化對這些組件進行訪問任何需要他們）：

內容的 components/index.jsx

export Butter from './Butter/index.jsx'; 
export Beets from './Beets/Beets.jsx'; 
export Cabbage from './Cabbage/index.jsx'; 
export Meat from './Meat.jsx';

小號

src/components/ 
    Butter/ 
     Butter.jsx 
     index.jsx 
    Beets/ 
     Beets.jsx 
    Cabbage/ 
     index.jsx 
    Meat.jsx 
index.jsx

青梅容器Borscht.jsx項目中的其他地方，它使用這些組件

import { 
    Beets, 
    Cabbage, 
} from 'src/components';

來源

2017-02-28 22:12:40 anvk

如果你的文件夾已經告訴你這是組件名稱，則不需要再次把它裏面的文件名。我使用這種方法。

對於我們來說，所有現代編輯者已經通過在標籤中添加文件夾名稱，解決了兩個相同名稱（ComponentA/index.jsx和ComponentB/index.jsx）的問題。

請注意，這是一個Vue的組成部分，但它的陣營同樣的事情。

來源

2017-02-28 22:30:21

導入JavaScript文件具有相同名稱的目錄他們內部

回答

相關問題