Microsoft Graph Toolkit en soluciones de SharePoint Framework

  • Artículo

Use Microsoft Graph Toolkit en las soluciones de SharePoint Framework.

Importante

El @microsoft/mgt-spfx paquete se ha descontinuado. Use la desambiguación para los elementos web de SharePoint Framework.

Instalación

Para cargar componentes de Microsoft Graph Toolkit desde la biblioteca, agregue los @microsoft/mgt-elementpaquetes , @microsoft/mgt-componentsy @microsoft/mgt-sharepoint-provider como una dependencia en tiempo de ejecución al proyecto de SharePoint Framework:

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

o

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

Uso

Al compilar SharePoint Framework elementos web y extensiones, haga referencia al kit de herramientas de Microsoft Graph customElementsHelper, Providery SharePointProvider desde @microsoft/mgt-element y @microsoft/mgt-sharepoint-provider. Si no usa React, también debe importar las funciones de registro de componentes de @microsoft/mgt-components los paquetes.

Para soluciones no basadas en 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

Si va a compilar un elemento web con React, puede usar el @microsoft/mgt-react paquete y omitir el registro manual de componentes. Sin embargo, asegúrese de cargar de forma diferida el componente de React desde el elemento web para usar la desambiguación.

// [...] 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
}

En los componentes de React subyacentes, el componente Microsoft Graph Toolkit se puede usar directamente.

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>
    );
  }
}

Importante

Asegúrese de que la clase de elemento web raíz no importa ningún recurso del kit de herramientas de Microsoft Graph desde @microsoft/mgt-react. Solo deben importarse dentro de los componentes de React cargados diferidos.

Configuración de webpack

Para compilar el elemento web, debe actualizar la configuración SharePoint Framework webpack para controlar correctamente JavaScript moderno con encadenamiento opcional y fusión nula a través de transformaciones adicionales de Babel.

! [IMPORTANTE] Si no configura webpack para procesar JavaScript moderno, no podrá crear elementos web que usen Microsoft Graph Toolkit.

Instalación de paquetes de Babel

Para controlar correctamente las dependencias que emiten código basado en ES2021, agregue un cargador babel y algunas transformaciones como dependencias de desarrollo al proyecto.

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

Modificación de la configuración de webpack

SharePoint Framework proporciona un modelo de extensibilidad para modificar la configuración de webpack que se usa para agrupar los elementos web. Busque y abra gulpfile.js. Agregue el código siguiente encima de la línea que contiene 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;
  }
});

Contenido relacionado