我在上一篇文章中介绍了SharePoint框架的简介。 新的SharePoint开发模型– JavaScript frameworks, npm, Gulp, TypeScript, 客户网页部分s etc。，所以现在让’s now take a closer look 在 developing a 客户网页部分 (something most developers will do commonly). We’将逐步介绍Web部件的创建过程，并开始研究各种配置文件，并介绍诸如引入JavaScript库（如jQuery），合并CSOM代码以及处理异步操作（如获取数据）之类的内容。一世’ll链接到许多文章的单独文章，因为它们值得一些不错的报道。我们’我也会考虑“what now?”现在，当您运行默认代码并需要开始添加自己的代码时。
记得–这只是*样本指导*，可以帮助您进行准备。一些细节将在发布前更改！ 我可以’足够强调你不应该’在这篇文章中不要把任何事情当作福音。目前（2016年5月/ 2016年6月），该框架仍未正式发布，在大多数人接触之前，情况将有所变化。此处显示的框架部分来自与私有产品小组的合作“dev kitchen”事件。不过，我认为对开发过程的外观进行平视是有好处的–我认识的大多数开发人员都喜欢看运动的部分以了解技术栈，因此希望这对人们有所帮助。即使只是精神上的！
Getting started - creating a 客户网页部分 “project”
经验丰富的SharePoint开发人员习惯于打开Visual Studio并执行文件> New > Project >并选择一个SharePoint模板（即使只是一个空的SharePoint项目），也可以使用“添加”将一个项目添加到现有项目中> New item > SharePoint >空元素或类似元素。但是，在SharePoint框架中，我们没有’无需使用Visual Studio，而Yeoman Generator可以帮助我们开始使用正确的文件。这可以从命令行使用，而不能’绑定到特定的代码编辑器（例如Visual Studio）。因此，我们需要安装以下内容：
- 约曼发电机本身
- A template for a SharePoint 客户网页部分 –当工具发布时，它将变为可用
我们在要使用的目录中打开命令行，然后运行Yeoman Generator将正确的文件拖放到该目录中。我们告诉它要使用的生成器的名称– I have one called “@ms/sharepoint”（从我可以访问的预览位–最终名称可能会更改）。这实际上是一个“模板化的文件集”，这些模板将由Microsoft提供（但毫无疑问，社区将添加其他模板）：
The generator will ask me some questions in order to provide the right scaffolding (and note the 开发厨房 references illustrating that these are preview tools), and then starts unpacking some files into the directory – especially the “node_modules”用于JS依赖项的文件夹：
然后询问我是否要创建客户端Web部件或整页应用程序 – I’在这里选择第一个选项：
在收集了有关我的Web部件名称和描述的进一步信息之后（下面用红色框突出显示），在目录中创建了一些核心文件（请参见黄色框）：
生成器完成了，现在我的文件夹中有一些样板文件，包括一些“Hello World” code in the main web part file. 我可以 now open these in a code editor, examine them, and start implementing some real code. To open this folder in Visual Studio code (and remember it’s just a folder, not a VS 项目 or anything), 我可以 type “code .” –点告诉VS Code在当前文件夹中打开：
现在我们看到了文件。感兴趣的主要子文件夹是“config” and “src”文件夹，在下面突出显示：
x
Usefully, this is a working sample and as shown in the last post, 我可以 run this in the local “workbench”不依赖SharePoint的环境。为此，我跑步“gulp 服务”从命令行：
这将执行名为“serve”。这是在工具中定义的’s job is to spin up node.js on your local machine to allow the files to be 服务d (as an alternative to IIS) –默认网址基于 http：//本地主机：4321. A browser window is also opened onto the 工作台 page, and all this is logged in the console:
在打开的浏览器窗口中，您应该看到Web部件的实例已添加到新样式页面之一中。显示的内容将与之前显示的样板HTML代码匹配：
如果我们要编辑Web部件属性，则会看到样板代码定义的单个属性以帮助我们入门：
这里's what the boilerplate code looks like for the web part:
** N.B.这里有一个代码示例，但不会在RSS阅读器中显示-
点击这里查看全文 **
添加代码时的早期挑战
现在我们有了一些样板代码，我们’ve tested that in the browser. But now the 好玩 starts, and we really need two things:
- To understand how to start adding code, to implement the specific 好玩ctionality we plan to build in this web part
- 了解SharePoint框架提供的各种文件夹和文件–换句话说，了解SharePoint框架 development model
添加代码
Looking 在 the boilerplate code, you can see the main entry point to a 客户网页部分 is the public render（） SharePoint框架提供的方法。表示Web部件的DOM元素’页面上的s容器作为参数传递，并且’由您决定在那里输出内容–使用您选择的任何方法。然后您可以看到，这是对“JavaScript embed”我们许多人通过内容编辑器Web部件或脚本编辑器Web部件使用的方法–基本上，Web部件会在页面上发出DIV，然后使用一些随附的JavaScript填充该DIV。 当然，最大的区别是事情已经完成，我们现在有了适当的框架支持。我们可以从Web部件框架中获得SharePoint长期开发人员所期望的一切–支持Web部件属性，Web部件管理器对象（用于帮助管理页面上的Web部件），上下文数据（例如，页面处于编辑还是显示模式等）。但是，我们还获得了其他东西-支持加载资源（例如CSS），日志记录框架，以及满足常见需求（例如发出GET / POST请求）的各种帮助程序。
因此，这取决于我们围绕该render（）方法构建的内容。 对于非平凡的Web部件，通常您’将创建其他TypeScript模块，以便您获取数据（或其他任何内容）的核心实现’在演示代码中，如果’即使是可以重新使用TypeScript“fun” the first time! As I was creating my first 客户网页部分s, I hit challenges such as these as I was building out my code:
- 如何添加其他TypeScript模块以更好地构建代码（并在Web部件类中使用此代码）
- 如何将jQuery或其他JavaScript库添加到您的Web部件（包括用于代码完成的TypeScript类型）
- 如何将CSOM添加到您的Web部件（同样，使用TypeScript键入，以便CSOM更易于编写）
我计划在以后的文章中介绍所有这些内容。
了解SharePoint Framework文件和文件夹– an overview
在这一点上’值得考虑的是我们正在使用的文件和文件夹：
这里’是我下一篇文章中的表格的简化版本– I’我会在那儿详细介绍’s概述所使用的文件夹结构：
| 夹 | 目的 |
| src | 您添加/编辑代码文件的地方 |
| LIB | 包含“processed”准备移入与应用程序一起分发的捆绑软件中的代码文件。 |
| dist | 包含the final code files which are distributed with your application.
最重要的文件是最终的JavaScript捆绑文件 [MyWebPart] .bundle.js |
| 配置 | 包含该工具用于构建过程的一组JSON文件。特别是要控制应用程序的打包方式-使用.spapp文件，JavaScript / CSS捆绑等等。 |
| node_modules | 包含代码或SharePoint框架使用的JavaScript模块。有些可能在运行时加载，但其他一些只能在设计时使用（例如，通过TypeScript代码）。 |
| 打字 | 包含TypeScript类型文件–这些用于为您提供针对您正在使用的JavaScript库（例如jQuery）的自动完成功能（IntelliSense）。 |
概要
在新的SharePoint Framework中进行开发时，需要注意一些事项。创建自定义代码的过程是不同的（并且没有’甚至不需要使用Visual Studio！），SharePoint开发人员将使用的文件和文件夹也有所不同。一世’在下一篇文章中，我将继续深入研究 了解SharePoint框架中的Web部件清单，bundle.json和其他关键文件和文件夹 （即将发布！）
I’我期待很快就新的SharePoint框架进行首次公开演讲– this will be 在 SharePoint星期六，伦敦，2016年7月9日 . 
