在瀏覽器運行 ES 模組｜筆記 by Sz

tags: Sz 課前 Vue新手夏令營

• Vue 新手夏令營 課程頁面
• 筆記入口

為何模組化

強大的功能固然好，但大部分時候我們不需要一次擁有那麼多
通常我們只會買我們需要的東西，不會把整家店包下來

講古

1. 早期：JS 多半不大，瀏覽器可以輕鬆運行
2. 演進：JS 隨著進化越來越大，有了將程式碼輕巧化的需求
3. 先是框架：框架開始支援編譯模組化
4. 現在：大多已支援原生環境（瀏覽器）運行了

如何在原生環境下運行

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

匯出

匯入前要先匯出，原則上都是在 JS 上進行

預設匯出：defaultExport.js

常見的匯出方式，通常用於匯出物件，在 Vue 開發中可用來匯出元件

• 只能匯出一個

export default

具名匯出：namedExport.js

可用於匯出已定義的變數、物件、函式，專案開發中通常用於 “方法匯出”
第三方的框架、函式、套件很常使用具名定義 “方法”

• 可以匯出多個

export const XXX = ... // 多個，具名

匯入

在 HTML, JS 匯入都有

預設匯入

因為本身沒有名稱，要自訂

import 自訂名稱 from ..

具名匯入

import {具名名稱} from ..

實例

預設匯出匯入

預設匯出，建立一個 export.js 檔

export default {某個元件內容}  // 不包含該元件的名稱

預設匯入

<script type="module">
  import newComponent from 'export.js';
  newComponent.init();
</script>

具名匯出匯入

建立一個 export2.js 檔

export const a = 1;
export function b() {
  ..
}..

單一匯入（建議）

<script type="module">
  import { a, b } from 'export2.js';
  console.log(a);
  b();
</script>

全部匯入（不建議，較難除錯）

<script type="module">
 // 避免名稱的衝突，會賦予在一個物件(all)上面
  import * as all from 'export2.js'; 
  console.log(all.a);
  all.b();
</script>