部署SharePoint 的web-part 增加属于自己的功能模块

1,005 阅读2分钟

上传并部署SharePoint 的web-part

这周调休要上六天,提前祝小伙伴中秋快乐
这周好像有正经事情要做 May 老师好像每天都很忙 今天好像沟通失败了

1.将开发好的web-part打包

如何生成web-part 已经在上一篇文章说明了,如果需要请参见 juejin.cn/post/700618… 这篇文章生成web-part,找到SharePoint的生成目录 ,打开命令行 输入

npm install

然后依次在命令行或PowerShell上输入

gulp build --ship  
gulp bundle --ship  
gulp package-solution --ship  

image.png 会生成一个solution 文件夹 其中有一个后缀为 .sppkg 的文件

image.png

到此为止就打包好了,如果遇到问题:

比如

1.'gulp' is not recognized

问题描述: " 'gulp' is not recognized as an internal or external command, operable program or batch file."

解决方法输入以下命令:

 //  (Install gulp globally)
npm install gulp -g                             

image.png

2.如果看到以下信息:

//*The build failed because a task wrote output to stderr* 

需要修改配置文件 tslint.json 在项目的根路径下就可以找到

image.png

修改代码

image.png

PS: 2023.5.31 修改 这个修改JSON 这个不对, 最佳的解决方案 是消除所有的警告

然后保存就可以解决了

如果遇到问题

域对象不可用 修改设置config\package-solution.json

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
 "name": "demo-test-client-side-solution",
 "id": "4a05323b-ccc4-4ecf-b1ab-606cf1e737ac",
 "version": "1.0.0.0",
     //默认
 "includeClientSideAssets": true,
     //解决tenant不能部署的问题 比如 上传成功且添加成功但是添加app找不到的问题
 "skipFeatureDeployment": true,
     //解决域的问题
 "isDomainIsolated": false,
 "developer": {
   "name": "",
   "websiteUrl": "",
   "privacyUrl": "",
   "termsOfUseUrl": "",
   "mpnId": ""
 }
},
"paths": {
 "zippedPackage": "solution/demo-test.sppkg"
}
}

然后去设置使刚刚上传的文件生效

设置->选择-> add app

2.上传web-part

需要访问SharePoint的管理中心 找到 更多选项 找到app

image.png 选择第一个app Catalog

添加新item去添加文件!

image.png

添加已经制作好的文件 在solution中的那个文件

image.png

上传之后 效果图:

image.png

然后去Myapp 使刚刚上传的文件生效

如图所示:

image.png

image.png

到此为止全部上传成功了

3.在Page上使用你所上传的web-part

找到SharePoint 页面 选择编辑 点击加号 选择web部件 你会发现在最后有你刚刚上传的 web-part部件

如图

image.png

就可以成功使用了

写在最后 写完了记录,每天都在进步 沟通合作优势互补 真的能减少很多事情 Keep moving Keep learning