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

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

Index.js

import App from './App';


export default App;

就像这样

Index.js

export default App from './App.js'
69951 次浏览

如果您使用 proposal-export-default-from Babel 插件(它是 stage-1预置的一部分) ,您将能够使用以下代码重新导出默认值:

export default from "./App.js"

有关详细信息,请参阅 ECMAScript 提案


另一种方法(没有这个插件)是:

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

import App from './App';


export default App;

Something

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'

它们将作为 vsync 的 回答状态与 react一起工作。

好处2: 出口所有东西

假设您有一个导出多个项目的文件:

// App.ts
export const first = 1


export const second = 2


const final = 3


export default final

然后,你可以直接再出口它们:

// index.ts
export * from './App'

现在,您可以轻松地导入以下内容:

import final, { first, second } from './index'

奖励 # 3: *导入

可以将另一个文件导出的所有变量作为单个变量导入。

// index.ts
import * as App from './App'


App.first === 1 // true
import App from './App';
export default (App);

这在默认的“ create-response-app”应用程序中对我很有用

唯一有效的解决办法是:

import App from './App';


export default App;

如果像这样导出模块

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

然后它就不再是默认导出了,如果您试图将它作为默认导入导入,就会得到一个错误。