在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每个模块是一个导出文件，只有导出行？

对于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'

你只导出你想要什么。其余代码不包括在导出永不导入

问题是关于“SomethingElse”被导入而没有明确导入它。 –

唉！我指的是同样的观点。纠正我，如果我错了。如果你遵循使用从另一个文件内容中导出的方法，我还没有尝试过既不想。即使你想导出整个文件，只是将它包装在一个函数中，并使用导出语句使用导出明文，除了导出的内容外，你不会得到任何其他内容。导出/导入过程相当安全！ – ajaykumar

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

相关推荐