创建一个可以再次导入并立即导出组件的文件

Question

不知道为什么这不起作用。 我曾经有

// file 1
import Box from '@/components/Box'
import Popup from '@/components/Popup'

const MDXComponents = {
  Box,
  Popup
}

// using MDXComponents somewhere in file 1

现在我想外包 MDXComponents 对象，因为它变得太大了。 所以我创建了一个新文件：

// file 2
import Box from '@/components/Box'
import Popup from '@/components/Popup'

export default {
  Box,
  Popup
}

然后回到文件 1 我做：

// file 1
import * as MDXComponents from './file2'

// using MDXComponents somewhere in file 1

它不允许我这样做，但我不知道为什么？

Answer 1

当你这样做时：

export default {
  Box,
  Popup
};

您将默认导出设置为具有 2 个属性的新对象。 您需要像这样导入：

import MDXComponents from './file2';
// And then destructure the object like any normal object.
// You can't do import {} in this case, you get the full object.
const { Box } = MDXComponents;

当你这样做时：

export {
  Box,
  Popup
};

您创建两个可以导入的命名导出，如下所示：

// import all named exports
import * as MDXComponents from './file2';
// or just one individually
import { Box } from './file2';

对于这个用例，还有一个快捷方式：

export { default as Box } from '@/components/Box';
export { default as Popup } from '@/components/Popup';

// If a module has named exports (not just a default export) 
// and you want to export them all:
export * from 'some-module';

// Or just some:
export { someOtherThing } from '@/components/Box';
export { default as Popup, someOtherThing } from '@/components/Popup';