如何使用 webpack 使 syncfusion 在 aurelia electron 应用程序中工作？

Question

我可以使用 Aurelia、Electron 和 Webpack，但我想包括 Syncfusion 的 CDN 版本。在普通的网络应用程序中，您可以将它包含在 HTML 文件中，但是如何将它包含在 Aurelia Electron Webpack 应用程序中？

在我的 app.html 中，我有以下代码：

<require from="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></require>
<require from="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></require>
<require from="http://cdn.syncfusion.com/16.3.0.29/js/web/ej.web.all.min.js"></require>

Answer 1

require 标签不适用于外部 CDN，但适用于本地自定义 elements/value converters/custom attributes/styles。将 <script src="http://..."> 元素添加到您的 index.html 或创建自定义元素以将脚本加载到特定组件中，例如 this.

Answer 2

供您参考，Webpack 应用程序会将脚本文件捆绑在 dist 文件夹中，这对 运行 Electron 应用程序很有帮助。

要导入 Syncfusion JavaScript 依赖文件，您可以使用以下两种方式之一：

• 导入 main.ts 文件中的脚本
• 为 Syncfusion 依赖项创建自定义 JavaScript 文件

导入 main.ts 文件中的脚本

导入 main.ts 文件中的脚本，如下代码片段所示。如下导入 Syncfusion JavaScript 依赖项时，它将捆绑在 dist 文件夹中。

...
import { PLATFORM } from 'aurelia-pal';
import * as Bluebird from 'bluebird';
import 'syncfusion-javascript/Scripts/ej/web/ej.grid.min';

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.ejGrid());
...

为 Syncfusion 依赖项创建自定义 JavaScript 文件

您必须为 Syncfusion Dependencies (ej.web.all.min.js) 创建自定义 JavaScript 文件，并使用 app.html 中的 require 导入创建的 JavaScript 文件文件。