[筆記]如何在 Codepen 引入 Github 的 JavaScript 檔案

最近在 CodePen 測試一些 JavaScript 函式庫時發現無法直接從 GitHub 載入 JavaScript 檔案，發現直接在 CodePen 引入 Github raw 的 JavaScript 瀏覽器上是會噴錯的：because its MIME type ('text/plain') is not executable, and strict MIME type

because its MIME type ('text/plain') is not executable, and strict MIME type

這個錯誤是因為 Google Chrome 與 Internet Explorer 10 瀏覽器在載入網頁中的 JavaScript 資源時，會判斷該 JavaScript 的 Content-Type 標頭定義，如果回傳是 text/plain 就會導致載入的 JavaScript 無法執行，不過在 Firefox 與 Safari 瀏覽器並無此問題。

正常的情況下，JavaScript 的 Content-Type 是定義為 script 才可以正常執行

如何從 Github 引入 ？

當你在 GitHub 上取得 Raw 格式的 JavaScript 檔案，雖然可以取得完整內容，不過 GiHub 網站回應的 Content-Type 卻是 text/plain 內容型態，是會導致程式無法執行的

解決的方法，當然是修改伺服器上的 Conten-Type 內容，把 text/plain 換成 script ， 不過，我們又無法修改 GitHub 上面的伺服器設定，還好，網路上有位名叫 Ryan Grove 的仁兄，建立了另一個 rawgithub.com 網站

目的就是回應正確的 Content-Type 讓其他網頁也能夠正確載入 GitHub 上面的檔案，使用方式如下：

只要將原先的 raw.githubusercontent.com 的網域，改成 [rawgithub.com](https://rawgit.com/) 就可以了

如下：

https://raw.githubusercontent.com/XXX/XXX/XXX.js

改成：

https://rawgithub.com/XXX/XXX/XXX.js

[rawgithub.com](https://rawgit.com/) 網域並不歸 GitHub 所有，建議用在測試環境即可

參考文章 ： 如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案