墊場AA：深度：從 Office 365 新圖標來看微軟背后的設(shè)計新理念

--------------------------------------------------

前期01：嘗試：Script Lab，快速 Office 365 開發(fā)工具

前期02：嘗試：Script Lab，知識儲備

前期03：實踐：Script Lab，啟動函數(shù)，Excel 基礎(chǔ)操作（1）

前期04：實踐：Script Lab，九九乘法表，Excel 基礎(chǔ)操作（2）

前期04：Script Lab ，Office JavaScript API助手，Excel 基礎(chǔ)操作（3）

前期06：Script Lab ，事件處理，Excel 基礎(chǔ)操作（4）

前期07：Script Lab，單詞“卡拉OK”，Word 基礎(chǔ)操作

前期08：Script Lab，異步調(diào)用函數(shù)，PowerPoint 基礎(chǔ)操作

--------------------------------------------------

墊場BB：為 Officejs 開發(fā)配置 VSCode 環(huán)境

準備

Script?Lab 初級程教程己經(jīng)靠一段落，前后共了8篇，作為?OfficeJS?開發(fā)入門己經(jīng)綴綴有余。假設(shè)你使用Script Lab 創(chuàng)建了一個加載項的片段，那么你一定想把它變成一個一個獨立的加載項。經(jīng)過反復(fù)的償試，還真找到一個最佳方法，可以輕松將代碼片段轉(zhuǎn)換為 OfficeJS?加載項。接著我們將進入第二階段，向正式的 Web Add-ins?開發(fā)進軍。

今天的內(nèi)容將涉及大量的實操和安裝過程，基本上是照著流程一步步來完成，半以一個最簡單的?Script?Lab?示例來操作，來最終完成一個?Web Add-ins?插件。

工具

這次我們將使用 VSCode?而不是?VS?來開發(fā)OfficeJS（Office 365 Web?Add-ins）。VSCode??是一個非常有用的輕量級的代碼編輯工具（就是這兩天，許豪同志還在籌備相關(guān)的教程或?qū)?#xff09;。除此之外，還需要兩個輔助的工具，第一個是?Node Package Manager（NPM），和 Git?工具。通過?NPM?還將安裝 Yoeman ，通過 yo?與 Git 等工具的配合，我們也將擁有一個令人驚訝的強大開發(fā)環(huán)境，說實話回到字符界面，就像回到 90 年代還在玩?DOS?的過程，“握控一切”的感覺實在是太好了（用了 VS 就不俱備了）。

【VSCode】

下載并安裝VSCode，網(wǎng)址如下：

https：//code.visualstudio.com/

【nodejs】

下載并安裝Node以獲取節(jié)點包管理器（NPM），網(wǎng)址如下：

https：//nodejs.org/en/download/

【Git】

下載并安裝Git，網(wǎng)址如下：

https：//git-scm.com/download

Yeoman

【CNPM?】

三大基礎(chǔ)工具裝好后，接著就是開始著 Yeoman?的安裝了。之前的安裝過程還都有順利，但是到了這個環(huán)節(jié)時，還是遇到了一些小小的麻煩。網(wǎng)速問題導(dǎo)致晚上無法更新完成。臨近11：30了，還沒有見到安裝完成的希望。今天這篇公眾號文章，看樣子是沒辦法完整的發(fā)出了，自打1月22日開號以來，可能是第一次斷更的情況了。求助萬能的大牛群?dotnet跨平臺(飛雪)交流群，果然得到了答案，方知在國內(nèi)該使用 cnpm?才對，并且得到了正確的命令（感謝 瑋仔Wayne?的指導(dǎo)）。

我們現(xiàn)在需要做的是安裝 CNPM，按以下流程操作：

打開VSCode

按CTRL +`。這將打開控制臺窗口。或者，您可以轉(zhuǎn)到“視圖”菜單，然后單擊“集成終端”

切換到控制臺中的終端，然后鍵入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

【Yeoman】

yeoman 是 Google 的團隊和外部貢獻者團隊合作開發(fā)的，他的目標是通過 Grunt（一個用于開發(fā)任務(wù)自動化的命令行工具）和 Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝為開發(fā)者創(chuàng)建一個易用的工作流。

cnpm?install?-g?yo

安裝 yeoman，其中 install?是命令代表了安裝，-g?是參數(shù)代表了全局，yo?是項目簡稱。安裝過程竟然只需要半分就完成了：

【Office模板】

yoeman 其實是一個模板加載工具，?也叫生成器（generator），我們這里需在的是?Office?的模板，yoeman?還俱備查詢功能，我們直接查詢?Office?相關(guān)的模板。查到有兩個跟Office相關(guān)的項目，我們得到了以下這條命令：

npm install -g generator-office

默認會安裝最新的Office模板@1.1.26，但是我推薦使用@1.1.5版本，俱備可以選擇不建目錄，最后還會有一個設(shè)置導(dǎo)航。

npm?install?-g?generator-office@1.1.5

在知道原理后，我這里再提供一個更簡單的安裝方法，這里兩個可以一并安裝了：

npm?install?-g?yo?generator-office@1.1.5

創(chuàng)建

【代碼片段】

在 GitHubGist 上（https://gist.github.com/）組合搜索“yaml excel colorful”，其中?yaml?表示 Script Lab?代碼片段，excel?表示這類插件，colorful?也可以替換所你感興趣其它內(nèi)容，以下為搜集結(jié)果：

復(fù)制整個?yaml?格式的代碼模板：

【導(dǎo)出清單代碼】

將剛才復(fù)制的代碼導(dǎo)入到?Script?Lab?中，通過導(dǎo)入命令，貼入完整代碼即可：

導(dǎo)出清單（manifest）和代碼（html）

解壓縮后得到，得到四個文件，新建一個目錄，并將上面兩個文件制復(fù)過去：

colorful-patterns.htmlcolorful-patterns--manifest.xmlcolorful-patterns--snippet-data.yamlREADME.md

【生成項目】

在?VSCODE?中，通過一句命令，來創(chuàng)建 Office Add-in 項目：

yo office

保留當前目錄（Y），項目名稱定一個（當前是：colorful-patterns），項目類型（Excel），創(chuàng)建項目代碼，選擇代碼形式（TypeScript），項目生成后，選擇項目引導(dǎo)（Y）。

生成的文件目錄結(jié)構(gòu)如下：

改造

【替換關(guān)鍵文件】

以下是教程的最關(guān)鍵點，你可以將之前導(dǎo)出的文件（manifest+html），將其復(fù)制并粘貼到現(xiàn)有項目中，就可以輕松將Script Lab?轉(zhuǎn)轉(zhuǎn)換功能完備的web add-ins?插件項目了。

colorful-patterns--manifest.xml?復(fù)制到根目錄（對應(yīng) colorful-patterns-manifest.xml?可刪）

colorful-patterns.html?復(fù)制到?Scr?目錄下（對應(yīng) index.html，可刪）

【修改清單文件】

修改清單文件：colorful-patterns--manifest.xml

清單文件后面的課程中將會專題介紹，這里只提一下幾個關(guān)鍵的修改點，最重要的一點是替換啟動頁面，將默認的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中打開您的項目。并可能會收到該站點不受信任的警告，單擊“高級”并選擇信任仍然/繼續(xù)。或按照以下引導(dǎo)頁進行認證主置，不在綴述：

打開另一個選項卡，然后瀏覽到office365.com，登錄帳戶。在左上角的Office菜單上，單擊Excel。在“插入”菜單上，單擊“Office加載項”。在對話框的右上角，單擊“上載我的加載項”。單擊“瀏覽”，上傳清單文件（colorful-patterns--manifest.xml）。的加載項現(xiàn)在將加載到“主頁”選項卡上，切換到該選項卡，然后按“顯示任務(wù)窗格”。

總結(jié)

以上步驟將向你展示如何將 Script Lab 轉(zhuǎn)為一個完整的 Web Add-ins 加載項目，Office Online中測試它。

獲取GIST代碼片段；

導(dǎo)入Script Lab 并成生清單文件；

用 yeoman + Office 模板，生成空項目；

替換 manifest、html 文件

修改 manifest 文件

上傳 Office Online

?學習群

作者：寒樹Office

介紹：Office 365?開發(fā)學習群（每日更新）

群號：976054900

?參加大會

歡迎您報名注冊 Microsoft 365 DevDays (上海)，歡迎加群咨詢。

日期：4月13日-14日，

地址：上海市，徐匯區(qū)，古美路1528號A7一樓漕河涇開發(fā)區(qū)會議中心，

總結(jié)

以上是生活随笔為你收集整理的Script Lab 续：为 Officejs 开发配置 VSCode 环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。