# 如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案
前幾天一個負責前端的同事遇到一個問題，在實驗一些 JavaScript 函式庫時，發現無法直接從 GitHub 載入 JavaScript 檔案，Google Chrome 的 Console 視窗 (在開發者工具裡) 會出現一段 Refused to execute script from 'https://raw.github.com/moment/moment/develop/min/moment.min.js' because its MIME type ('**text/plain**') is not executable, and strict MIME type checking is enabled. 的紅字 (紅字代表嚴重錯誤)，而導致網頁無法正確執行，這篇文章將分享幾個注意事項，還有從 [GitHub](https://github.com/), [Gist](https://gist.github.com/), [JSBin](http://jsbin.com/), [CODEPEN](http://codepen.io/) 載入 JavaScript 範例程式或函式庫的使用技巧。
我在研究過後發現，[Google Chrome](http://www.google.com/intl/zh-TW/chrome/) 與 [Internet Explorer 10](http://windows.microsoft.com/zh-tw/internet-explorer/ie-10-worldwide-languages) 瀏覽器在載入網頁中的 JavaScript 資源時，會判斷該 JavaScript 的 Content-Type 標頭定義，如果回傳是 **text/plain** 就會導致載入的 JavaScript 無法執行，不過在 [Firefox](http://moztw.org/firefox/) 與 [Safari](http://www.apple.com/tw/safari/) 瀏覽器並無此問題 ( [測試網頁](http://jsbin.com/oroyis/1/edit) )。
解決問題的過程中，不但發現從 GitHub 載入 JavaScript 的一個小技巧，還錄製成影片，有興趣的人可以看看，如下影片： ( 建議用 YouTube 的 **HD** 模式觀看，以取得最佳影片品質 )
從 GitHub 載入 JavaScript 的注意事項
本篇文章還特別整理了 [GitHub](https://github.com/), [Gist](https://gist.github.com/), [JSBin](http://jsbin.com/), [CODEPEN](http://codepen.io/) 四個網站的 JS 檔案載入方式。
**注意**：這裡的「載入」是指從**你的網頁**或**從任意網站網頁**，載入放在這些網站上面的 JS 檔案。
**1\. 從 [GitHub](https://github.com/) 載入 JavaScript 檔案**
當你在 GitHub 上取得 Raw 格式的 JavaScript 檔案，雖然可以取得完整內容，不過 GiHub 網站回應的 Content-Type 卻是 **text/plain** 內容型態。我們以下方這個網址為例：
- https://raw.github.com/moment/moment/develop/moment.js
當直接把該網址輸入在瀏覽器的網址列上，出現的是原始的 JavaScript 內容，如果用開發者工具 (Developer Tool) 來看 HTTP 封包內容，也可以發現回應的型態是 **text/plain** 內容類型。
然而，如果你將該網址變成用以下 HTML 語法載入，那就不行了 ( [示範網頁](http://jsbin.com/oroyis/2/edit) )：
-
網頁載入時，如果不開啟**開發者工具**，基本上看不出問題在哪，只會覺得：「我明明載入了 JavaScript 啊，為什麼 JavaScript 程式沒有執行呢？而且我把 JavaScript 輸入到網址列上，明明就有內容，怎麼不行呢？」然後陷入一種鬼打牆的焦慮狀態！
最好的方法，就是按下 F12 開啟瀏覽器的**開發者工具** (Chrome 或 IE)，然後切換到 Console (主控台) 頁籤，就會看到問題發生的詳細原因了，如下圖示：
[](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/46888b82458ba3c69784-image_2233.png)
解決的方法，當然是修改伺服器上的 Conten-Type 內容，把 **text/plain** 換成 **application/javascript** 即可。不過，我們又無法修改 GitHub 上面的伺服器設定，還好，GitHub 早就幫我們意識到這個問題，並網路上有位名叫 [Ryan Grove](https://twitter.com/yaypie) 的仁兄，建立了另一個 [rawgithub.com](https://raw.githack.com/) 網站，回應那些需要 GitHub 檔案原始內容的需求，最主要目的就是回應正確的 Content-Type 讓其他網頁也能夠正確載入 GitHub 上面的檔案。 ( 註: 真希望 GitHub 能夠主動將 Content-Type 改成 text/javascript )
所以，載入 GitHub 上面的 Raw 檔案時，你只要把網址列稍微修改一下即可。
如下網址，我有標註一個紅色的小數點：
- https://raw.github.com/moment/moment/develop/moment.js
只要把網址上的這個小數點移除，就可以正確載入該 JavaScript 檔案：
- https://rawgithub.com/moment/moment/develop/moment.js
**注意**: 此 [rawgithub.com](https://raw.githack.com/) 網域並不歸 GitHub 所有，建議用在測試環境即可，切勿用於正式網站。
各位如果有興趣，也可以看我錄製好的一個簡短的教學短片：[http://youtu.be/uOXueXGWqqM](http://youtu.be/uOXueXGWqqM "http://youtu.be/uOXueXGWqqM")
**2\. 從 [Gist](https://gist.github.com/) 載入 JavaScript 檔案**
[Gist](https://gist.github.com/) 是 GitHub 推出的一個服務，可以方便你用來分享各種**程式碼片段** ( Code Snippets )，你只要輸入關鍵字進行搜尋，通常可以搜尋到各式各用程式語言的程式碼片段，非常實用。
當然，我們線上觀看原始碼內容是沒問題的，我們以下方這個網址為例：
- [https://gist.github.com/jarcoal/6153740](https://gist.github.com/jarcoal/6153740)
因為一個 Gist 可能包含多個檔案，所以每一個檔案右上角都會有個 **View Raw** 的超連結，可以顯示該檔案的「純文字」內容。
想當然的，我們遇到的問題跟 GitHub 遇到的都一樣，解決的方式也差不多，把網址給換掉即可：
例如該檔案：
- https://gist.github.com/jarcoal/6153740/raw/dadc0312dfd4a4d52fcfb0e136339fdcfe3f6fb6/moment-angular.js
換成以下網址即可：
- https://**rawgithub.com**/jarcoal/6153740/raw/dadc0312dfd4a4d52fcfb0e136339fdcfe3f6fb6/moment-angular.js
**3\. 從 [JSBin](http://jsbin.com/) 載入 JavaScript 檔案**
JSBin 我之前曾經撰文介紹過【 [介紹好用工具：JS Bin ( 網站前端工程師的學習利器 )](/post/2013/06/29/Useful-tool-JS-Bin-Collaborative-JavaScript-Debugging) 】，也是個很棒的線上編輯器。
例如我們的 JSBin 網址在此： [http://jsbin.com/uyefat/1/edit](http://jsbin.com/uyefat/1/edit)
因為 JS BIn 提供了 HTML, CSS 與 JavaScript 三種編輯器，若要輸出整個頁面，其網址如下：
- http://jsbin.com/uyefat/1
若你要單獨輸出 JavaScript 內容，就是修改網址結構，在最後加上 **.js** 即可：
- http://jsbin.com/uyefat/1.js
不過，目前 ( 2013/8/10 ) 這一版 JS Bin 所輸出的 Content-Type 是 **application/octet-stream**，雖然不是標準的 application/javascript 內容型態，但還是可以成功的從任意網頁載入。
**4\. 從 [CODEPEN](http://codepen.io/) 載入 JavaScript 檔案**
[CODEPEN](http://codepen.io/) 也是另一個方便管理程式碼片段的線上工具，假設我們要取得 [http://codepen.io/Jackreichert/pen/heibs](http://codepen.io/Jackreichert/pen/heibs "http://codepen.io/Jackreichert/pen/heibs") 這個 *PEN* 的 JavaScript 內容，則可以將網址列最後加上 **.js** 即可：
- http://codepen.io/Jackreichert/pen/heibs.js
在 CODEPEN 輸出的 JavaScript，其 HTTP 回應的 Content-Type 是 **text/javascript**，是各瀏覽器可以接受的內容型態，所以直接用來載入網頁基本上沒啥問題。
**相關連結**
- [GitHub](https://github.com/)
- [Gists](https://gist.github.com/)
- [Gists API](http://developer.github.com/v3/gists/)
- [rawgithub.com](https://raw.githack.com/ "https://rawgithub.com/")
- [JSBin](http://jsbin.com/)
- [CODEPEN](http://codepen.io/)