在zustand.js中重新导出*和{ default }有什么意义？

Question

我正在尝试阅读和理解zustand的源代码，并在index.ts中遇到这段代码。

export * from './vanilla'
export * from './react'
export { default as createStore } from './vanilla'
export { default } from './react'

第3行和第4行有什么意义？我认为这可能是为了允许以这两种方式导入功能。

import create from 'zustand'

这条路

import { create } from 'zustand'

但是第二个import抛出错误：

Module '"zustand"' has no exported member 'create'. Did you mean to use 'import create from "zustand"' instead?

编辑:我知道要正确导入create函数需要做些什么。我只是不明白为什么index.ts需要第3行和第4行。

Answer 1

这样做的目的是：

export { default as createStore } from './vanilla'

是-它从该文件中获取默认导出，并在此文件中以名称createStore导出它。

这样做的目的是：

export { default } from './react'

是-它从该文件中获取默认导出，在此文件中，导出为默认导出。

如果没有第3行和第4行，上述情况就不会发生--既不会从vanilla默认导出，也不会在这里重新导出react。(只执行名为export * from的出口再出口)

create不是vanilla或react文件中的命名导出，第3行和第4行都不创建名为create的导出，因此不允许import { create } from 'zustand' (试图检索名为create的导出)。

在消费祖站时，要导入香草的默认导出，您需要执行以下操作

import { createStore } from 'zustand';
// this can be renamed when importing with `as` if desired

要导入React的默认导出，需要执行以下操作

import create from 'zustand';
// this can be named whatever you want, since it's a default import

如果第3行和第4行不存在，上述两个代码段都不能工作，因为来自react和vanilla的默认导出不会被重新导出。