# 現行的 ES 模組使用技巧｜筆記 by Sz
###### tags: `Sz` `課前` `Vue新手夏令營`

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

## 作用域
每個 `type="module"` 的作用域都是獨立的
### 非模組的狀況

<script>
var a = 1;		// 設置全域 a 變數
window.b = 2;	// windows b 屬性
</script>

<script>
console.log(a); // 讀取不到
console.log(b);	// 讀取不到
</script>

### 模組的狀況

<script type="module">
var a = 1;        // 設置全域 a 變數
window.b = 2;     // windows b 屬性
</script>

<script type="module">
console.log(a);    // 讀取不到
console.log(b);    // 讀到了！（不建議
</script>

## 可以運用的 ESM 套件
網路上有很多版本的 ESM 套件
> [ESM module](https://cdnjs.com/libraries/vue)
> [Vue 的 Getting Started 的語法](https://v3.vuejs.org/guide/introduction.html#declarative-rendering)

<script type="module">
  import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js'    // esm-browser 是給瀏覽器運行用的 ESM 版本
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

// 決定畫面要在哪裡呈現
createApp(Counter).mount('#app')  
</script>

<!-- .mount('#app')指定渲染於此 -->
<div id="app">  
  Counter: {{ counter }}
</div>