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

  • 时间:
  • 浏览:0
  • 来源:大发快3官方直播—彩神UU快三代理

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

细心的我希望你发现,上图的折叠样式没有显示出来,从请求查看器中亲戚亲戚大家可不并能 看一遍只加载了jQuery UI的脚本,我希望并没有加载CSS样式。

在web部件中引用第三方CSS样式表前面提到的config.json文件只支持加进实物的脚本文件,从实物引用样式文件跟它不同,亲戚亲戚大家并能 使用SPComponentLoader。

分析web部件包的内容

在编译完项目刚刚 ,在浏览器中打开文件./temp/stats/js-thirdpartycss.stats.html,可不并能 看一遍包明显小了什么都有,变成了7KB(刚刚 是3000KB),我希望jQuery和jQuery UI并没哟图表中显示了,我希望它们是在web部件运行时加载了。

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

我希望重写onInit()办法:

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

再次查看页面,可不并能 看一遍样式出来了。

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

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

在SPFx项目中引用第三方库的另四种 办法也不从URL引用它们,如CDN或私有管理路径。你什儿 办法最大的好处是亲戚亲戚大家将从公共位置加载常用的库,有我希望客户端的用户我希望将该库下载到了本地电脑中。你什儿 请况下SPFx我希望重用缓存中的库,使你的web部件加载得更快。

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

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

安装库的类型当你从URL引用第三方库时,你不并能 将亲戚大家以包的形式在你的项目中进行安装。我希望我希望你想要在开发过程中进行类型安全检查,你并能 安装它们的TypeScript类型。

在web部件中从URL引用库

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

在打包时,它们会被标记为实物资源,我希望不让所含在包中。运行命令gulp serve来启动项目。在弹出的工作台页面中,加进web部件到画板中,打开浏览器的debug tool并转到network标签页,刷新页面。亲戚亲戚大家可不并能 看一遍jQuery加载的地址: