Aurelia Kendo Bridge 和 Aurelia .Net Core Spa 项目
我使用 .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
我已完成以下步骤:
-
安装了 Kendo Core npm 包:
npm install kendo-ui-core jquery --save
-
安装了 Aurelia Kendo Bridge:
npm install aurelia-kendoui-bridge --save
-
在webpack.config.vendor.js 文件:
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' ],
- 将 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 Kendo Bridge 与 Aurelia .Net Core 项目一起使用吗?
有一个
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 模板有一个非常严重的错误,会阻止供应商包的可重用性。 请务必查看 此 PR 以进行修复。
这不再是问题。按照上面原始问题中的步骤操作,现在就可以生成一个正常运行的项目。