SharePoint Framework的yeoman项目模板生成器,是SharePoint Framework开发的主要工具。通过生成器可以自动创建不同的项目模板,方便项目的开发和部署。但是目前SPFx的yeoman模板生成器(以下简称SPFx generator)虽然已经是1.7.1的版本了,但还是有一些不方便的地方,例如:
- 提供的前段框架较少。目前SPFx generator只提供了React和Knockout这两个前端框架,其他的流行框架例如Vue.js, Angular, Handbars, JQuery等等,都没有默认包含进来,所以对于熟悉这些框架的开者来说还不够友好。
- 缺少代码分析和测试工具
- 没有默认集成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作为创建项目的首选。