# 在瀏覽器運行 ES 模組｜筆記 by Sz
###### tags: `Sz` `課前` `Vue新手夏令營`

- [Vue 新手夏令營 課程頁面](https://hackmd.io/@dbFY0UD9SUeKmNXhWf01ew/BkJoW-hn_/%2FC05go-8iTSS-nrMwKU22kA)
- [:sun_with_face:筆記入口](/2JiZbCPdR0G4p5fNycPmTg)

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

## 講古
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>