SharePoint Framework项目模板生成器的增强版本 “PnP generator” 简介

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shrenk/article/details/86691035

SharePoint Framework的yeoman项目模板生成器,是SharePoint Framework开发的主要工具。通过生成器可以自动创建不同的项目模板,方便项目的开发和部署。但是目前SPFx的yeoman模板生成器(以下简称SPFx generator)虽然已经是1.7.1的版本了,但还是有一些不方便的地方,例如:

  1. 提供的前段框架较少。目前SPFx generator只提供了React和Knockout这两个前端框架,其他的流行框架例如Vue.js, Angular, Handbars, JQuery等等,都没有默认包含进来,所以对于熟悉这些框架的开者来说还不够友好。
  2. 缺少代码分析和测试工具
  3. 没有默认集成pnpjs和pnp控件

针对以上问题,Office开发社区基于现有的SPFx generator 1.7.1,再结合SharePoint Framework开发的最佳实践,推出了新的项目模板生成器“PnP generator”。这个生成器是对SPFx generator的增强,支持更多的前端流行框架,添加了代码分析工具和测试工具(jest,主要针对React),以及默认集成了pnpjs和pnp的控件,使得SPFx的开发更容易上手,开发流程更加完善,开发效率更高。这个工具是开源的,代码地址:https://github.com/pnp/generator-spfx/

三张图看懂新功能 (图片来自官网,针对SharePoint online和SharePoint 2019):

1. 支持的新框架,集成pnpjs,pnp控件:

2. 对不同框架代码审查的支持

3. 对测试工具的支持,目前仅支持ReactJS和无框架的纯js:

可以使用如下npm命令全局安装pnp generator:

npm install -g @pnp/generator-spfx

安装完成之后使用如下命令运行项目创建向导:

yo @pnp/spfx

目前在powershell中的logo显示有些问题,正常情况是这样的:


下面使用这个新的生成器创建一个SharePoint Framework项目,具体看一下生成器的功能。

与启SPFx generator一样,启动向导之后的第一步是选择平台,这里选择SharePoint Online:

第二步是选择框架,可以看到有很多框架供选择,作为示例,这里选择ReactJS:

第三步选择集成代码库,这里可以多选,作为示例,全部选择:

如果选择了JQuery,会提示选择具体的版本,按照默认选择3.x版本:

接下来选择代码审查工具,作为示例,两个都选择:

最后选择测试框架,只有一个选项jest,仅支持ReactJS:

全部选择完毕之后,开始创建解决方案部分的向导:

之后的部分与SPFx generator相同,以webpart为例:

创建完成之后,使用Code打开pacakge.json文件,可以看到相比SPFx generator,添加了更多的依赖项:

以上是使用ReactJS框架作为示例,创建的SPFx项目,如果使用其他框架,结果会有所不同。

现在在项目中可以方便地引用jquery,pnpjs了:

因为PnP generator和SPFx generator是完全兼容的,所以推荐使用PnP generator作为创建项目的首选。

猜你喜欢

转载自blog.csdn.net/shrenk/article/details/86691035
PnP