SharePoint Framework (SPFx)安装配置及开发手册之开始准备(一)

本文介绍了SharePoint Framework (SPFx),一种适用于SharePoint Online和本地部署的新型开发模型。SPFx通过前端与后端分离的方式提高了开发效率,解决了SharePoint Online环境下传统开发方式存在的问题。文章还详细介绍了SPFx的开发环境搭建、使用的开发类库和技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

注:本文原作者未忘忧草,经其本人授权,稍作修改在自己博客发表,在此表示感谢!


一:什么是SPFx

SharePoint Framework(SPFx),是微软最新的SharePoint开发模型,采用前端和后端分离方式,及前端页面和后端Webpart的模型,更加符合云计算模式,同时也支持传统的本地部署SharePoint Server产品


开发效率较传统方式也有部分提高(待实际项目验证)


二:为什么微软会花大力气构建SPFx

SharePoint Online出来之前,对于SharePoint WebPart的开发,基本上都是基于SharePoint服务器对象模型,编写C#代码然后编译成dll,部署到服务器场中,

但是在SharePoint Online流行以后,需要新的开发模式来适应云计算潮流。为了解决这个问题,微软引入了两种方式:


1:JS注入

在SharePoint Online中最常用的Webpart就是Content Editor和Script Editor,你可以使用JSOM或者REST API读取数据,然后显示在页面上,使用起来比较方便。但是这种方式还是有很多的缺点,例如:

A:部署起来比较麻烦。

B:不能给客户提供合理的配置界面,多数配置信息都是在code中写的。

C: End user很容易不小心把code修改坏了,导致webpart不工作。

最重要的是Script Editor并不是“Safe ForScripting”多数Self-service 站点都会开启一个NoScript的feature,这样ScriptEditor中的脚本会被Block


2:SharePoint Add-in 方式

使用SharePoint Host的App Part的方式,这种方式实际上是把webpart做为一个Iframe引入到页面中,AppPart对应的页面实际上运行在一个独立的site里面,这种webpart可以添加到NoScript的站点中。但是这种方式也有一些缺点主要如下:

A: 这些code运行在Iframe中,这种方式会比Script Editor的方式慢,因为这种方式需要请求另一个页面,另一个页面也需要进行身份验证等操作。

B: 这种方式很难实现响应式布局,因为这个webpart实际上是在不同的页面中的,并且对于Iframe,Media query获得的屏幕大小实际上是Iframe的宽度,并不是真正意义上的屏幕宽度


上面两种方式,各有优缺点,微软干脆结合两种方式,取长补短,推出了SharePoint Framework作为下一代的开发方式,无论是云端还是本地,都可以适应,开发流程如下:



总结:

说白了,微软也是在自我革命,同时借助开源的力量,花大力气推广云端产品,花大力气推广云端开发!

未来必然是云计算的时代


三:SPFx开发环境准备

需要安装如下开发工具

1:NodeJS Long Term Support (LTS) version

2:VisualStudio Code

3:Python 2.7.x

如果使用Visual Studio,还需要如下

4:Visual Studio 2015 plus Latest Update 3

5:NodeJS Tools for Visual Studio

需要SharePoint Server 2016或者SharePoint Online环境


四:开发类库

1: TypeScript

TypeScript是比JavaScript更高级的语言,TypeScript中可以定义数据类型,接口,类,等等并且TypeScript最终可以编译成JavaScript,SharePoint的client-side development tools就是使用Type Script的类,模型和接口来构建的。

2:JavaScript Frameworks

可以使用比较熟悉的JavaScript框架来开发client-side web parts,以下是比较流行的JS框架:

·       React

·       AngularJS1.x

·       Angular 2for Type Script 2.x

·       Handlebars

因为编写client-side web part多数都是和SharePoint进行交互,所以这里建议大家使用SharePointPnP JavaScript Core library 框架,在这个框架中已经为 封装好了很多简单易用的API

3:Node Package Manager (npm)
SharePoint client-side 开发工具使用npm来管理依赖以及必要的Js库,安装Node.js会自动安装npm。

4:Node.js
Node.js是一个开源,用于运行JavaScript 代码的跨平台运行环境。Node.js类似于IIS Express和IIS。


5:Gulp task runner
SharePoint client-side 开发工具使用gulp打包工具做如下操作:
Bundle and minify JavaScript and CSS files.
Run tools to call the bundling and minification tasks before each build.
Compile LESS or SASS files to CSS.
Compile TypeScript files to JavaScript.


6:Yeoman generators
Yeoman用于创建新的client-side web parts的工程,一旦工程创建完毕之后,你可以选择自己喜欢的IDE进行开发,常用的IED是Visual studio Code,Sublime Text或者Atom。


7:SharePoint REST API
SharePoint REST API主要用于和SharePoint环境交互,例如:添加删除修改list中的数据等等。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值