export default 和 export 區別

1.export與export default均可用於導出常量、函數、文件、模塊等
2.在一個文件或模塊中，export、import可以有多個，export default僅有一個
3.通過export方式導出，在導入時要加{ }，export default則不需要

4. 

(1) 輸出單個值，使用 export default

(2) 輸出多個值，使用 export

(3) export default與普通的 export不要同時使用

 

示例：

1.export //a.js
export const str = "blablabla~"; export function log(sth) { return sth; } 對應的導入方式： //b.js
import { str, log } from 'a'; //也可以分開寫兩次，導入的時候帶花括號

2.export default
//a.js
const str = "blablabla~"; export default str;

其實此處相當於為str變量值"blablabla"起了一個系統默認的變量名default，自然default只能有一個值，所以一個文件內不能有多個export default。

對應的導入方式： //b.js import str from 'a'; //導入的時候沒有花括號

本質上，a.js文件的export default輸出一個叫做default的變量，然后系統允許你為它取任意名字。所以可以為import的模塊起任何變量名，且不需要用大括號包含

 import的文件會自動執行一次。

import會加載且僅加載一次導入的模塊

 

ES6模塊化與commonjs、amd區別：

ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。

 

模塊化統一：

 

// 第一組
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

// 第二組
export function crc32() { // 輸出
  // ...
};

import {crc32} from 'crc32'; // 輸入

　　

上面代碼的兩組寫法，第一組是使用export default時，對應的import語句不需要使用大括號；第二組是不使用export default時，對應的import語句需要使用大括號。

export default命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。