在 ES 6 模块中重新导出默认值

Posted 2023-02-22

【中文标题】在 ES 6 模块中重新导出默认值

【英文标题】：Re-export default in ES 6 modules

【发布时间】：2017-02-21 07:05:46

【问题描述】：

在 ES6 中，是否可以缩短以下代码。我有一个App.js 文件和一个index.js。

index.js

import App from './App';

export default App;

类似的东西

index.js

export default App from './App.js'

【问题讨论】：

参考：github.com/tc39/proposal-export-default-from

【参考方案1】：

如果您使用proposal-export-default-from Babel plugin（它是stage-1 preset 的一部分），您将能够使用以下代码重新导出默认值：

export default from "./App.js"

欲了解更多信息，请参阅the ECMAScript proposal。

---

另一种方式（没有这个插件）是：

export  default as App  from "./App.js"

---

当单独的文件有自己的export 时，以上是一种非常常见的做法，它们具有所有共同点，例如utils，因此，例如，如果想要导入 3 实用程序函数，而不必编写多个导入：

import util_a from 'utils/util_a' 
import util_b from 'utils/util_b' 
import util_c from 'utils/util_c' 

可以在一行中导入任何实用程序：

import  util_a, util_b , util_c  from 'utils' 

通过在/utils 文件夹中创建一个index.js 文件并导入那里所有实用程序的所有默认值并重新导出，因此index 文件将充当与该文件相关的所有导入的“网关”文件夹。

【讨论】：

export default as MyModule from "./my-modue.js"; const oneSmallFunction = MyModule 加倍努力。

@AlanDong 您的建议对我来说似乎是一个非常有效的解决方案。您为什么不将其发布为答案？

【参考方案2】：

这与之前的答案有点重复，但要澄清两个选项的区别：

1.默认导出

（这似乎是 OP 想要的）

export  default  from './App'

// in a different file
import App from './index'

2。命名导出

export  default as App  from './App'

// in another file
import  App  from './index'

这些将与 react 作为 vsync 的 answer 状态一起使用。

【参考方案3】：

import App from './App';

export default App;

⬇

Babel 7（带有@babel/preset-react）可以转换以下内容：

export  default as App  from './App.js';

---

相关讨论：

TC39 提案： https://github.com/tc39/proposal-export-default-from#common-concerns

【参考方案4】：

唯一可行的解​​决方案是：

import App from './App';

export default App;

如果你像这样导出你的模块

export  default as App  from './App.js';

那么它不再是默认导出，如果您尝试将其导入为默认导入，则会出现错误。

【参考方案5】：

import App from './App';
export default (App);

这适用于我在默认的“create-react-app”应用程序中