前言
最近在學習ES6模塊化時，遇到了一些問題，通過查詢相關資料得以解決，本篇隨筆詳細記錄了解決方法。
具體內容
以下定義一個模塊common.js
在test.html中引入上述定義的模塊
運行上述test.html文件時，瀏覽器控制台如下錯誤
“Uncaught SyntaxError: Cannot use import statement outside a module”
錯誤原因：瀏覽器還沒有完全支持ES6模塊，所以需要在導入模塊時，在script標簽中加“type = module”,如下圖所示：
但是，解決完上述問題之后，新的問題又出現了，瀏覽器控制台報如下報錯：
以上問題表示出現的跨域問題，可是為什么會出現跨域呢？
首先，script標簽是自帶跨域功能的，這也就是我們在某些場合會通過jsonp並結合script來請求資源的原因。
其次，導致跨域的原因是協議、域名、端口號只要有一個不同就會導致跨域，而這里的協議通常是指http協議、https等協議，也就是說http、data、chrome、chrome-extension、https這些協議是支持跨域請求的，而file協議並不支持。
file協議：本地文件傳輸協議，主要目的就是用於訪問本地計算機中的文件，好比通過Windows的資源管理器去打開文件或者通過右鍵單擊打開一樣，然后通過“file:文件路徑”這樣的形式去訪問。
瀏覽器通過file協議和http協議去訪問文件（file:///文件路徑和http://訪問路徑）的區別：
- file協議用於訪問本地計算機的文件，好比通過資源管理器打開文件一樣，需要注意的是它是針對本地的，即file協議是訪問本機的文件資源。
- http協議訪問本地的html文件，相當於將本機作為一台http服務器，然后通過localhost訪問的是本地服務器，再通過http服務器去訪問本機的文件資源。
- 通俗說，file協議只是簡單請求本地文件，將其作為一個服務器未解析的靜態文件打開；而http是在本地搭建一個服務器再通過服務器解析打開文件。
當在本機直接打開一個網頁（例如本例的test.html），該網頁通過script標簽引入了common.js，則在瀏覽器地址欄呈現的地址是“file:///C:/Users/wangqin/Desktop/test.html”,這樣會出現跨域問題。而http、https等協議支持跨域請求，所以解決辦法可以通過在本地搭建一個服務器去進行資源的訪問來解決跨域問題。
搭建本地服務器，可以使用Apache Tomcat；亦可以使用vue-cli或webpack-cli腳手架搭建。具體操作方法此處不再贅述。
結束語
在工作項目開發和學習過程中，總會遇到各種各樣的bug，當一步一步去解決完bug時，會恍然大悟，收獲頗多，所以希望大家和我一樣，慶幸遇見bug讓自己學到更多，見識更多。哈哈哈哈……