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

Re-export default in ES 6 modules

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

index.js

import App from './App';

export default App;

像这样

index.js

export default App from './App.js'

如果您使用 proposal-export-default-from Babel plugin (which is a part of stage-1 preset)，您将能够使用以下代码重新导出默认值：

export default from "./App.js"

有关详细信息，请参阅 the ECMAScript proposal。

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

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

以上是一种非常常见的做法，当单独的文件（每个文件都有自己的 export）具有所有共同点时，例如 utils，例如，如果有人想要导入 3 个 utility 函数，而不必编写多个 imports:

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 文件将作为“网关”用于与该文件夹相关的所有导入。

import App from './App';

export default App;

⬇

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

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

相关讨论：

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

1.默认导出

（这似乎是OP想要的）

// index.ts
export { default } from './App'

然后，在不同的文件中：

import App from './index'

2。命名导出

export { default as App } from './App'

然后，在另一个文件中：

import { App } from './index'

奖励：命名 → 默认导出

如果 ./App 使用命名导出，但您想将其重新导出为默认导出，您也可以这样做：

export { App as default } from './App'

然后，在另一个文件中：

import App from './index'

这些将与 react 一起工作，因为 vsync 的 answer 状态。

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

这在默认情况下对我有用 'create-react-app' 应用程序

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

import App from './App';

export default App;

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

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

然后它不再是默认导出，如果您尝试将其作为默认导入导入，您将收到错误消息。