l'exportation par défaut vs module.les exportations des différences

Cela fonctionne:

import {bar} from './foo';
bar();

//foo.js
module.exports = {
 bar() {}
}

Et cela fonctionne:

import foo from './foo';
foo.bar();

//foo.js
export default {
 bar() {}
}

Alors pourquoi ne pas ce travail?

import {bar} from './foo';
bar();

//foo.js
export default {
 bar() {}
}

Il jette TypeError: (0 , _foo.bar) is not a function.

OriginalL'auteur Tim Scott | 2017-01-15

  1. 49

    Lorsque vous avez

    export default {
  bar() {}
}

    L'objet exporté est de la forme suivante:

    exports: {
  default: {
    bar() {}
  }
}

    Lorsque vous effectuez une importation simple (par exemple, import foo from './foo';) vous êtes réellement obtenir la valeur par défaut de l'objet à l'intérieur de l'importation (c'est à dire, exports.default). Cela deviendra évident lorsque vous exécutez babel pour compiler ES5.

    Lorsque vous essayez d'importer une fonction spécifique (par exemple, import { bar } from './foo';), selon votre cas, vous êtes en fait en essayant d'obtenir exports.bar au lieu de exports.default.bar. C'est pourquoi la barre de fonction n'est pas définie.

    Lorsque vous venez de multiples exportations:

    export function foo() {};
export function bar() {};

    Vous finirez par avoir à cet objet:

    exports: {
  foo() {},
  bar() {}
}

    Et donc import { bar } from './foo'; fonctionne. C'est le cas similaire avec module.exports vous êtes essentiellement des exportations de stocker un objet comme ci-dessus. Par conséquent, vous pouvez importer de la barre de fonction.

    J'espère que c'est assez clair.

    Grande explication. Merci!
    Grande explication +1, merci beaucoup.
    si j'écris module.exports = { funcOne, funcTwo } comment puis-je mieux d'exporter un objet, y compris ces deux fonctions?
    C'est déjà exporté avec ces deux fonctions. Vous devriez être en mesure de simplement import foo from './foo.js'; puis exécuter la fonction comme: foo.funcOne(); foo.funcTwo(); Si vous utilisez require ensuite, vous pourriez avoir à utiliser const foo = require('./foo.js').default;.
    Agréable à regarder, Merci.

    OriginalL'auteur Nelson Yeung

  2. -5

    Bien sûr ne fonctionne pas, vous avez exporté foo par défaut et importé avec des accolades {}. Pour faire simple rappelez-vous ceci, si vous êtes à l'exportation par défaut, vous n'avez pas besoin d'accolades, mais si vous importez normalement un module, vous allez utiliser des accolades {} pour accéder à une fonction spécifique dans le module ;). Vous pouvez voir des exemples ici

    OriginalL'auteur Razvan Alex