Reactjs Devextreme作为sharepoint框架的外部库

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

我所知道的

• 我知道您可以包括外部库，比如jquery和一些从npm包中分离出键入的库
• 我知道，即使我在externals部分中放置了对外部库的引用，如果我不在代码中的任何地方导入它，它实际上也不会下拉库
• 我理解文档中当前的示例。我成功地使用了瞬间时区，这很好

我有个问题 我正在尝试使用DevExtreme和DevExtreme react库。这个库非常大，所以我想在Web部件请求时从cdn中包含它一次，然后在每个附加的Web部件实例中继续使用相同的脚本。问题是图书馆里有打字机。它在bundles/dx.all.d.ts子文件夹中，而不是在它自己的包中。它还可以包含多个文件，而不是包含整个库。此外，devextreme react取决于devextreme库，因此它还包括来自devextreme的文件

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

---

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

因此我找到了一个潜在的解决方案，当然唯一的问题是我必须停止使用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} />;
    }
}

import*as React from'React'；
从“jquery”导入*为$；
从“devextreme/bundles/dx.all”导入DevExpress；DevExpress；
导出默认类DxButton扩展React.Component{
私人el:HTMLElement；
私有$el:JQuery；
公共构造函数（道具：DevExpress.ui.dxButtonOptions）{
超级（道具）；
}
公共组件didmount（）{
this.$el=$（this.el）；
（此为$el，如有）。DX按钮({
…这是我的道具
}如DevExpress.ui.dxButtonOptions）；
}
公共组件将卸载（）{
（如有，$el）。dxButton（'dispose'）；
这个。$el.remove（）；
}
public render（）：React.ReactElement{
返回this.el=el}/>；
}
}

我不能使用devextreme react的原因是，它使用devextreme的模块，并且不管发生什么情况，都会强制捆绑包

---

这不是理想的解决方案，但似乎是最终实现这一点的唯一可能的方法。

没有任何源代码或可复制的回购协议，任何人都很难弄清楚到底发生了什么。它被标上了spfx。您只需运行yo生成器并尝试添加devextreme即可。我想如果你对spfx一无所知，这是真的，但如果是这样的话，你可能也帮不了我解决问题。我或许可以把问题本身编辑得更清楚一些。