Script Lab 10：為Officejs開發配置VSCode環境
- 2019 年 11 月 27 日
- 筆記
準備
Script Lab 初級程教程己經靠一段落，前後共了9篇，作為 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 [email protected]
在知道原理後，我這裡再提供一個更簡單的安裝方法，這裡兩個可以一併安裝了：
npm install -g yo [email protected]
創建
【代碼片段】
在 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 生成的頁面：
<bt:Url id="Contoso.Taskpane.Url" DefaultValue="https://localhost:3000/colorful-patterns.html" />
清單文件中所有文字的地方，進行漢化或修改：
<DisplayName DefaultValue="對照漢化！" /> <Description DefaultValue="[對照漢化！]"/> <bt:String id="Contoso.TaskpaneButton.Label" DefaultValue="對照漢化！" /> <bt:String id="Contoso.Group1Label" DefaultValue="對照漢化！" /> <bt:String id="Contoso.GetStarted.Title" DefaultValue="對照漢化！" /> <bt:String id="Contoso.TaskpaneButton.Tooltip" DefaultValue="對照漢化！" /> <bt:String id="Contoso.GetStarted.Description" DefaultValue="對照漢化！." />
【上傳清單文件】
請按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
