其實瀏覽器原生模塊相關的支持也已經出了一兩年了（我第一次知道這個事情實在2016年下半年的時候）
可以拋開webpack直接使用import之類的語法
但因為算是一個比較新的東西，所以現在基本只能自己鬧着玩 :p
但這並不能成為不去了解它的借口，還是要體驗一下的。
首先是各大瀏覽器從何時開始支持module的：
- Safari 10.1
- Chrome 61
- Firefox 54 (有可能需要你在
about:config頁面設置啟用dom.moduleScripts.enabled) - Edge 16
使用方式
首先在使用上，唯一的區別就是需要在script標簽上添加一個type="module"的屬性來表示這個文件是作為module的方式來運行的。
<script type="module"> import message from './message.js' console.log(message) // hello world </script>
然后在對應的module文件中就是經常會在webpack中用到的那樣。
語法上並沒有什么區別（本來webpack也就是為了讓你提前用上新的語法:) ）
message.js
export default 'hello world'
優雅降級
這里有一個類似於noscript標簽的存在。
可以在script標簽上添加nomodule屬性來實現一個回退方案。
<script type="module"> import module from './module.js' </script> <script nomodule> alert('your browsers can not supports es modules! please upgrade it.') </script>
nomodule的處理方案是這樣的： 支持type="module"的瀏覽器會忽略包含nomodule屬性的script腳本執行。
而不支持type="module"的瀏覽器則會忽略type="module"腳本的執行。
這是因為瀏覽器默認只解析type="text/javascript"的腳本，而如果不填寫type屬性則默認為text/javascript。
也就是說在瀏覽器不支持module的情況下，nomodule對應的腳本文件就會被執行。
一些要注意的細節
但畢竟是瀏覽器原生提供的，在使用方法上與webpack的版本肯定還是會有一些區別的。
(至少一個是運行時解析的、一個是本地編譯)
有效的module路徑定義
因為是在瀏覽器端的實現，不會像在node中，有全局module一說（全局對象都在window里了）。
所以說，from 'XXX'這個路徑的定義會與之前你所熟悉的稍微有些出入。
// 被支持的幾種路徑寫法 import module from 'http://XXX/module.js' import module from '/XXX/module.js' import module from './XXX/module.js' import module from '../XXX/module.js' // 不被支持的寫法 import module from 'XXX' import module from 'XXX/module.js'
在webpack打包的文件中，引用全局包是通過import module from 'XXX'來實現的。
這個實際是一個簡寫，webpack會根據這個路徑去node_modules中找到對應的module並引入進來。
但是原生支持的module是不存在node_modules一說的。
所以，在使用原生module的時候一定要切記，from后邊的路徑一定要是一個有效的URL，以及一定不能省略文件后綴（是的，即使是遠端文件也是可以使用的，而不像webpack需要將本地文件打包到一起）。
module的文件默認為defer
這是script的另一個屬性，用來將文件標識為不會阻塞頁面渲染的文件，並且會在頁面加載完成后按照文檔的順序進行執行。
<script type="module" src="./defer/module.js"></script> <script src="./defer/simple.js"></script> <script defer src="./defer/defer.js"></script>
為了測試上邊的觀點，在頁面中引入了這樣三個JS文件，三個文件都會輸出一個字符串，在Console面板上看到的順序是這樣的：
行內script也會默認添加defer特性
因為在普通的腳本中，defer關鍵字是只指針對腳本文件的，如果是inline-script，添加屬性是不生效的。
但是在type="module"的情況下，不管是文件還是行內腳本，都會具有defer的特性。
可以對module類型的腳本添加async屬性
async可以作用於所有的module類型的腳本，無論是行內還是文件形式的。
但是添加了async關鍵字以后並不意味着瀏覽器在解析到這個腳本文件時就會執行，而是會等到這段腳本所依賴的所有module加載完畢后再執行。
import的約定，必須在一段代碼內的起始位置進行聲明，且不能夠在函數內部進行
也就是說下邊的log輸出順序完全取決於module.js加載的時長。
<script async type="module" > import * from './module.js' console.log('module') </script> <script async src="./defer/async.js"></script>
一個module只會加載一次
這個module是否唯一的定義是資源對應的完整路徑是否一致。
如果當前頁面路徑為https://www.baidu.com/a/b/c.html，則文件中的/module.js、../../module.js與https://www.baidu.com/module.js都會被認為是同一個module。
但是像這個例子中的module1.js與module1.js?a=1就被認定為兩個module，所以這個代碼執行的結果就是會加載兩次module1.js。
<script type="module" src="https://blog.jiasm.org/module-usage/example/modules/module1.js"></script> <script type="module" src="/examples/modules/module1.js"></script> <script type="module" src="./modules/module1.js"></script> <script type="module" src="./modules/module1.js?a=1"></script> <script type="module"> import * as module1 from './modules/module1.js' </script>
import和export在使用的一些小提示
不管是瀏覽器原生提供的版本，亦或者webpack打包的版本。
import和export基本上還是共通的，語法上基本沒有什么差別。
下邊列出了一些可能會幫到你更好的去使用modules的一些技巧。
export的重命名
在導出某些模塊時，也是可以像import時使用as關鍵字來重命名你要導出的某個值。
// info.js let name = 'Niko' let age = 18 export { name as firstName, age } // import import {firstName, age} from './info.js'
Tips: export的調用不像node中的module.exports = {}
可以進行多次調用，而且不會覆蓋（key重名除外）。
export { name as firstName }
export { age }
這樣的寫法兩個key都會被導出。
export導出的屬性均為可讀的
也就是說export導出的屬性是不能夠修改的，如果試圖修改則會得到一個異常。
但是，類似const的效果，如果某一個導出的值是引用類型的，對象或者數組之類的。
你可以操作該對象的一些屬性，例如對數組進行push之類的操作。
export { firstName: 'Niko', packs: [1, 2] } import * as results from './export-editable.js' results.firstName = 'Bellic' // error results.packs.push(3) // success
這樣的修改會導致其他引用該模塊都會受到影響，因為使用的是一個地址。
export在代碼中的順序並不影響最終導出的結果
export const name = 'Niko' export let age = 18 age = 20
const 或者 let 對於 調用方來說沒有任何區別
import {name, age} from './module'
console.log(name, age) // Niko 20
import獲取default模塊的幾種姿勢
獲取default有以下幾種方式都可以實現：
import defaultItem from './import/module.js' import { default as defaultItem2 } from './import/module.js' import _, { default as defaultItem3 } from './import/module.js' console.log(defaultItem === defaultItem2) // true console.log(defaultItem === defaultItem3) // true
默認的規則是第一個為default對應的別名，但如果第一個參數是一個解構的話，就會被解析為針對所有導出項的一個匹配了。
P.S. 同時存在兩個參數表示第一個為default，第二個為全部模塊
導出全部的語法如下：
import * as allThings from './iport/module.js'
類似index的export文件編寫
如果你碰到了類似這樣的需求，在某些地方會用到十個module，如果每次都import十個，肯定是一種浪費，視覺上也會給人一個不好的感覺。
所以你可能會寫一個類似index.js的文件，在這個文件中將其引入到一塊，然后使用時import index即可。
一般來說可能會這么寫：
import module1 from './module1.js' import module2 from './module2.js' export default { module1, module2 }
將所有的module引入，並導出為一個Object，這樣確實在使用時已經很方便了。
但是這個索引文件依然是很丑陋，所以可以用下面的語法來實現類似的功能：
export {default as module1} from './module1.js'
export {default as module2} from './module2.js'
然后在調用時修改為如下格式即可：
import * as modules from './index.js'
小記
想到了最近爆紅的deno，其中有一條特性也是提到了，沒有node_modules，依賴的第三方庫直接通過網絡請求的方式來獲取。
然后瀏覽器中原生提供的module也是類似的實現，都是朝着更靈活的方向在走。
祝願拋棄webpack來進行開發的那一天早日到來 :)
參考資料
文中示例代碼的GitHub倉庫：傳送陣