【问题标题】:Re-export default in ES 6 modules在 ES 6 模块中重新导出默认值
【发布时间】: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'

【问题讨论】:

标签: javascript ecmascript-6 babeljs es6-modules


【解决方案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';
    

    相关讨论:

    【讨论】:

      【解决方案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”应用程序中

        【讨论】:

          猜你喜欢
          • 2021-08-24
          • 2021-01-09
          • 1970-01-01
          • 2017-04-29
          • 2018-07-04
          • 2016-02-15
          • 2019-12-06
          • 2017-05-08
          相关资源
          最近更新 更多