SharePoint 框架解决方案中的 Microsoft Graph 工具包

  • 项目

在SharePoint 框架解决方案中使用 Microsoft Graph 工具包。

重要

包 @microsoft/mgt-spfx 已停产。 对SharePoint 框架 Web 部件使用消除歧义。

安装

若要从库加载 Microsoft Graph 工具包组件，请将 @microsoft/mgt-element、 @microsoft/mgt-components和 @microsoft/mgt-sharepoint-provider 包作为运行时依赖项添加到 SharePoint 框架 项目：

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-sharepoint-provider

或

yarn add @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-sharepoint-provider

用法

生成SharePoint 框架 Web 部件和扩展时，请从 @microsoft/mgt-element 和 引用 Microsoft Graph 工具包 customElementsHelper、 Provider和 @microsoft/mgt-sharepoint-providerSharePointProvider 。 如果不使用 React，还应从@microsoft/mgt-components包导入组件注册函数。

对于基于非React的解决方案

import { customElementsHelper, Providers } from '@microsoft/mgt-element';
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

// [...] trimmed for brevity

export default class MgtWebPart extends BaseClientSideWebPart<IMgtWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementsHelper.withDisambigutaion('contoso-hr-solution');
    registerMgtPersonComponent();
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <mgt-contoso-hr-solution-person person-query="me"></mgt-person>
      </div>`;
  }

  // [...] trimmed for brevity
}

React

如果要使用 React 生成 Web 部件，可以使用 包@microsoft/mgt-react并跳过组件的手动注册。 但是，请确保从 Web 部件延迟加载 React 组件以利用消除歧义。

// [...] trimmed for brevity
import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";


// Async import of component that imports the React Components
const MgtReact = React.lazy(
  () =>
    import(/* webpackChunkName: 'mgt-react-component' */ "./components/MgtReact")
);

// set the disambiguation before initializing any web part
customElementHelper.withDisambiguation("mgt-demo-client-side-solution");

export default class MgtDemoWebPart extends BaseClientSideWebPart<IMgtDemoWebPartProps> {
  // set the global provider
  protected async onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    return super.onInit();
  }

  public render(): void {
    const element = lazyLoadComponent(MgtReact, {
      description: this.properties.description
    });

    ReactDom.render(element, this.domElement);
  }
// [...] trimmed for brevity
}

在基础React组件中，可以直接使用 Microsoft Graph 工具包组件。

import { Person } from '@microsoft/mgt-react';
import { ViewType } from '@microsoft/mgt-components';

// [...] trimmed for brevity

export default class MgtReact extends React.Component<IMgtReactProps, {}> {
  public render(): React.ReactElement<IMgtReactProps> {
    return (
      <div className={ styles.mgtReact }>
        <Person personQuery="me" view={ViewType.image}></Person>
      </div>
    );
  }
}

重要

确保根 Web 部件类不会从 @microsoft/mgt-react导入任何 Microsoft Graph 工具包资源。 只能在延迟加载的React组件中导入这些组件。

配置 webpack

若要生成 Web 部件，必须更新SharePoint 框架 webpack 配置，以便通过其他 Babel 转换使用可选链接和 null 合并来正确处理新式 JavaScript。

![重要]如果不配置 Webpack 来处理新式 JavaScript，则无法生成使用 Microsoft Graph 工具包的 Web 部件。

安装 Babel 包

若要正确处理发出基于 ES2021 的代码的依赖项，请将 babel 加载程序以及一些转换作为开发依赖项添加到项目。

npm i --save-dev babel-loader@8.3.0 @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-logical-assignment-operators

修改 Webpack 配置

SharePoint 框架提供了一个扩展性模型，用于修改用于捆绑 Web 部件的 Webpack 配置。 找到并打开 gulpfile.js。 在包含 build.initialize(require('gulp'));的行上方添加以下代码：

const path = require("path");
const litFolders = [
  `node_modules${path.sep}lit${path.sep}`,
  `node_modules${path.sep}@lit${path.sep}`,
  `node_modules${path.sep}lit-html${path.sep}`
];
build.configureWebpack.mergeConfig({
  additionalConfiguration: generatedConfiguration => {
    generatedConfiguration.module.rules.push({
      test: /\.js$/,
      // only run on lit packages
      include: resourcePath => 
        litFolders.some(litFolder => resourcePath.includes(litFolder)),
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    });
    return generatedConfiguration;
  }
});

相关内容