在Webpack中，導出文件如何不導入它導出的所有內容？

我有一個分爲「模塊」的項目。在Webpack中，導出文件如何不導入它導出的所有內容？

每個模塊都有一個導出文件從模塊導出多個文件。

按照慣例，我們只需要在模塊中暴露的內容。

例如，如果我有「頂酒吧」和「工作區」模塊，他們需要溝通，「頂酒吧」公開只有 index.js和「工作區」需要「頂酒吧」所需部分從中：

頂欄/ index.js：

export TopBarComponent from './components/TopBarComponent' 

export SomethingElse from './service/SomethingElse'

工作區/組件/ Workspace.js：

import {TopBarComponent} from 'TopBarComponent' 
....

雖然這樣的項目是非常模塊化，我的問題是，當「工作區」需要「TopBarComponent」時，「SomethingElse」會一路被導入。

任何想法如何防止與假設index.js每個模塊是一個導出文件，只有導出行？

來源

2016-08-24 Vitalik Zaidman

對於webpack，只需完全省略'index.js'。從最初定義的位置導入{TopBarComponent}。其他更簡潔的打包程序（如Webpack2，Rollup也許？）將執行樹狀擺動以擺脫未使用的依賴關係 – CodingIntrigue

我們避免從波導中的../../ TopBar/components/TopBarComponent'導入{TopBarComponent}，以便每個模塊只導出它想要導出的部分，並且有一個約定不要直接從其他模塊導入 –

我會檢查webpack2。謝謝 –

讓我簡單說一下。

ES6導入/導出應該附帶babel加載程序，因爲它仍然不支持跨瀏覽器。

默認出口應該沒有{}和其他使用{}

我已經把其中Main.js使用TopBarComponent 出口值和TopBarComponent使用index.js出口值一個基本的例子來導入。如果您遵循基本步驟，則不會有任何問題。

例如，如果你有

請參閱下面的代碼

index.js

var something; 
var data = "index Data 1" 
export data 
export default "index Data 2"

TopBarComponent.js

import defaultData , {data} from 'index' 
... 
.. 
var topbardata = "something" 
export default {key : []}; 
export topbardata ;

Main.js

import defaultData , {topbardata} from 'TopBarComponent'

你只導出你想要什麼。其餘代碼不包括在導出永不導入

來源

2016-08-24 09:29:25 ajaykumar

問題是關於「SomethingElse」被導入而沒有明確導入它。 –

唉！我指的是同樣的觀點。糾正我，如果我錯了。如果你遵循使用從另一個文件內容中導出的方法，我還沒有嘗試過既不想。即使你想導出整個文件，只是將它包裝在一個函數中，並使用導出語句使用導出明文，除了導出的內容外，你不會得到任何其他內容。導出/導入過程相當安全！ – ajaykumar

在Webpack中，導出文件如何不導入它導出的所有內容？

回答

相關問題