Microsoft云工程师 - SharePoint,Office 365,Azure,Dotnet,Agenular,JavaScript。
Microsoft云工程师 - SharePoint,Office 365,Azure,Dotnet,Agenular,JavaScript。

SPFX.

视频–Azure CICD管道与SP框架(SPFX)

下面结束到结束演示用Azure Dev Ops(ADO)代码存储库创建SharePoint Framework(SPFX 1.9)来保持原始源。 ADO用于源代码Reposity(Repo)以保存SPFX项目代码。

从那里,ADO“Build”动态创建SPPKG与使用节点和NPM安装的Ubuntu容器VM动态创建sppkg以加载所有依赖项。  集中式集装箱构建具有均匀一致性的好处。  没有开发人员工作站配置。  没有服务器设置不一致。

最后ADO“发布”将SPPKG复制到SharePoint Online应用程序目录中,使用Office 365命令行界面(CLI)。  从那里,它可以在O365租户上添加到网站上的页面。

干杯。 

shades_smile.

视频

截图

图像
图像
图像
图像
图像
图像
图像
snaghtmle61d4d.

参考

代码 - 构建管道yaml

pool:
  name: Azure Pipelines
steps:
- task: [email protected]
  displayName: 'Use Node 10.x'
  inputs:
    versionSpec: 10.x
    checkLatest: true

- task: [email protected]
  displayName: 'npm install'
  inputs:
    verbose: false

- task: [email protected]
  displayName: 'npm test'
  inputs:
    command: custom
    verbose: false
    customCommand: test

- task: [email protected]
  displayName: 'Publish Test Results temp/test/junit/junit.xml'
  inputs:
    testResultsFiles: temp/test/junit/junit.xml
    searchFolder: '$(Build.SourcesDirectory)'

- task: [email protected]
  displayName: 'Publish code coverage from $(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml'
  inputs:
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(Build.SourcesDirectory)/temp/test/cobertura-coverage.xml'
    reportDirectory: '$(Build.SourcesDirectory)/temp/test'

- task: [email protected]
  displayName: 'gulp bundle'
  inputs:
    targets: bundle
    arguments: '--ship'
    publishJUnitResults: true

- task: [email protected]
  displayName: 'gulp package-solution'
  inputs:
    targets: 'package-solution'
    arguments: '--ship'

- script: 'dir sharepoint/solution/*.sppkg'
  displayName: DIR

- task: [email protected]
  displayName: 'Copy Files to: $(build.artifactstagingdirectory)/drop'
  inputs:
    Contents: 'sharepoint/solution/*.sppkg'
    TargetFolder: '$(build.artifactstagingdirectory)/drop'

- task: [email protected]
  displayName: 'Publish artifacts: drop'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/drop'

代码 - 发布管道yaml

steps:
- task: [email protected]
   displayName: 'Use Node 10.x'
   inputs:
     versionSpec: 10.x
steps:
- task: [email protected]
   displayName: 'npm custom'
   inputs:
     command: custom
     verbose: false
     customCommand: 'install -g @pnp/office365-cli'

#Your build pipeline references a secret variable named ‘password’. Create or edit the build pipeline for this YAML file, define the variable on the Variables tab, and then select the option to make it secret. See //go.microsoft.com/fwlink/?linkid=865972 variables: tenant: 'spjeff' catalogsite: 'sites/catalog' username: '[email protected]' steps: - script: 'o365 spo login //$(tenant).sharepoint.com/$(catalogsite) --authType password --userName $(username) --password $(password)' displayName: 'Command Line Script'

steps: - script: 'o365 spo app add -p $(System.DefaultWorkingDirectory)/SPFX-CICD/drop/sharepoint/solution/code.sppkg --overwrite' displayName: 'Command Line Script'

variables: tenant: 'spjeff' catalogsite: 'sites/catalog' steps: - script: 'o365 spo app deploy --name code.sppkg --appCatalogUrl //$(tenant).sharepoint.com/$(catalogsite)' displayName: 'Command Line Script'

视频–将SPFx节点模块从50,000张文件减少到1,000

最近发现了一个有效的集中式节点包管理器(PNPM),它利用“符号链接”或符号链接文件夹来减少磁盘存储复制。 从50,200升至1,000点。  Demo video below.   Cheers!  

shades_smile.

代码

# Install the package globally:
npm install -g pnpm

# In each SPFX project (or nodejs project i believe):
pnpm install

视频

凉爽的图表

图像

参考

视频–创建SharePoint Framework(SPFX)“Hello World” Web Part

DEMO下面的视频显示如何创建一个新的SPFX SharePoint Framework Web部件,包括Gulp,Visual Studio代码,项目文件夹游览和CypeScript导入引用。

开始为现代页面(SharePoint Online和SharePoint 2016)开始开发的好方法,在开发人员工作站上运行localhost。 不需要SharePoint虚拟机。  Cheers! 

shades_smile.

视频

参考

使用PowerShell减少SPPKG WebParts功能

以下步骤将减少SPPKG以仅选择我们要保留的功能和WebParts。 每个sppkg文件实际上是一个带有XML清单和每个WebPart和功能的子文件夹的zip。 将SPPKG提取为ZIP允许我们查看内部内容,枚举所有功能,然后选择一个以保持在最终压缩的ZIP文件(SPPKG文件)。

如果您只想从SPPKG包上传一些WebParts到Office 365的App目录,请查看下面的视频。

干杯!  

shades_smile.

视频

代码

截图

图像
图像
图像

参考

返回顶部▲返回顶部▲