知識星球
Script Lab 初級程教程己經靠一段落，前後共了8篇，作為 OfficeJS 開發入門己經綴綴有餘。假設你使用Script Lab 建立了一個載入項的片段，那麼你一定想把它變成一個一個獨立的載入項。經過反覆的償試，還真找到一個最佳方法，可以輕鬆將程式碼片段轉換為 OfficeJS 載入項。接著我們將進入第二階段，向正式的 Web Add-ins 開發進軍。
今天的內容將涉及大量的實操和安裝過程，基本上是照著流程一步步來完成，半以一個最簡單的 Script Lab 示例來操作，來最終完成一個 Web Add-ins 外掛。
這次我們將使用 VSCode 而不是 VS 來開發OfficeJS（Office 365 Web Add-ins）。VSCode 是一個非常有用的輕量級的程式碼編輯工具（就是這兩天，許豪同志還在籌備相關的教程或專場）。除此之外，還需要兩個輔助的工具，第一個是 Node Package Manager（NPM），和 Git 工具。透過 NPM 還將安裝 Yoeman ，透過 yo 與 Git 等工具的配合，我們也將擁有一個令人驚訝的強大開發環境，說實話回到字元介面，就像回到 90 年代還在玩 DOS 的過程，“握控一切”的感覺實在是太好了（用了 VS 就不俱備了）。
【VSCode】
下載並安裝VSCode，網址如下：
https：//code.visualstudio.com/
【nodejs】
下載並安裝Node以獲取節點包管理器（NPM），網址如下：
https：//nodejs.org/en/download/
【Git】
下載並安裝Git，網址如下：
https：//git-scm.com/download
【CNPM 】
三大基礎工具裝好後，接著就是開始著 Yeoman 的安裝了。之前的安裝過程還都有順利，但是到了這個環節時，還是遇到了一些小小的麻煩。網速問題導致晚上無法更新完成。臨近11：30了，還沒有見到安裝完成的希望。今天這篇公眾號文章，看樣子是沒辦法完整的發出了，自打1月22日開號以來，可能是第一次斷更的情況了。求助萬能的大牛群 dotnet跨平臺(飛雪)交流群，果然得到了答案，方知在國內該使用 cnpm 才對，並且得到了正確的命令（感謝 瑋仔Wayne 的指導）。
我們現在需要做的是安裝 CNPM，按以下流程操作：
-
開啟VSCode
-
按CTRL +`。這將開啟控制檯視窗。或者，您可以轉到“檢視”選單，然後單擊“整合終端”
-
切換到控制臺中的終端，然後鍵入以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
【Yeoman】
yeoman 是 Google 的團隊和外部貢獻者團隊合作開發的，他的標的是透過 Grunt（一個用於開發任務自動化的命令列工具）和 Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝為開發者建立一個易用的工作流。
cnpm install -g yo
安裝 yeoman，其中 install 是命令代表了安裝，-g 是引數代表了全域性，yo 是專案簡稱。安裝過程竟然只需要半分就完成了：
【Office模板】
yoeman 其實是一個模板載入工具， 也叫生成器（generator），我們這裡需在的是 Office 的模板，yoeman 還俱備查詢功能，我們直接查詢 Office 相關的模板。查到有兩個跟Office相關的專案，我們得到了以下這條命令：
npm install -g generator-office
預設會安裝最新的Office模板@1.1.26，但是我推薦使用@1.1.5版本，俱備可以選擇不建目錄，最後還會有一個設定導航。
npm install -g generator-office@1.1.5
在知道原理後，我這裡再提供一個更簡單的安裝方法，這裡兩個可以一併安裝了：
npm install -g yo generator-office@1.1.5
【程式碼片段】
在 GitHubGist 上（https://gist.github.com/）組合搜尋“yaml excel colorful”，其中 yaml 表示 Script Lab 程式碼片段，excel 表示這類外掛，colorful 也可以替換所你感興趣其它內容，以下為蒐集結果：
複製整個 yaml 格式的程式碼模板：
【匯出清單程式碼】
將剛才複製的程式碼匯入到 Script Lab 中，透過匯入命令，貼入完整程式碼即可：
匯出清單（manifest）和程式碼（html）
解壓縮後得到，得到四個檔案，新建一個目錄，並將上面兩個檔案制復過去：
colorful-patterns.htmlcolorful-patterns--manifest.xmlcolorful-patterns--snippet-data.yamlREADME.md
【生成專案】
在 VSCODE 中，透過一句命令，來建立 Office Add-in 專案：
yo office保留當前目錄（Y），專案名稱定一個（當前是：colorful-patterns），專案型別（Excel），建立專案程式碼，選擇程式碼形式（TypeScript），專案生成後，選擇專案引導（Y）。
生成的檔案目錄結構如下：
【替換關鍵檔案】
以下是教程的最關鍵點，你可以將之前匯出的檔案（manifest+html），將其複製並貼上到現有專案中，就可以輕鬆將Script Lab 轉轉換功能完備的web add-ins 外掛專案了。
colorful-patterns–manifest.xml 複製到根目錄（對應 colorful-patterns-manifest.xml 可刪）
colorful-patterns.html 複製到 Scr 目錄下（對應 index.html，可刪）
【修改清單檔案】
修改清單檔案：colorful-patterns–manifest.xml
清單檔案後面的課程中將會專題介紹，這裡只提一下幾個關鍵的修改點，最重要的一點是替換啟動頁面，將預設的index.html改為Script Lab 生成的頁面：
清單檔案中所有文字的地方，進行漢化或修改：
【上傳清單檔案】
請按CTRL +`開啟或傳回整合終端。輸入：
npm start將在Chrome中開啟您的專案。並可能會收到該站點不受信任的警告，單擊“高階”並選擇信任仍然/繼續。或按照以下引導頁進行認證主置，不在綴述：
開啟另一個選項卡，然後瀏覽到office365.com，登入帳戶。在左上角的Office選單上，單擊Excel。在“插入”選單上，單擊“Office載入項”。在對話方塊的右上角，單擊“上載我的載入項”。單擊“瀏覽”，上傳清單檔案（colorful-patterns–manifest.xml）。的載入項現在將載入到“主頁”選項卡上，切換到該選項卡，然後按“顯示任務窗格”。
以上步驟將向你展示如何將 Script Lab 轉為一個完整的 Web Add-ins 載入專案，Office Online中測試它。
-
獲取GIST程式碼片段；
-
匯入Script Lab 併成生清單檔案；
-
用 yeoman + Office 模板，生成空專案；
-
替換 manifest、html 檔案
-
修改 manifest 檔案
-
上傳 Office Online
