歡迎光臨
每天分享高質量文章

Script Lab 續:為 Officejs 開發配置 VSCode 環境

 

準備

 

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

 

Yeoman

 

【CNPM 】

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

我們現在需要做的是安裝 CNPM,按以下流程操作:

  1. 打開VSCode

  2. 按CTRL +`。這將打開控制台視窗。或者,您可以轉到“視圖”選單,然後單擊“集成終端”

  3. 切換到控制臺中的終端,然後鍵入以下命令:

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中測試它。

  1. 獲取GIST代碼片段;

  2. 匯入Script Lab 併成生清單檔案;

  3. 用 yeoman + Office 模板,生成空專案;

  4. 替換 manifest、html 檔案

  5. 修改 manifest 檔案

  6. 上傳 Office Online

    赞(0)

    分享創造快樂