Différence entre "export" et "export default" en JavaScript ?

Question

Quelle est la différence entre les deux ? J'ai vu des gens utiliser :

function foo () {
  ...
}

export default foo;

Et j'ai vu :

function bar () {
  ...
}

export bar;

Par ailleurs, pourquoi utiliser l'un plutôt que l'autre ?

Answer 1

Le plus simple est de regarder à quoi correspondent les trois styles d'import/export ES6 dans CommonJS.

// Three different export styles
export foo;
export default foo;
export = foo;

// The three matching import styles
import {foo} from 'blah';
import foo from 'blah';
import * as foo from 'blah';

En gros, cela correspond à :

exports.foo = foo;
exports['default'] = foo;
module.exports = foo;

var foo = require('blah').foo;
var foo = require('blah')['default'];
var foo = require('blah');

(La sortie du compilateur peut être différente)

Answer 2

Si vous avez besoin d'exporter plusieurs objets, utilisez les exportations nommées (sans mot-clé par défaut).

function x1(){};
function x2(){};
export {x1},{x2};  //my-module.js
import {x1},{x2} from 'my-module';

sinon, pour une exportation unique, l'exportation par défaut fonctionne bien

export default function x1() {};
import x1 from 'my-module';