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部件包的各部分构成。
SharePoint Framework 在web部件中使用第三方样式 - 将第三方样式打到包中的更多相关文章
- SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式
博客地址:http://blog.csdn.net/FoxDave JavaScript库格式 不同的JavaScript库的编译和打包方式各不相同.一些是以模块的方式打包的,而另一些是以纯脚本运行在 ...
- SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用
博客地址:http://blog.csdn.net/FoxDave 在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案.但是在使用的时候你需要考虑你引用的 ...
- SharePoint Framework 向web部件中添加外部库
博客地址:http://blog.csdn.net/FoxDave 在进行开发的时候,你很可能会想要引用一些公开的JavaScript库到你的项目中,本文将会介绍如何打包和共享这些库. 打包脚本 默认 ...
- SharePoint Framework 在Visual Studio Code中调试你的托管解决方案
博客地址:http://blog.csdn.net/FoxDave 上一篇介绍了如何在本地调试你的SharePoint Framework解决方案,本篇介绍如何调试你的SharePoint Onl ...
- SharePoint Framework 概述
博客地址:http://blog.csdn.net/FoxDave 本文翻译自新出的SharePoint Framework概述介绍文章,原文地址:http://dev.office.com/sh ...
- Sharepoint 2013内容查询Web部件自定义显示样式(实战)
分享人:广州华软 星尘 一. 前言 在进行Sharepoint开发时,经常会遇到内容展示个性化需求的问题,当然如果通过自定义开发控件对于内容展示的需求基本都可以很好的解决,但自定义开发也有不好的地方, ...
- SharePoint每日小贴士Web部件
SharePoint每日小贴士Web部件 项目描写叙述 此Web部件从指定SP自己定义列表或一个选定的 RSS源选择一个随机项目.并显示一张图片.标题和一个Tip. 适 ...
- SharePoint Framework 配置Office 365开发者租户
博客地址:http://blog.csdn.net/FoxDave 你需要一个Office 365开发者租户来使用预览版SharePoint Framework构建和发布客户端web部件.你的租户 ...
- SharePoint Framework:下一代开发方式
SharePoint Framework(SPFx),是页面 和Webpart的模型,完全支持本地开发(即完全可以脱离SharPoint环境在本地进行开发),听起来是不是很高级呢,早期SharePoi ...
随机推荐
- Cow Cycling 动态规划
1552: Cow Cycling 时间限制(普通/Java):1000MS/10000MS 内存限制:65536KByte总提交: 39 测试通过:20 描述 The ...
- 如何在Ubuntu 18.04上安装Pip
一.简介: Pip是一个软件包管理系统,它简化了用Python编写的软件包(如Python包索引(PyPI)中的软件包)的安装和管理. 在Ubuntu 18.04上缺省没有安装Pip,但安装非常简单. ...
- Oracle高级查询之over(partition by...)
现有表,数据如下: eg1:查询年龄第二的队员 通常写法: select * from (select a.*, rownum r from (select t.* from l_student_in ...
- line-height:150%与line-height:1.5的区别
今天看到一篇文章,说的是CSS学习中的瓶颈,我最近也发现自己css很薄弱,写的样式总是有兼容性问题,要写很久,发现了一个问题,我从来没有用过line-height:150和line-height:1. ...
- centos6.0和7.4默认网卡配置
6.0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE="eth0" NM_CONTROLLED="yes&qu ...
- laravle 整合 thrift
1,安装thrift https://www.cnblogs.com/sunlong88/p/9965522.html 2,生成 RPC文件 thrift -r --out ./app --gen p ...
- python_内置函数
#内置函数 #1.abs 获取绝对值 # abs(-10) # --->10 # # abs(10) # --->10 # # abs(0) # --->0 #2.all() 参数为 ...
- mysql 循环、游标
mysql 循环只能在存储过程.代码记录 CREATE DEFINER=`front`@`%` PROCEDURE `a_1`() BEGIN -- 声明变量,接收游标循环变量 DECLARE _co ...
- day 02 python 基础
1.day1作业讲解 题目答案见day1 2.格式化输出 %占位符,s:字符串,d:数字 %%只是单纯的显示%(显示的%是后面的) #格式化输出 # % s d # name = input('请输入 ...
- eXosip2 编译安装
eXosip2-3.6.0 编译安装 刚开始我使用了 下面文章介绍里版本 我以为不支持tcp 其实是因为我服务端的端口 没有写对. https://www.cnblogs.com/elisha-bl ...