在上一篇博客（二）使用Yeoman创建SharePoint Framework（SPFx）项目中，我们创建了一个简单的HelloWorld webpart，下面我们在本地运行这个webpart，首先打开Powershell进入项目文件夹”firstwebpart“，在运行webpart之前，需要在本地安装一个开发者证书，以在本地环境使用https协议运行和调试webpart，使用如下命令来安装证书:
命令执行结果如下，如果在执行过程中弹出安装证书的提示框，点击确认安装即可。
安装证书之后，我们使用“gulp serve”命令在本地localhost:4321启动https服务器，并启动默认浏览器运行 webpart，因为是在本地调试环境中调试，所以并不需要连接SharePoint Online。
SPFx使用开源工具gulp执行一些任务，例如gulp serve命令所执行的任务包括启动本地调试服务器，将TypeScript编译为纯Javascript，将scss转换成css，将Javascript文件和css文件捆绑压缩等等。关于gulp的详细介绍请点击这里，另外推荐这篇有趣的文章，详细讲解了现代的前端开发框架的来龙去脉，非常有助于理解SPFx的项目结构。目前我们只需要知道gulp帮助我们在本地运行和调试webpart即可。
gulp serve命令执行后会自动打开IE，启动本地的调试环境（即工作台workbench）
点击加号按钮，添加我们创建的webpart：
添加之后就会显示webpart中的默认内容如下：
我们可以点击编辑按钮在页面右侧打开webpart属性编辑器：
试一下修改webpart属性编辑器里的HelloWorld为“Hello SPFx”，可以看到webpart的内容也会随之实时修改：
以上就是在本地运行webpart的过程，现在打开Code，回到项目中，查看webpart的项目代码结构。
简要介绍一下各个文件夹的作用，第一个是config文件夹，其中包含的文件用于配置项目打包和发布，各个文件的作用简述如下：
其中：
- config.json: 用于配置转换和捆绑后的js文件的输出路径，也可用于引入外部资源。
- copy-assets.json: 用于配置CDN部署路径。
- deploy-azure-storage.json: 用于配置Azure Storage的账户，方便将js文件部署到Azure Storage中。
- package-solution.json: 用于配置打包以及打包后生成的.sppkg包的路径。
- serve.json: 用于配置工作台调试环境。我们在刚才使用gulp serve调试的时候使用了这里的配置信息。
- tslint.json: 用于配置TypeScript类型检查。
- write-manifests.json: 用于配置CDN路径。
然后是dist文件夹,，用来保存最终生成的客户端js代码，这些js代码可以直接在浏览器中运行：
然后是lib文件夹，这个文件夹用于调试，可以暂时忽略。接下来的node_modules文件夹用来保存项目所有的依赖的包，例如TypeScript等等。然后是最重要的src文件夹，包含开发这个webpart的TypeScript代码，样式等：
其中HelloWorldWebPart.manifest.json文件定义了webpart的id、别名、部署到SharePoint Online之后所属的组名，webpart的名字和描述以及其他一些信息。HelloWorldWebPart.modules.scss定义了webpart的样式，HelloWorldWebPart.ts中包含TypeScript代码，在执行gulp serve的时候，TypeScript会被转换成纯js，scss会被转换成css。
TypeScript是微软官方推出一种语言，它是JavaScript 的类型的超集，它可以编译成纯JavaScript。编译出来的JavaScript 可以运行在任何浏览器上。TypeScript更适合开发大型的前端应用程序。关于TypeScript的详细说明可以参见TypeScript中文手册。打开HelloWorldWebPart.ts可以看到webpart的TypeScript源代码，源代码由三个部分组成，第一部分是使用import关键字导入资源和样式，例如导入SPFx框架中的BaseClientSideWebPart类，所有的webpart都需要继承此类并且重写render()方法：
代码的第二部分定义了一个接口“IHelloWorldWebPartProps”，这个接口中定义了一个webpart的属性，这个属性就是webpart属性编辑器中暴露出来的description属性。
代码的第三部分定义了HelloWorldWebPart类，并重写了render()方法来，定义了一些页面元素和内容来展示webpart。
除此之外还有一个方法“getPropertyPanelConfiguration()”用来定义webpart的属性编辑器：
以上就是SPFx客户端webpart项目的主要结构和代码，下一篇博客将会在此基础上添加一些控件，并在SharePoint Online环境中调试webpart。