JavaScript中'export'和'export default'的区别？

Question

这两者之间的区别究竟是什么？我见过的人使用：

function foo() { 
    ... 
} 

export default foo; 

我也看到了：

function bar() { 
    ... 
} 

export bar; 

而且，为什么你会使用一个比其他？

Answer 1

如果您需要导出多个对象，请使用命名导出（无默认关键字）。

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

否则一单出口，默认出口行之有效

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

Answer 2

这是最简单的，只是看看三种不同ES6导入/导出风格编译下降到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'; 

大致编译为：

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

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

（实际编译器输出可能不同）