SharePoint Framework 基於團隊的開發（二）

部落格地址：http://blog.csdn.net/FoxDave

本篇介紹SPFx專案的一般開發流程。SharePoint Framework基於開源的工具鏈，也遵循開源技術棧中其他專案的開發流程。那麼在一個典型的SPFx專案中，這種流程是什麼樣的呢？

建立SPFx專案

在使用SPFx進行SharePoint自定製時，第一步是使用Yeoman生成器建立新的SPFx專案。建議每個SPFx專案中只使用一種框架，否則會比較亂也不好維護，且有衝突。

鎖定依賴庫的版本

使用生成器建立好的SPFx專案包含了SPFx包和其他必須的包以保證解決方案能正確執行。比如在你構建web部件時，你可能想將Angular或jQuery包含到專案中。在SPFx專案中，這些依賴的包是通過npm安裝的。每個依賴引用都是一個特定版本的Node.js包。預設情況下使用一定範圍的版本庫來指向依賴，幫助開發者輕鬆保持最新的引用。

通常情況下，為了防止編譯期間對專案的修改，會對原始碼進行加鎖控制。開發者在新增新引用時可以呼叫npm install --save-exact來指定版本。開發者可以使用nmp shrinkwrap命令來鎖定所有內容。一旦執行該命令，它會生成一個所有依賴庫引用的列表以及版本資訊並記錄在npm-shrinkwrap.json檔案中，這個檔案在回退時也需要用到。

注意：如果你的專案中有安裝在node_modules資料夾中的沒有在package.json檔案中列出的包，你就會在生成npm-shrinkwrap.json檔案時看到錯誤。要解決這個問題，你需要將package.json中沒有的包加進去，或者從node_modules資料夾中移除（將資料夾整個刪掉也可以）。

將專案新增到原始碼管理

專案組內的成員協同開發同一專案時我們一般會用如VSTS, TFS, SVN或者GIT這種原始碼管理系統。具體的步驟可能會由於不同的系統而有些許不同。

例如對於GIT而言，SharePoint Framework專案由.gitignore檔案定義哪些檔案不包含在原始碼控制中。總之你需要確保原始碼控制中包含了必要的正確的檔案而不包含其他檔案。

注意不要將node_modules資料夾包含在原始碼控制中，該資料夾包含的專案需要的包是在npm install時自動安裝的。並且有些包編譯二進位制檔案時的程式是依賴於作業系統的，這樣如果團隊成員有工作在不同作業系統的情況，也會造成問題。

從原始碼管理獲取專案

在你第一次從原始碼管理系統獲取專案時，專案中是沒有SPFx相關的庫的，你需要先要執行npm intall來安裝這些依賴庫，對於SPFx專案，它會根據package.json和npm-shrinkwrap.json檔案來安裝所有的包。

注意：安裝包的時候需要確保網際網路是連通的，包會從registry.npmjs.org下載，否則的話編譯會失敗。當然也是有解決辦法的，例如使用shrinkpack將依賴庫在原始碼控制中管理，相當於進行離線安裝。

上文也提到過，對於編譯成二進位制檔案的內容，不同的作業系統有不同的處理方式。比如你從Linux的Docker容器中獲取依賴庫，然後在windows系統上進行編譯，就會得到所使用環境型別不匹配的錯誤。在開發時要注意這裡。

再舉個例子，存在這樣一種情況，在你獲取專案之後，其他人對依賴庫進行了更新或追加，這時你需要執行npm install來獲得最新的依賴庫。

將包新增到你的專案

使用已存在的包來完成特定的開發任務能讓你的效率更高。npmjs.com就是一個你可以在專案中使用的公共包庫，但是需要注意你採用的包的內容和協議。

通過執行npm install <package> --save或npm install <package> --save-dev命令來將包新增到SPFx專案。例如npm install angular --save。save或save-dev引數確保包的資訊會新增到package.json檔案中，專案組的其他成員在更新依賴庫時也能夠及時獲取到。一般情況下，對於執行時需要的庫使用--save引數，而對於編譯時使用的庫則用--save-dev引數。

如果在安裝包的時候不指定版本，npm會為你安裝最新版本。如果你使用npm-shrinkwrap.json檔案的話，npm會為你更新到該檔案中定義的版本。或者你可以直接在npm install命令中指定版本，比如npm install angular@1.5.9 --save，該命令會安裝指定的包並將版本資訊更新到npm-shrinkwrap.json檔案。

本篇就介紹到這裡，下一篇會介紹如何使用內部包庫。