Aurelia Kendo Bridge和Aurelia .Net核心水疗项目

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 Kendo Bridge：

   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' ], }

   1. 将kendo-ui-core和aurelia-kendoui-bridge导入boot.ts文件，并根据安装说明添加了bridge插件。 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使用该文件从应用程序包中引用供应商模块。您的错误意味着此清单与从供应商包中导出的内容

不匹配

第一对来自我的供应商包

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

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