SharePoint Framework (SPFx)安裝配置及開(kāi)發(fā)手冊(cè)之開(kāi)始準(zhǔn)備（一）

注：本文原作者未忘憂草，經(jīng)其本人授權(quán)，稍作修改在自己博客發(fā)表，在此表示感謝！

1：甚么是SPFx

SharePoint Framework(SPFx)，是微軟最新的SharePoint開(kāi)發(fā)模型，采取前端和后端分離方式，及前端頁(yè)面和后端Webpart的模型，更加符合云計(jì)算模式，同時(shí)也支持傳統(tǒng)的本地部署SharePoint Server產(chǎn)品

開(kāi)發(fā)效力較傳統(tǒng)方式也有部份提高（待實(shí)際項(xiàng)目驗(yàn)證）

2：為何微軟會(huì)花大力氣構(gòu)建SPFx

在SharePoint Online出來(lái)之前，對(duì)SharePoint WebPart的開(kāi)發(fā)，基本上都是基于SharePoint服務(wù)器對(duì)象模型，編寫(xiě)C#代碼然后編譯成dll，部署到服務(wù)器場(chǎng)中，

但是在SharePoint Online流行以后，需要新的開(kāi)發(fā)模式來(lái)適應(yīng)云計(jì)算潮流。為了解決這個(gè)問(wèn)題，微軟引入了兩種方式：

1：JS注入

在SharePoint Online中最經(jīng)常使用的Webpart就是Content Editor和Script Editor,你可使用JSOM或REST API讀取數(shù)據(jù)，然后顯示在頁(yè)面上，使用起來(lái)比較方便。但是這類方式還是有很多的缺點(diǎn)，例如：

A:部署起來(lái)比較麻煩。

B:不能給客戶提供公道的配置界面，多數(shù)配置信息都是在code中寫(xiě)的。

C: End user很容易不謹(jǐn)慎把code修改壞了，致使webpart不工作。

2:SharePoint Add-in 方式

使用SharePoint Host的App Part的方式，這類方式實(shí)際上是把webpart做為1個(gè)Iframe引入到頁(yè)面中，AppPart對(duì)應(yīng)的頁(yè)面實(shí)際上運(yùn)行在1個(gè)獨(dú)立的site里面，這類webpart可以添加到NoScript的站點(diǎn)中。但是這類方式也有1些缺點(diǎn)主要以下:

A: 這些code運(yùn)行在Iframe中，這類方式會(huì)比Script Editor的方式慢，由于這類方式需要要求另外一個(gè)頁(yè)面，另外一個(gè)頁(yè)面也需要進(jìn)行身份驗(yàn)證等操作。

B: 這類方式很難實(shí)現(xiàn)響應(yīng)式布局，由于這個(gè)webpart實(shí)際上是在不同的頁(yè)面中的，并且對(duì)Iframe，Media query取得的屏幕大小實(shí)際上是Iframe的寬度，其實(shí)不是真正意義上的屏幕寬度

上面兩種方式，各有優(yōu)缺點(diǎn)，微軟干脆結(jié)合兩種方式，揚(yáng)長(zhǎng)避短，推出了SharePoint Framework作為下1代的開(kāi)發(fā)方式，不管是云端還是本地，都可以適應(yīng)，開(kāi)發(fā)流程以下:

總結(jié)：

說(shuō)白了，微軟也是在自我革命，同時(shí)借助開(kāi)源的氣力，花大力氣推行云端產(chǎn)品，花大力氣推行云端開(kāi)發(fā)！

未來(lái)必定是云計(jì)算的時(shí)期

3：SPFx開(kāi)發(fā)環(huán)境準(zhǔn)備

需要安裝以下開(kāi)發(fā)工具

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

4：開(kāi)發(fā)類庫(kù)

1： TypeScript

TypeScript是比JavaScript更高級(jí)的語(yǔ)言，TypeScript中可以定義數(shù)據(jù)類型，接口，類，等等并且TypeScript終究可以編譯成JavaScript，SharePoint的client-side development tools就是使用Type Script的類，模型和接口來(lái)構(gòu)建的。

2：JavaScript Frameworks

可使用比較熟習(xí)的JavaScript框架來(lái)開(kāi)發(fā)client-side web parts，以下是比較流行的JS框架:

·       React

·       AngularJS1.x

·       Angular 2for Type Script 2.x

·       Handlebars

由于編寫(xiě)client-side web part多數(shù)都是和SharePoint進(jìn)行交互，所以這里建議大家使用SharePointPnP JavaScript Core library 框架，在這個(gè)框架中已為 封裝好了很多簡(jiǎn)單易用的API。

3：Node Package Manager (npm)
SharePoint client-side 開(kāi)發(fā)工具使用npm來(lái)管理依賴和必要的Js庫(kù)，安裝Node.js會(huì)自動(dòng)安裝npm。

4：Node.js
Node.js是1個(gè)開(kāi)源，用于運(yùn)行JavaScript 代碼的跨平臺(tái)運(yùn)行環(huán)境。Node.js類似于IIS Express和IIS。

5：Gulp task runner
SharePoint client-side 開(kāi)發(fā)工具使用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用于創(chuàng)建新的client-side web parts的工程，1旦工程創(chuàng)建終了以后，你可以選擇自己喜歡的IDE進(jìn)行開(kāi)發(fā)，經(jīng)常使用的IED是Visual studio Code,Sublime Text或Atom。

7：SharePoint REST API
SharePoint REST API主要用于和SharePoint環(huán)境交互，例如：添加刪除修改list中的數(shù)據(jù)等等。

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)