2016-08-24 70 views
0

我有一个分为“模块”的项目。在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每个模块是一个导出文件,只有导出行?

+0

对于webpack,只需完全省略'index.js'。从最初定义的位置导入{TopBarComponent}。其他更简洁的打包程序(如Webpack2,Rollup也许?)将执行树状摆动以摆脱未使用的依赖关系 – CodingIntrigue

+0

我们避免从波导中的../../ TopBar/components/TopBarComponent'导入{TopBarComponent},以便每个模块只导出它想要导出的部分,并且有一个约定不要直接从其他模块导入 –

+0

我会检查webpack2。谢谢 –

回答

0

让我简单说一下。

  1. ES6导入/导出应该附带babel加载程序,因为它仍然不支持跨浏览器。
  2. 默认出口应该没有{}和其他使用{}

我已经把其中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' 

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

+0

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

+0

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