reactjs - Devextreme 作为共享点框架的外部库
问题描述
我在我的 spfx 解决方案中使用了一个非常大的库,我不仅希望在此应用程序内的 webpart 之间共享它,而且还希望在可能使用此库的任何其他 webpart 之间共享它。
我知道的
- 我知道您可以包含外部库,例如 jquery 和一些类型与 npm 包分开的库。
- 我知道,即使我在 externals 部分中引用了外部库,如果我不在代码中的任何地方导入它,它实际上也不会拉下库。
- 我了解文档中的当前示例。我设法成功地使用了很棒的时刻时区。
我遇到的问题
我正在尝试使用 DevExtreme 和 devextreme-react 库。这个库非常大,所以我想在 webpart 请求它时从 cdn 中包含一次它,并继续对每个额外的 webpart 实例使用相同的脚本。问题是该库附带了包含在其中的类型。它在子文件夹 bundles/dx.all.d.ts 中,而不是在它自己的包中。它还有多个文件,您可以包含而不是包含整个库。此外,devextreme-react 依赖于 devextreme 库,因此它还包括来自 devextreme 的文件。
该项目要么不加载外部库,因为我没有包含它们,要么因为我没有正确导入它而无法编译..?也许?
我的问题是如何排除库,将其添加到外部配置,将其导入到我的项目文件中并仍然编译我的项目?
解决方案
所以我找到了一个潜在的解决方案,当然唯一的问题是我必须停止使用 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 的模块,并且无论如何都强制捆绑包。
不是理想的解决方案,但似乎最终是唯一可行的方法。
推荐阅读
- vba - Excel VBA:指定使用宏编辑哪些图表
- android - 如何使用 Nordic BLE 棒模拟 BLE 设备,以便应用程序发现它
- php - 使用 php.ini 检查复选框的解决方案。认为我必须使用一个值
- ruby-on-rails - Resque - 检查是否停止/启动
- c# - SetValidUntilExpires 替代方案
- apache - Apache kylin 是否支持从多个 hadoop 集群中获取多维数据集的数据?
- jquery - 如果已经设置了当天的时间表,如何提醒用户?
- php - 属于通过方法
- javascript - 木瓜 DICOM 查看器,移动切片不起作用,当它相同时
- javascript - 无法更改 React js 中的输入字段