SharePoint Framework 在web部件中使用第三方樣式 - 將第三方樣式打到包中

Justin-Liu發表於2018-02-05
FrameworkWeb

部落格地址：http://blog.csdn.net/FoxDave

有許多第三方庫可以幫助我們構建豐富的SharePoint Framework客戶端web部件。並且這些JavaScript指令碼常常包含一些資產如樣式表。本文將介紹如何將第三方的CSS打包到你的Solution中。本示例將使用jQuery和jQuery UI來顯示一個摺疊樣式。

Note: 在此之前你需要先配置一下SPFx客戶端web部件的開發環境。

準備專案

建立一個新的專案

首先開啟命令列，在你喜歡的目錄建立一個專案目錄，如md js-thirdpartycss，然後通過cd命令進入到該目錄。執行命令yo @microsoft/sharepoint來使用Yeoman generator來搭建一個新的SPFx專案。之前的文章裡也有相關的具體描述，這裡不再贅述了。

建立完專案之後，執行命令npm shrinkwrap來鎖定專案當前依賴庫的版本。然後用VS Code開啟你的專案。


新增測試內容

開啟檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，將render方法修改為如下程式碼：

export default class JQueryAccordionWebPart extends BaseClientSideWebPart<IJQueryAccordionWebPartProps> {
  // ...
  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <div class="accordion">
          <h3>Information</h3>
          <div>
            <p>
            The Volcanoes, crags, and caves park is a scenic destination for
            many visitors each year. To ensure everyone has a good
            experience and to preserve the natural beauty, access is
            restricted based on a permit system.
            </p>
            <p>
            Activities include viewing active volcanoes, skiing on mountains,
            walking across lava fields, and caving (spelunking) in caves
            left behind by the lava.
            </p>
          </div>
          <h3>Snow permit</h3>
          <div>
            <p>
            The Northern region has snow in the mountains during winter.
            Purchase a snow permit for access to approved ski areas.
            </p>
          </div>
          <h3>Hiking permit</h3>
          <div>
            <p>
            The entire region has hiking trails for your enjoyment.
            Purchase a hiking permit for access to approved trails.
            </p>
          </div>
          <h3>Volcano access</h3>
          <div>
            <p>
            The volcanic region is beautiful but also dangerous. Each
            area may have restrictions based on wind and volcanic
            conditions. There are three type of permits based on activity.
            </p>
            <ul>
              <li>Volcano drive car pass</li>
              <li>Lava field access permit</li>
              <li>Caving permit</li>
            </ul>
          </div>
        </div>
      </div>`;

      ($('.accordion', this.domElement) as any).accordion();
  }
  // ...
}
這時先不要編譯專案，因為編譯的時候你會得到一個錯誤提示$未定義，這是因為專案沒有首先載入引用的jQuery。而將第三方庫打到包中是最簡單的方式，在包部署的時候會引用包中存在的第三方庫。

執行下面的命令安裝jQuery和jQuery UI：

npm install jquery jquery-ui --save
由於我們使用的是TypeScript進行開發，我們還需要TypeScript的jQuery型別，使用下面的命令執行安裝：

npm install @types/jquery --save
在web部件中引用樣式庫

安裝了庫之後，下一步就是在專案中引用它們。開啟檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，在頂部最後一個import引用宣告下面新增jQuery和jQuery UI的引用。

import * as $ from 'jquery';
require('../../../node_modules/jquery-ui/ui/widgets/accordion');
由於我們已經安裝了TypeScript的jQuery型別包，我們可以使用import進行引入。jQuery UI這個包比較特殊，它跟其他的模組結構不太一樣，並沒有一個主入口來呼叫所有的元件，所有我們需要進行明確的直接引用。

接下來使用gulp serve命令編譯專案，然後就可以通過工作臺新增web部件看效果了。


現在的這個是缺少樣式的，也就是說接下來我們要將樣式新增到web部件中。

在web部件中引用第三方CSS樣式

SPFx提供了從Webpack載入CSS的標準支援。開啟檔案./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts，在上面新增的程式碼之後繼續新增下面的require宣告。

require('../../../node_modules/jquery-ui/themes/base/core.css');
require('../../../node_modules/jquery-ui/themes/base/accordion.css');
require('../../../node_modules/jquery-ui/themes/base/theme.css');
非常簡單，跟在頁面上引用基本類似，只需要指明CSS的路徑就可以了。在編譯專案時，Webpack會將這些引用的檔案放到web部件包中。再次執行gulp serve命令後檢視效果。


分析生成的web部件包的內容

使用第三方庫最簡單的方式就是將它們包含到web部件包中。Webpack會自動解析所有的依賴項以確保所有的指令碼以正確的順序載入。這種方式的不足是所有的引用資源都會在每個web部件單獨載入。如果我們的專案中有多個web部件都使用jQuery UI，每個web部件都會載入自己的jQuery UI副本，因此會減慢頁面的載入速度。

來看看打到web部件包中對尺寸的影響，在打包完成之後在瀏覽器中開啟檔案./temp/stats/js-thirdpartycss.stats.html。在圖表上移動滑鼠你就會看到相應的資訊，例如下圖中的被web部件引用的jQuery UI CSS檔案佔據了6%的總大小。


圖表下方的免責宣告中提到，尺寸表示的是除錯版本的包的大小。釋出版本包會小很多。從圖表中也能清晰地看到web部件包的各部分構成。

相關文章