【问题标题】:ES6 default and named exportsES6 默认和命名导出
【发布时间】:2016-08-02 20:53:29
【问题描述】:

我正在尝试了解命名和默认导出。我有一个看似基本的要求,但我不明白如何设置。

我希望能够同时导入:

//app.js
import Mod from './my-module'
import { funcA, funcB } from './my-module'

console.log('A', Mod.funcA(), funcA()); // A a a
console.log('B', Mod.funcB(), funcB()); // A a a

当我尝试时,最接近的方法如下:

//my-module.js
export function funcA() { return 'a'; };
export function funcB() { return 'b'; };

export default {funcA, funcB}

我的麻烦是我不想重新索引默认导出中的每个函数。我只想定义我的函数,然后确保它们被导出,以便我可以使用它们。

建议?还是我必须使用import * as Mod from './my-module';

【问题讨论】:

    标签: javascript export ecmascript-6 es6-module-loader


    【解决方案1】:

    使用* as name一次导入整个模块的内容:

    import * as Mod from './my-module';
    

    然后使用解构将它们分配给单独的常量:

    const { funcA, funcB } = Mod;
    

    对于导出,只需使用命名的导出:

    export function funcA() { return 'a'; };
    export function funcB() { return 'b'; };
    

    【讨论】:

      【解决方案2】:

      您可以省略默认导出并使用 import 作为语法:

      //app.js
      import * as Mod from './my-module'
      import { funcA, funcB } from './my-module'
      
      console.log('A', Mod.funcA(), funcA()); // A a a
      console.log('B', Mod.funcB(), funcB()); // B b b
      
      //my-module.js
      export function funcA() { return 'a'; };
      export function funcB() { return 'b'; };
      

      【讨论】:

      • 那么import Mod from ’./my-module‘是不是不能按照上面的方式使用?
      • 可以如上使用,但我看不出默认导出中funcA/funcB的重复原因
      猜你喜欢
      • 2020-02-14
      • 1970-01-01
      • 2018-07-25
      • 2020-01-03
      • 1970-01-01
      • 2022-01-18
      • 2019-09-07
      • 2016-06-03
      • 2014-09-15
      相关资源
      最近更新 更多