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

类型签字

视频–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'

视频–尝试使用PNP JS构建角度CLI

最近尝试使用Angular 6和SP-PNP-JS库创建命令行界面(CLI)项目进行数据访问。 跟踪教程@arustacean//medium.com/ng-sp/angular-spa-in-sharepoint-3e7195741460但是使用每个库的最新版本。

GitHub.源代码可用//github.com/spjeff/sp-ng

但是,在Web Pack TypeScript构建过程中接受了奇怪的错误。  附加的视频显示故障排除过程。  Cheers! 

shades_smile.

视频

截屏

错误–环境上下文不允许初始化器。

图像

参考

视频–创建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.

视频

参考

从JSON数据生成类型填充界面

通过从Sample JSON数据生成TypeScript接口,在JavaScript中自动完成JSON属性名称。 查看以下视频以获取现场演示。

开发人员生产力的巨大胜利。 没有更多的财产名称猜测或错别!

 

  1. 复制示例JSONhttp://json.org/example.html
  2. 粘贴到http://json2ts.com/经过@Sorskoot生成打印界面接口
  3. 将ts文件添加到应用程序工作文件夹
  4. 享受Visual Studio代码的自动完成!
    shades_smile.

 

视频

 

源代码

返回顶部▲返回顶部▲