Devextreme как внешняя библиотека для фреймворка sharepoint

Question

Я использую очень большую библиотеку в своем решении spfx, и я хотел бы не только поделиться ею с веб-частями в этом приложении, но и с другими веб-частями, которые могут использовать эту библиотеку.

Что я знаю

• Я знаю, что вы можете включить внешние библиотеки, такие как jquery, и некоторые библиотеки, которые имеют типизацию отдельно от их пакета npm.
• Я знаю, что даже если я добавлю ссылку на внешнюю библиотеку в разделе externals, она на самом деле не будет разрушать библиотеку, если я не импортирую ее где-нибудь в своем коде.
• Я понимаю текущие примеры в документации. Мне удалось успешно использовать момент-часовой пояс, и это здорово.

У меня проблема

Я пытаюсь использовать библиотеки DevExtreme и Devextreme. Эта библиотека очень большая, поэтому я хочу включить ее один раз из cdn, когда веб-часть запрашивает ее, и продолжать использовать тот же сценарий для каждого дополнительного экземпляра веб-части. Проблема в том, что библиотека поставляется с включенными в нее типами. Он находится в подпапке bundles / dx.all.d.ts, а не в своем собственном пакете. Он также имеет несколько файлов, которые вы можете включить вместо включения всей библиотеки. Кроме того, devextreme-реакции зависит от библиотеки devextreme, поэтому она также включает файлы из devextreme.

Проект либо не загружает внешние библиотеки, потому что я их не включаю, либо не компилируется, потому что я не импортирую его должным образом..? может быть?

Мой вопрос заключается в том, как мне исключить библиотеку, добавить ее в конфигурацию externals, импортировать ее в файлы моего проекта с наборами текста и по-прежнему компилировать мой проект?

Answer 1

Имейте в виду, что нельзя использовать импорт из devextreme-react напрямую.

      //wrong import 
 import { TextBox } from 'devextreme-react';

Вы должны указать импорт для каждого компонента, который у вас есть.

      //Correct import
import { TextBox } from 'devextreme-react/text-box';

Answer 2

Итак, я нашел потенциальное решение, конечно, единственная проблема в том, что я должен прекратить использовать devextreme-реагировать и использовать просто простой jquery.

В основном, если я поставлю в конфиге это:

"jquery": {
  "path": "https://code.jquery.com/jquery-2.1.1.min.js",
  "globalName": "jQuery"
},
"devextreme/bundles/dx.all": {
  "path": "https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js",
  "globalName": "DevExpress",
  "globalDependencies": ["jquery"]
}

И тогда в любом месте, где требуется компонент devextreme, я должен был бы создать оболочку и импортировать devextreme следующим образом:

import * as React from 'react';
import * as $ from 'jquery';
import DevExpress from 'devextreme/bundles/dx.all'; DevExpress;

export default class DxButton extends React.Component<DevExpress.ui.dxButtonOptions> {
    private el: HTMLElement;
    private $el: JQuery<HTMLElement>;
    public constructor(props: DevExpress.ui.dxButtonOptions) {
        super(props);
    }
    public componentDidMount() {
        this.$el = $(this.el);
        (this.$el as any).dxButton({
            ...this.props as any
        } as DevExpress.ui.dxButtonOptions);
    }

    public componentWillUnmount() {
        (this.$el as any).dxButton('dispose');
        this.$el.remove();
    }

    public render(): React.ReactElement<DevExpress.ui.dxButtonOptions> {
        return <div ref={el => this.el = el} />;
    }
}

Причина, по которой я не могу использовать devextreme-реакции, заключается в том, что он использует модули devextreme и вынуждает пакет быть упакованным, несмотря ни на что.

Не идеальное решение, но кажется единственным возможным способом сделать это в конце.