# ASP.NET 5 Starter Web 專案內建的 NPM 設定檔 package.json 問題解決

之前一直沒有花時間去了解 npm ( Node 套件管理員 ) 的各種用法，尤其是 **[npm install --save 與 npm install --save-dev 的差異](http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies)**，今天再嘗試的時候，發現在我的本機電腦一直試不出這兩個命令有任何差異，套件都可以裝，但設定檔一直無法正確寫入，這種鬼打牆的事情，趁著這次年節假期徹底放鬆的時刻，終於被我抓到原來就是 **package.json** 這個檔案在搞鬼，欲知詳情，請繼續看下去。

由於 ASP.NET 5 / ASP.NET MVC 6 新的專案架構已經確定跟 [bower](http://bower.io/), [npm](https://www.npmjs.com/) 整合，所有跟前端有關的套件都將改用 [bower](http://bower.io/), [npm](https://www.npmjs.com/) 進行安裝與管理，因此原本由 NuGet 管理的那些前端套件，都將改用 npm 與 bower 進行套件管理，一些前端常見的工具，例如最小化(minification)與壓縮合併(bundling)也都將改由 grunt 與 gulp 等工具進行管理，而這些工具也都是透過 npm 來進行安裝。

我們先開啟 Visual Studio 2015 開發工具，新增一個新的 ASP.NET Web Application 專案，專案範本我們選擇 ASP.NET 5 Starter Web，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5ad7c58a5ec50609c7a6-image_2653.png)

從方案總管中你可以看見 Dependencies 節點裡面有兩個分類，分別是 Bower 與 NPM 這兩個分類。

-   Bower 分類下的套件，被定義在專案根目錄下的 **bower.json** 檔案裡
-   NPM 分類下的套件，則是被定義在專案根目錄下的 **package.json** 檔案之中

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/2782fe52509aafe3e624-image_2654.png)

你可以從 Visual Studio 方案總管中**移除套件**，不過**安裝套件**就要靠你自己打指令了。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a824c61a10b0e408d373-image_2655.png)

我先來示範如何用 [bower](http://bower.io/) 額外安裝 [modernizr](https://github.com/Modernizr/Modernizr) 與 [respond-minmax](https://github.com/scottjehl/Respond) 套件，這兩個套件都是以前在 ASP.NET MVC 5 專案範本中有出現的，但在 ASP.NET 5 Starter Web 卻被移除的。

開啟 Package Manager Console 窗格，輸入 pwd 可以顯示目前所在路徑，預設是方案根目錄

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/eb11db5653b08ab9eebd-image_2656.png "image")

然後我們用 cd 進入網站專案的根目錄，你要看到有 bower.json 與 package.json 這兩個檔案才可以

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/7ccdfac14a885257731f-image_2657.png)

此時請輸入以下兩行指令進行安裝

```
bower install modernizr --save
bower install respond-minmax --save
```

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /\*white-space: pre;\*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

第一次執行 bower 命令時，可能會出現恐怖的紅字

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b7d2af1323d527d76336-image_2658.png)

不用害怕，他只是通知你 bower 套件有新版，要請你升級而已，你就照著以下指令輸入就可以升級 bower 工具到最新版。

```
npm update -g bower
```

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /\*white-space: pre;\*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

上述 bower install 指令有加上一個 \--save 參數，主要用途是將本次安裝的步驟儲存起來，真正的動作則是將本次安裝的套件儲存到 bower.json 設定檔之中，當你打開 bower.json 就可以發現這兩個套件已經自動註冊進去了。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/19b11973c3290bcce75a-image_2659.png)

方案總管中也會立刻看見這兩個套件被安裝成功

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/d8325fb800669ddbf13d-image_2660.png)

接下來，我們要來安裝 Gulp 相關套件了，Gulp 相關套件則必須透過 npm 套件管理員進行安裝，我們先安裝 gulp 主要套件，請輸入以下指令：

```
npm install gulp --save-dev
```

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /\*white-space: pre;\*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

輸入這個指令後，gulp 套件確實會被安裝起來，那些執行中出現的一大片紅字 (警告文字) 就先不理他了，我們來看看 **\--save-dev** 這個參數原本的意思就是將 gulp 這個套件註冊到 package.json 設定檔的 **devDependencies** 區段裡，不過你去打開 package.json 檔案來看看，就會發現 gulp 根本沒有被寫入！

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/edcc57ca9b88256e48ac-image_2661.png "image")

我研究了一段時間後才發現，**原來 npm 根本不支援 package.json 檔案採用 UTF-8 with BOM 編碼**，嚴格說起來，其實是 [RFC4627](http://tools.ietf.org/html/rfc4627) (The application/json Media Type for JavaScript Object Notation) 規格中明確規定了 JSON 文件應該以 Unicode 做編碼，且預設為 UTF-8 編碼，但不能含有 BOM 字元， 也就是這份 Visual Studio 2015 內建的 package.json 檔案其實在檔頭多加上了個 [BOM](http://en.wikipedia.org/wiki/Byte_order_mark) 字元，才導致 npm 無法解析 package.json 檔案，也就等同於在使用 npm 套件管理員的過程中，找不到 package.json 的意思！

這個問題對初學者還真的挺困擾的，因為沒有明確的錯誤訊息，只覺得為什麼打 npm 指令為何寫不進 package.json 檔案而已，所以各位在建立專案後，第一件事請先將 package.json 改成沒有 BOM 的編碼，請參考以下步驟操作：

1.  開啟 package.json 檔案，選取主選單的 \[File\] –> \[Advanced Save Options\]  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ebd0daa82233396ebb44-image_2662.png)
2.  切換 Encoding 下拉選單，請務必選取 **Unicode (UTF-8 without signature) – Codepage 65001** 這項  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3a3789811a0624082fca-image_2663.png)
3.  最後按下**儲存**按鈕將檔案存檔  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/2bf95d9a632f8e8a357e-image_2664.png)

修正好 package.json 檔案後，我們重新在執行一次 **npm install gulp --save-dev** 就可以正常寫入了！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5dd4d99dc585fcfea411-image_2665.png)

其他與 Gulp 相關的套件還有以下這些，都建議安裝起來：

```
npm install gulp-bower --save-dev 
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install gulp-minify-css --save-dev
npm install del --save-dev
```

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /\*white-space: pre;\*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

  
完整的 Gulp 用法，請參考 [Gulp 官網文件](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)囉！

如果想在 Visual Studio 中使用 Gulp 而不知道怎樣開始，可參考 [How to use Gulp in Visual Studio](http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx) 這篇文章！  

**相關連結**

-   [npm](https://www.npmjs.com/)

-   [install | npm Documentation](https://docs.npmjs.com/cli/install)
-   [node.js - What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file? - Stack Overflow](http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies)
-   [Update NPM to support package.json with UTF BOM · Issue #3358 · npm/npm](https://github.com/npm/npm/issues/3358)
-   [mime types - JSON Specification and usage of BOM/charset-encoding - Stack Overflow](http://stackoverflow.com/questions/4990095/json-specification-and-usage-of-bom-charset-encoding)

-   [gulp.js - the streaming build system](http://gulpjs.com/)

-   [https://github.com/gulpjs/gulp](https://github.com/gulpjs/gulp "https://github.com/gulpjs/gulp")
-   [Dave Paquette | How to use Gulp in Visual Studio](http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx)

-   [Bower](http://bower.io/)

-   [Using Bower with Visual Studio - Canadian Developer Connection](https://learn.microsoft.com/en-us/archive/blogs/cdndevs/using-bower-with-visual-studio)