1、如何在瀏覽器中import模塊

在使用模塊加載時不同瀏覽器有不同的行為

使用 import 加載模塊時，需要把script標簽的type屬性改為module。此時Firefox瀏覽器支持import，但Chrome瀏覽器仍然不支持。

//export.js裏面的代碼，export.js文件無需在html中引入
let a = 123;
export {a};

<script type="module" src="src/importDemo.js"></script>
//下面是importDemo.js裏面的代碼
import {a} from ‘./22Module.js‘
console.log(
 
‘module‘,a);

//或者內聯script代碼也可以
<script type="module">
    import {a} from ‘./src/22Module.js‘
    console.log(a);
</script>

Chrome瀏覽器要想支持import，要放在服務器裏使用，或者使用webpack+babel。我只嘗試了使用phpstudy建立一個本地服務器的方式，是可以執行的。

1.1、import模塊時需不需要後綴

瀏覽器在解析 import 語句時是需要後綴的，更確切地說，瀏覽器認 import 後面這個字符串為一個 URL 地址。所以原生解析JS時在 import 模塊時必須要使用後綴。註意路徑也需要，如果是相同目錄下也要加上 ./ 才行。

在使用打包工具比如webpack時， import 後面到底要不要後綴，全憑工具自己定義規則。

ES6中模塊加載出現的問題