SPFx Fantastic 40 Web Parts 项目教程

2024-08-31 08:27:43作者：幸俭卉

This package is a sample kit of Client Side Web Parts built on the SharePoint Framework SPFx. You can find here different kind of high visual web parts as carousel, images galleries, animations, map, editors, etc.

项目地址：https://gitcode.com/gh_mirrors/sp/spfx-40-fantastics

1. 项目的目录结构及介绍

spfx-40-fantastics/
├── LICENSE
├── README.md
├── gulpfile.js
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsd.json
├── config/
│   ├── config.json
│   ├── deploy-azure-storage.json
│   ├── package-solution.json
│   ├── serve.json
│   └── write-manifests.json
├── src/
│   ├── extensions/
│   ├── index.ts
│   ├── models/
│   ├── services/
│   ├── webparts/
│   │   ├── carousel/
│   │   ├── gallery/
│   │   ├── map/
│   │   ├── polls/
│   │   ├── charts/
│   │   └── ...
│   └── loc/
└── sharepoint/
    ├── assets/
    ├── solution/
    └── README.md

LICENSE: 项目许可证文件。
README.md: 项目说明文档。
gulpfile.js: Gulp任务配置文件。
package.json: 项目依赖和脚本配置文件。
package-lock.json: 锁定依赖版本文件。
tsconfig.json: TypeScript配置文件。
tsd.json: TypeScript定义文件。
config/: 包含项目的各种配置文件。
src/: 源代码目录，包含扩展、模型、服务和Web部件等。
sharepoint/: SharePoint相关文件和解决方案。

2. 项目的启动文件介绍

gulpfile.js: 这是项目的启动文件，负责定义和运行各种构建任务，如打包、部署和本地开发服务器启动等。

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');

build.initialize(gulp);

3. 项目的配置文件介绍

package.json: 包含项目的基本信息、依赖包和脚本命令。

{
  "name": "spfx-40-fantastics",
  "version": "1.0.0",
  "description": "A sample kit of 40 great Client Side Web Parts built on the SharePoint Framework SPFx.",
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-webpart-base": "1.11.0",
    "@microsoft/sp-lodash-subset": "1.11.0",
    "react": "16.9.0",
    "react-dom": "16.9.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "gulp": "~4.0.2"
  }
}

tsconfig.json: TypeScript编译配置文件。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "rootDir": "src"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "lib"
  ]
}

config/config.json: 项目构建配置文件。

{
  "bundles": {
    "carousel-web-part": {
      "components": [
        {
          "entrypoint": "./src/webparts/carousel/CarouselWebPart.ts",
          "manifest": "./src/webparts/carousel/CarouselWebPart.manifest.json"
        }
      ]
    }
  },
  "localizedResources