SharePoint 框架开发环境

1,073 阅读3分钟

今天终于有了新的进展,不再是环境都安不上的笨蛋了,星期五了铁子们 该放假了,祝教师节日快乐。

开源工具

需要探索的三个类别如下: 构建过程和工具 网络框架 代码编辑器

04-open-source-tooling.jpg

工具介绍

Gulp 是一个任务运行器,它取代了 .NET 解决方案中使用的工具 MSBuild。这用于运行各种任务,例如将 TypeScript 转换为 JavaScript、创建 JavaScript 包和 SharePoint 包 Node.js 是所有应用程序使用的底层运行时。介绍的工具都是建立在 Node.js 之上的。运行它们需要 Node.js,就像运行 .NET 应用程序需要 .NET Framework 一样。

NPM 用作包管理器,您将使用它在项目中安装全局工具和可重用代码。 Webpack 用于将项目中的所有 JavaScript 和 CSS 文件组合成一个 JavaScript 包。出于性能原因,捆绑是部署客户端应用程序的推荐方式。

代码编辑器用文档推荐的 VScode 或者其他的都行

安装node.js 文档上说 框架是依赖于node.js的但是你不需要是一个出色的node.js的开发者。 网址:nodejs.org/en/ 下载选择msi 文件的 这会使你不会在为了环境变量发愁 安装完了之后 打开cmd ->node -v 如果出现版本号,那么说明安装的没有问题。

image.png

image.png

可以选择适合的版本,如果没有要求的话,默认选择最新的就好。

安装 Yeoman

打开cmd

npm install --global yo

如果安装遇到问题 例如:nodejs“npm ERR!代码SELF_SIGNED_CERT_IN_CHAIN“

请先执行 npm config set strict-ssl false

安装Gulp

Gulp 是一个任务运行工具。它类似于 MSBuild,后者是 .NET 开发人员和 Visual Studio 用来编译项目、打包解决方案和开始调试体验的工具。

npm install --global gulp

image.png

安装 SharePoint 框架 Yeoman 生成器

Microsoft 已创建用于搭建 SharePoint 框架项目的 Yeoman 生成器。

默认安装最新的

npm install --global @microsoft/generator-sharepoint

如果想要安装指定版本的

···npm install --global @microsoft/generator-sharepoint@[version number]···

必须在开发环境中安装来构建 SharePoint 框架组件最少的工具为

node.js Gulp Yeoman 和SharePoint的Yeoman生成器

执行yeoman生成器

yo @microsoft/sharepoint

image.png

验证安装是否正确、 打开cmd执行以下命令 yo @microsoft/sharepoint 如果顺利的话,你会看到 Use the following to complete the prompt that is displayed:

  • What is your solution name? : HelloWorld
  • Which baseline packages do you want to target for your component(s)? : SharePoint Online only (latest)
  • Where do you want to place the files? : Use the current folder
  • Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? : No
  • Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? : No
  • Which type of client-side component to create? : WebPart
  • What is your Web part name? : HelloWorld
  • What is your Web part description? : HelloWorld description
  • Which framework would you like to use? : No JavaScript framework

如果你完成了上面的步骤 那么在你所在文件 会创建一个SharePoint资源,然后执行以下命令:

gulp trust-dev-cert 会生成一个证书,这个步骤会很快 然后执行这个命令 gulp serve 会生成一个工作台,用你的默认的浏览器

image.png 这一步执行的时间可能会有一点点长,耐心地等待一下 好的,然后就看到 在你的浏览器窗口会弹出网页一个工作台

image.png

点击+号,选择添加webpart 然后就看到默认生成的webpart了

image.png

到此为止就完成了,SharePoint的框架的基本安装完了,当然如果你有相关的安装问题也可以留言, 好的,学习且记录,希望能走的更远一些,领导啥的水平都好高啊,真厉害。Keep learning,Keep Moving。