Import And Export

以下會介紹常用到的 Import And Export

• In ES5：Use require

• In ES6：Use import （Notice You Need Use Babel to Compile）

參考資料：

1. 只是個打字的-淺談JS Import and Export

2. MDN Export

3. MDN Import

Export vs Export default

• 差別在於一個檔案內，Export 可以有無限多個，但Export Default 只能有一個。

• 並且在使用Default 時，要把Export的東西寫進一個{}內。

export const a=123;
export const myFunc =()=>{console.log('this is myFunc'}

//So，以上顯示可以輸出很多Export

//So，以下顯示只能輸出一個Export Default
const test=()=>{'this is test'}
export default()=>{
    b:'b',
        test
}

• 如果是 無Default 的Export

首先export的js檔寫成如下

//module "my-module.js"
export { cube, foo, graph}

另一個import的JS檔則要寫成

import {cube,foo,graph} from 'my-module'

• 如果是 Default 的 Export

//module 'my-module2.js'
export default function cube(x){
return x*x*x
}

另一個import的JS則寫成

import cube from 'my-module2';
console.log(cube(3)); //27

• 總結是Default 輸出後，在Import 時不用{}括號。

注意：預設輸出（Export Default）不得使用 var / let / const

口訣：有 Default 了，不用 特地去括號引入。

Import vs Import { }

• 總結：最基本的為，Export 有Default，就不用 {}

以下介紹一些常見使用 Import 的方式

（定義模塊：所謂的模塊，就是你所「Export檔案」的「那個Export」稱作模塊）

1. 引入整個模塊的內容

   import * as myModule from '/modules/my-module.js';
   //my-module.js 就是你的Export檔案（又稱作模塊文件）
   //然後你可以對myModule施加方法
   myModule.filter();

2. 從模塊文件引入，但單一輸出

   import {myExport} from '/modules/my-module.js';

3. 從模塊文件引入，但多輸出

   import {foo,bar} from '/modules/my-module.js';

4. 重命名輸出的模塊（重命名單一模塊）（稱作alias）

   import {foo as shotName} from '/modules/my-module.js';

5. 重命名多個輸出模塊（稱作 aliases）

   import {foo as shotName,
           bar as short
   } from '/modules/my-module.js';

6. 僅作為 Side Effect 引入模塊文件（模塊文件不做動作，而是執行整塊模塊文件的程式）

   import '/modules/my-module.js';

7. 預設使用

   import myDefault,{foo,bar} from '/modules/my-module.js';

8. 動態引入

   import ('/modules/my-module.js')
       .then((module)=>{
       //做點事情
       });

   let module = await import('/modules/my-module.js');