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

Question

我有一个分为“模块”的项目。

每个模块都有一个导出文件，用于从模块导出多个文件。

按照惯例，我们只需要模块中公开的内容。

例如，如果我有“Top Bar”和“Workspace”模块并且它们需要进行通信，“Top Bar”只公开 index.js 而“Workspace”需要所需的部分来自它的“顶栏”:

TopBar/index.js:

export TopBarComponent from './components/TopBarComponent'

export SomethingElse from './service/SomethingElse'

工作区/组件/Workspace.js:

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

虽然这样项目是非常模块化的，但我的问题是当“Workspace”需要“TopBarComponent”时，“SomethingElse”会被导入。

假设每个模块的 index.js 是一个导出文件并且只有导出行，关于如何防止它的任何想法？

Answer 1

Let me put it simple.

1. ES6 import/export should be accompanied by babel loader as it is yet not supported across browsers.
2. Default exports should be imported without {} and others using {}

I have put a basic example in which Main.js uses TopBarComponent exported values and TopBarComponent uses index.js exported values. If you follow the basic steps there shouldn't be any problem.

Eg. if you have

请看下面的代码

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'

You are only exporting what you want. The rest code not included in export never gets imported