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

  • 时间:
  • 浏览:1

在web部件中从URL引用库

在SPFx项目中指定了加载jQuery和jQuery UI的URL后,下一步是在项目中进行引用,打开文件./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts,在文件的顶部import声明的下面,加上如下代码:

在打包时,它们会被标记为內部资源,就是太久中含在包中。运行命令gulp serve来启动项目。在弹出的工作台页面中,加上web部件到画板中,打开浏览器的debug tool并转到network标签页,刷新页面。朋友还太久 都看jQuery加载的地址:

在web部件在页面实例化后后,它会从指定的URL加载jQuery UI的CSS。

再次查看页面,还太久 都看样式出来了。

分析web部件包的内容

在编译完项目后后,在浏览器中打开文件./temp/stats/js-thirdpartycss.stats.html,还太久 都看包明显小了就是 ,变成了7KB(后后是30KB),就是jQuery和jQuery UI并沒有图表中显示了,可能它们是在web部件运行时加载了。

使用SPComponentLoader从URL加载样式打开文件./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts,在顶部import声明的下面,加上如下代码:

就是重写onInit()方法:

指定库的URL从俩个 URL加载第三方库,你需要在项目的配置文件中指定该库URL的地址。打开文件./config/config.json,在externals次责加上jQuery相关的代码,加上完的代码所示:

细心的就是你发现,上图的折叠样式不到 显示出来,从请求查看器中朋友还太久 都看只加载了jQuery UI的脚本,就是并不到 加载CSS样式。

在web部件中引用第三方CSS样式表前面提到的config.json文件只支持加上內部的脚本文件,从內部引用样式文件跟它不同,朋友需要使用SPComponentLoader。

博客地址:http://blog.csdn.net/FoxDave

本篇讲述怎样在web部件中从內部URL引用第三方样式库。

在SPFx项目中引用第三方库的另有三种方法就是从URL引用它们,如CDN或私有管理路径。你你你这人 方法最大的好处是朋友将从公共位置加载常用的库,有可能客户端的用户可能将该库下载到了本地电脑中。你你你这人 情况汇报下SPFx可能重用缓存中的库,使你的web部件加载得快一点 。

即便你不到使用公共CDN来加载库,从提高性能的宽度看也是一次很好的实践。指向URL还太久 使用户只下载一次脚本,后后在整个网站进行缓存重用,显著提升了加载页面的数率和用户体验。

在从公共URL加载第三方库时,要注意使用上的风险。可能承载它们的地址都是由你进行管理的,就是 不到确保它们的内容绝对安全。SPFx加载的脚本在当前用户的上下文运行,具有当前用户的权限。就是,可能承载脚本的地址不到访问了,你的web部件就无法工作了。

安装库的类型当你从URL引用第三方库时,你需要将朋友以包的形式在你的项目中进行安装。就是可能你太久 在开发过程中进行类型安全检查,你需要安装它们的TypeScript类型。