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部件包的各部分构成。
