SharePoint Framework 在web部件中使用第三方样式

博客地址：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部件包的各部分构成。