我所知道的

Question

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

我所知道的

我知道您可以包括外部库（例如jquery）和某些类型与npm包分开的库。
我知道，即使我在外部部分中引用了外部库，但如果我未将其导入代码中的任何位置，它也不会真正拉低该库。
我了解文档中的当前示例。我成功地使用了很棒的moment-timezone。

我遇到的问题

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

该项目不是因为我不包含外部库而没有加载外部库，还是由于我没有正确导入而导致编译失败。也许？

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

Answer 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的模块并且无论如何都强制捆绑该软件包。

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

Devextreme作为Sharepoint框架的外部库

我所知道的

我遇到的问题

1 个答案: