淺談：export default與export const的區別

export default與export const的區別

export 用於在JavaScript模塊中導出函數，原始值，對象；即導出模塊，例如：

export （命名導出）

export {myFunction};  //命名導出函數

export const value=5;   //命名導出原始值

export {object1, object2, ....};   //命名導出對象

命名導出可以導出多個值，但是導入時命名需要與導出命名相同。

每個文件可以有多個命名導出 export const，然后將你要導入的名稱用{}（花括號）包住。例如：

// in  module.js

let func1=function(){

....

};

let func2=function(){

...

};

export {func1,func2};

// invoke.js

import {func1, func2} from 'module.js';

// 導入多個導出

import { MyClass, MyOtherClass } from "./MyClass";

 // 使用 as 重命名導出

import { MyClass2 as MyClass2Alias } from "./MyClass2";

// 導入所有

import * as MyClasses from "./MyClass";

 

export default（默認導出）

只能有一個默認導出；導入此類文件（模塊）時需要指定一個任何你喜歡的名稱即可。

//module.js

export default const val=1;

//invoke.js

import res from 'module.js';

注意：

默認導出實際上就是一個名字為 default 的命名導出，所以也可以像這樣導入：

import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

export  {Name} from ...

從某一個文件中導出模塊，多用於模塊重定向

export * from '../module.js';

export {default} from '../module.js';// 導出默認模塊