Aurelia Kendo Bridge 和 Aurelia .Net Core Spa 项目

Question

我使用 .Net CLI 命令创建了一个新的 Aurelia /.Net Core/Typescript 项目：

dotnet new aurelia

这很好用。现在我想在这个项目中使用 Aurelia Kendo Bridge 插件。

Aurelia 的 .Net Core 模板使用 Webpack，所以我一直在尝试按照此处的 Webpack 安装说明进行操作：http://aurelia-ui-toolkits.github.io/demo-kendo/#/installation

我做了以下步骤：

1. 安装了 Kendo Core npm 包：

   npm install kendo-ui-core jquery --save

2. 安装 Aurelia 剑道桥：

   npm install aurelia-kendoui-bridge --save

3. 在 webpack.config.vendor.js 文件的入口节点中包含这些 npm 包：

   entry: { vendor: [ 'aurelia-event-aggregator', 'aurelia-fetch-client', 'aurelia-framework', 'aurelia-history-browser', 'aurelia-logging-console', 'aurelia-pal-browser', 'aurelia-polyfills', 'aurelia-route-recognizer', 'aurelia-router', 'aurelia-templating-binding', 'aurelia-templating-resources', 'aurelia-templating-router', 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'jquery', 'kendo-ui-core', 'aurelia-kendoui-bridge' ], }

   4. 将 kendo-ui-core 和 aurelia-kendoui-bridge 导入 boot.ts 文件中，并按照安装说明添加桥接插件。 boot.ts 现在看起来像这样（为不可靠的格式道歉 - 由于某种原因它不想将代码格式应用于整个块）：

   import 'isomorphic-fetch';

   import { Aurelia, PLATFORM } from 'aurelia-framework';

   import 'bootstrap/dist/css/bootstrap.css';

   import 'bootstrap';

   import 'kendo-ui-core';

   import 'aurelia-kendoui-bridge';

   declare const IS_DEV_BUILD: boolean;
export function configure(aurelia: Aurelia) { aurelia.use.standardConfiguration() .plugin(PLATFORM.moduleName('aurelia-kendoui-bridge'));

   if (IS_DEV_BUILD) {
       aurelia.use.developmentLogging();
   }
   
   aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
   

   }

但是当我运行它时，我得到了错误：

Uncaught ReferenceError: vendor_8b79c30b7e7439ee178d is not defined
    at Object.29 (external "vendor_8b79c30…"?f61b:1)
    at __webpack_require__ (bootstrap 162cab7…?2baa:657)
    at fn (bootstrap 162cab7…?2baa:85)
    at Object.126 (global.js from dll-reference vendor_8b79c30…?da06:1)
    at __webpack_require__ (bootstrap 162cab7…?2baa:657)
    at fn (bootstrap 162cab7…?2baa:85)
    at Object.7 (vendor.js?v=Filp3zKgThugnEmJ0hIhP507zLguUxBsJn0jDKuyf6c:68401)
    at __webpack_require__ (bootstrap 162cab7…?2baa:657)
    at fn (bootstrap 162cab7…?2baa:85)
    at Object.14 (aurelia-metadata.js?78b1:1)

我对 Webpack 和 Kendo Bridge 的了解非常基础，所以我可能在这里遗漏了一些明显的步骤。有谁知道我可能做错了什么，有没有人设法通过 Aurelia .Net Core 项目获得 Aurelia Kendo Bridge？

Answer 1

有一个 vendor-manifest.json 文件，webpack 使用它来引用 app bundle 中的供应商模块。您的错误意味着此清单与从供应商捆绑包中导出的内容不匹配

我的供应商捆绑包中的第一对行

var vendor_8b79c30b7e7439ee178d =
/******/ (function(modules) { // webpackBootstrap
...

我的清单开始

{"name":"vendor_8b79c30b7e7439ee178d",

名称匹配。

重新构建供应商包，然后重新构建应用包应该可以解决问题。

webpack --config webpack.config.vendor.js
webpack --config webpack.config.js

此外，aurelia 模板有一个非常严重的错误，该错误会阻止供应商捆绑包的可重用性。请务必查看 this PR 以获得修复。

Answer 2

这不再是问题。按照上面原始问题中的步骤现在可以生成一个工作项目。