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'); 

（實際編譯器輸出可能不同）