webpack 新手教學之淺談模組化與 snowpack - Huli

瀏覽器使用 ES module

• import something from './util.js' 務必要加上 .js 副檔名不然瀏覽器讀不到。

• 要加上 type : <script type="module" src="/p/a/t/h/app.js">

• 在瀏覽器環境是存取不到 type=module , app.js 檔案裡面的變數的。 ecmascript 6 - How to access functions defined in ES6 module in a browser’s JavaScript console? - Stack Overflow

因爲瀏覽器環境是 window 但盡量不要使用全域變數。（常常聽到的原則）

dynamic module import

原來 ES module 有分成常見的 static import 還有 dynamic import。

• 不同於 static import，dynamic import() 可以撰寫於文件頂層以外的位置，例如，撰寫於 function 內。

• static import：在進入網站時即獲取資源

• dynamic import() 會回傳 promise，可搭配 async/await 使用。

• dynamic import()：可以指定需要時候，才獲取資源

• 以下是一些可以使用的情境。我在 playground 資料夾之下的 dynamic module imports，根據以下教學手把手刻了程式碼，複習可用。 Learn Dynamic Module Imports In 11 Minutes - YouTube