在HTML中引入JS模塊化，主要通過
解決方案
-
使用 在HTML文件中，使用<script>標簽，并設置type屬性為"module"。這告訴瀏覽器將該腳本視為一個模塊。</script>
立即學習“前端免費學習筆記（深入）”；
<!DOCTYPE html> <html> <head> <title>JS 模塊化引入</title> </head> <body> <script type="module" src="main.js"></script> </body> </html>
-
export 導出模塊: 在你的JavaScript模塊文件中，使用export語句導出你希望暴露給其他模塊的變量、函數(shù)或類。
// moduleA.js export const myVariable = "Hello from module A!"; export function myFunction() { console.log("Function from module A!"); } class MyClass { constructor() { this.message = "Instance of MyClass"; } showMessage() { console.log(this.message); } } export { MyClass }; -
import 導入模塊: 在需要使用這些導出的變量、函數(shù)或類的JavaScript模塊文件中，使用import語句導入它們。
// main.js import { myVariable, myFunction, MyClass } from './moduleA.js'; console.log(myVariable); // 輸出: Hello from module A! myFunction(); // 輸出: Function from module A! const myInstance = new MyClass(); myInstance.showMessage(); // 輸出: Instance of MyClass -
路徑問題: import語句中的路徑是相對于當前文件的。 確保路徑正確，否則瀏覽器會報錯。 相對路徑是常見的選擇，但也可以配置構建工具來使用絕對路徑或別名。
-
服務器環(huán)境: 由于模塊化通常涉及多個文件，直接在本地打開HTML文件可能會遇到跨域問題。 建議在本地搭建一個簡單的服務器，例如使用Node.js的http-server，或者python的python -m http.server。
為什么我的模塊化代碼在本地運行會報錯？
通常是因為直接用瀏覽器打開HTML文件，沒有通過服務器。瀏覽器會出于安全考慮，限制直接從本地文件系統(tǒng)加載模塊。 使用本地服務器可以解決這個問題。 此外，檢查你的import語句中的路徑是否正確。 錯誤的路徑也會導致模塊加載失敗。 另外，注意export default和普通export的用法區(qū)別。 使用export default導出的模塊，import時可以自定義名稱，而普通export則必須使用相同的名稱。
import和export有哪些不同的使用方式？
import和export提供了多種靈活的使用方式。 除了上面例子中的具名導出和導入，還可以使用默認導出 (export default)。 默認導出允許你導出一個模塊的默認值，導入時可以自定義名稱。
// moduleB.js const defaultValue = { message: "This is the default export" }; export default defaultValue; // main.js import myDefaultValue from './moduleB.js'; console.log(myDefaultValue.message); // 輸出: This is the default export
你也可以在同一個文件中同時使用具名導出和默認導出。 另外，可以使用export * from './anotherModule.js' 語句將另一個模塊的所有導出重新導出。 這種方式在構建庫或框架時非常有用。
如何在舊瀏覽器中使用模塊化特性？
舊版本的瀏覽器可能不支持ES模塊。為了兼容這些瀏覽器，你需要使用構建工具（例如webpack、Parcel或Rollup）將你的模塊化代碼轉換為CommonJS或AMD格式，或者使用polyfill。 這些工具可以將你的代碼打包成一個或多個bundle文件，這些文件可以在舊瀏覽器中直接運行。 此外，還可以使用
