【问题标题】：Devextreme as external library for sharepoint frameworkDevextreme 作为共享点框架的外部库
【发布时间】：2019-01-27 20:13:41
【问题描述】：

我在我的 spfx 解决方案中使用了一个非常大的库，我不仅希望在此应用中的 webpart 之间共享它，而且还希望在可能使用此库的任何其他 webpart 之间共享它。

我知道的

我知道您可以包含外部库，例如 jquery 和一些类型与 npm 包分开的库。
我知道，即使我在 externals 部分中引用了一个外部库，如果我不在代码中的任何位置导入它，它实际上也不会下拉该库。
我了解文档中的当前示例。我成功地使用了时刻时区，这很棒。

我遇到的问题

我正在尝试使用 DevExtreme 和 devextreme-react 库。这个库非常大，所以我想在 webpart 请求它时从 cdn 中包含一次它，并继续对每个额外的 webpart 实例使用相同的脚本。问题是该库附带了包含在其中的类型。它在子文件夹 bundles/dx.all.d.ts 中，而不是在它自己的包中。它还有多个文件，您可以包含而不是包含整个库。此外，devextreme-react 依赖于 devextreme 库，因此它还包括来自 devextreme 的文件。

项目要么没有加载外部库，因为我没有包含它们，要么编译失败，因为我没有正确导入它..？也许吧？

我的问题是如何排除该库，将其添加到外部配置，将其导入到我的项目文件中并仍然编译我的项目？

【问题讨论】：

没有任何源代码或可重现的 repo，任何人都很难弄清楚发生了什么。
嗯，它是用 spfx 标记的。您只需运行 yo 生成器并尝试添加 devextreme。我想如果你对 spfx 一无所知，这是真的，但如果是这种情况，你可能无法帮助我解决我的问题。我可能可以将问题本身编辑得更清楚。

标签： reactjs webpack devextreme spfx

【解决方案1】：

所以我找到了一个潜在的解决方案，当然唯一的问题是我必须停止使用 devextreme-react 并只使用普通的 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-react 的原因是因为它使用了 devextreme 的模块，并且无论如何都强制打包。

不是理想的解决方案，但最终似乎是唯一可行的方法。

【讨论】：