【前端踩地雷#2】import會出現的問題(importmap)

2023-06-08
#前端 #Vue.js #JavaScript #import #importmap
前端踩地雷

最近想練習Vue的Composition API，順便重構原本的專案，但在引入CDN後發生了一些問題，想紀錄一下來龍去脈

HTML

1
2
3
<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/src/script.js"></script>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createApp, reactive, ref } from 'vue'
createApp({
  
  setup() {
    const counter = reactive({ count: 0 })
    const message = ref('Helo World!')

    return {
      counter,
      message
    }
  }
}).mount('#app')

出現錯誤 Uncaught SyntaxError: Cannot use import statement outside a module 搜尋一下發現沒有在引用JS檔案的那條script標籤裡面加上type=”module”

不過加上後又冒出一個新的錯誤資訊 Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

回去找Vue.js官方文件:

We can teach the browser where to locate the vue import by using Import Maps:

1
2
3
4
5
6
7
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

於是就正常了：
HTML

1
2
3
4
5
6
7
8
9
<script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="module"src="/src/script.js"></script>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createApp, reactive, ref } from 'vue'
createApp({
  
  setup() {
    const counter = reactive({ count: 0 })
    const message = ref('Helo World!')

    return {
      counter,
      message
    }
  }
}).mount('#app')

後記

importmap

雖然ES6已經有import export可以模組化程式的功能，但在實際使用時

“必須要用相對路徑、絕對路徑或是URL的方式import ”

例如：

1
import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

否則console就會出現Relative references must start with either "/", "./", or "../".

importmap就是要解決這樣的問題
，只要在script標籤裡面加上importmap，並用JSON的格式將要管理的路徑和對應的名稱統一管理在這個標籤裡面

1
2
3
4
5
6
7
<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

就可以用原本的方式引入：

1
import { createApp, reactive, ref } from 'vue'

對來說瀏覽器就會看起來像是：

1
import { createApp, reactive, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

留言: