在Visual Studio Code中開發(fā)Office Add-in

admin

有些朋友可能已經(jīng)知道，Visual Studio家族這些年增加了一個新的成員—— Visual Studio Code。這是一款跨平臺的代碼編輯工具（可以愉快地在PC,Mac,Linux上面運行），它更加輕量，主要面向新一代的Web應(yīng)用開發(fā)人員而設(shè)計（毫無意外，它也吸引了包括我在內(nèi)的老一輩的Visual Studio的忠實用戶的廣泛關(guān)注），對幾乎所有的開源平臺和開發(fā)語言都有較好的支持。

Visual Studio Code提供了對Office Add-in 開發(fā)的完美支持，這一篇文章就帶領(lǐng)大家來完整體驗一下。

安裝工具

除了安裝Visual Studio Code 之外，要進行Office Add-in的開發(fā)，你還需要做一些額外的準備。這是跟Visual Studio略有不同的地方：它會多一些步驟，但這種留給開發(fā)人員的可控性也從一定程度上促使我們了解更多細節(jié)，我想這也是有不少開發(fā)人員喜歡Visual Studio Code（或者同類以代碼為中心的編輯器）的原因之一吧。

1. 安裝node.js。node.js 是這幾年涌現(xiàn)出來的一個廣受歡迎的全新開發(fā)工具，它顛覆了我們對于Javascript能力邊界的認識，并且在高并發(fā)，但低計算的Web應(yīng)用場景有較好的表現(xiàn)。關(guān)于這個話題，如果要展開來又可以講幾天幾夜了，所以就此打住，請通過https://nodejs.org/en/download/ 進行安裝并且通過下面的命令確認其是否安裝正確。  


2.安裝node.js版本的Office add-in模板。雖然Visual Studio Code強調(diào)以代碼為中心，但也不是說什么都要從零開始做。node.js的很多開發(fā)場景，也都有配套的模板來輔助開發(fā)。要實現(xiàn)這個目的，首先需要安裝一個yo的模塊。這是很有意思的，yo其實不是模板，而是一個工具，用來加載模板（或者在它來看是所謂的生成器—— generator）。下面這一行命令，既安裝了yo，也安裝了一個office開發(fā)對應(yīng)的generator。

1. <div>npm install -g yo generator-office</div>

復(fù)制代碼

yo 這個工具的全稱是yeoman, 有興趣請參考它的官方網(wǎng)站 http://yeoman.io/, 甚至也可以提交自己的generator

創(chuàng)建項目

做了上述的準備后，我們就可以通過一句命令來創(chuàng)建Office Add-in 項目了

1. yo office

復(fù)制代碼

此時同樣會有一個向?qū)�問你幾個問題，在你做出自己的選擇并且最終按下回車鍵后，它就會自動地生成一個office add-in項目出來，這是一個基于node.js的項目。

如果你的最后一個問題跟我一樣回答了“Yes”的話，在項目生成后，還會自動打開一個很貼心的操作指南

通過下面的命令可以將這個項目運行起來

1. npm start

復(fù)制代碼

調(diào)試項目

那么，怎么讓這個add-in在Excel里面運行起來呢？上面提到的操作指南給出了一個步驟

但是，這個步驟可能是錯誤的。我在最新版本的Office 客戶端中并沒有看到上傳add-in的鏈接。經(jīng)過一些研究，我發(fā)現(xiàn)下面的方法是奏效的。

Sideload Office Add-ins for testing https://dev.office.com/docs/add- ... and-content-add-ins

簡單地說，你需要將add-in的manifest文件復(fù)制到一個共享目錄

然后將這個目錄加入到Office客戶端的信任位置中去

如你所見，這里還可以設(shè)置其他一些catalog的路徑，包括SharePoint站點。這個會在后續(xù)進行介紹。

完成上述步驟后，你就可以在插入add-in的窗口中看到相關(guān)的add-in了

如果點擊“Add”，Excel會加載這個Add-in。作為一個還沒有做過任何改動的標準add-in，它目前做的事情只會增加一個Show Taskpane的按鈕，點擊之后就可以打開任務(wù)面板。

需要注意的是，Office Add-in要求的Web Url是使用https的，而在本機測試的時候，因為證書是自簽名的，所以會顯示錯誤，但可以點擊查看詳情，繼續(xù)運行

如果有興趣，你可以留意一下此前那個命令行窗口

使用Visual Studio Code進行編程

使用Visual Studio Code打開這個項目（準確來說是一個目錄，因為在Code里面其實沒有項目的概念）后，會看到如下的目錄結(jié)構(gòu)

最右側(cè)的manifest不用多說了，內(nèi)容跟上一篇文章的例子是基本相同的。有意思的是中間的app.ts文件。這又是什么呢？

ts文件是TypeScript文件，而TypeScript是一種自由和開源的編程語言。它是JavaScript的一個嚴格的超集，并且添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊�。TypeScript是著名的Turbo Pascal，Delphi和C#的發(fā)明者 安德斯·海爾斯伯格 的又一力作。

我不準備在這里對TypeScript進行過多展開，但我充分理解現(xiàn)在在看文章的你，可能會有這樣的感慨：哇，看起來不錯！嗯，又要學(xué)新東西了。

這是一個事實，但是我相信你會最終喜歡這種變化。歡迎來到一個全新的，動態(tài)的世界。

作者 ：陳希章陳希章陳希章