ES6 module

import export

• 要加上 type="module" 才能在瀏覽器上運行
• 要先 export 匯出 才能做 import 匯入

<script type="module">
</script>

• export 方法

//預設 -> 每個檔案只有一個，大多用在開發上
export default {}

//具名 -> 大多用在函式庫
export named {}

• import 方法

//預設
import 自訂名稱 from '...路徑'

//具名
import {模組名稱, 模組名稱} from ...

範例：

預設匯出/匯入

//module.js
export default {
	myName: '小明',
}
//or 
export default '小明';

//index.html
import 小明 from './module.js';

console.log(小明)// {myname:'小明'} -> 會得到整個物件

Side Effect→用在舊的函式庫，例如：jQuery

//module.js
(function(){
	console.log("Side Effect")
})()

//index.html
import './module.js';

具名匯出/匯入

//module.js
export function fn(){
	console.log("具名匯出");
}

export const a = 1

//index.html

import { a, fn } from './module.js';
console.log(a); //1
fn(); //具名匯出
//or
import * as all from './module.js';
console.log(all)