未捕获的TypeError创建Aurelia插件:plugin.load不是一个函数

Question

我创建了一个新的Aurelia插件,它被命名Aurelia-Slickgrid并在本地工作.feature('resources').然后我准备好进行下一步,将它作为一个插件提供给每个人,并创建一个Github项目,并在这个GitHub链接下提供它- Aurelia-Slickgrid.我使用Aurelia Skeleton Plugin来创建我的插件,也运行gulp build以创建转换后的输出.然后我发布它NPM并成功安装它npm i --save aurelia-slickgrid.我目前正在使用Aurelia-CLI捆绑,一切顺利,直到我打开浏览器并看到控制台中出现错误(现在我在浏览器中留下了白页):

Uncaught TypeError: plugin.load is not a function
    at Module.<anonymous> (vendor-bundle.js:5308)
    ...

目前,我正在尝试将其作为插件加载Aurelia-CLI.请参阅下面的完整配置:

index.js 插件

import {AureliaSlickgrid} from './aurelia-slickgrid';
import {SlickPager} from './slick-pager';
import {SlickWindowResizer} from './slick-window-resizer';

export function configure(config) {
  config.globalResources('./aurelia-slickgrid');
  config.globalResources('./slick-pager');
  config.globalResources('./slick-window-resizer');
}

export {
  AureliaSlickgrid,
  SlickPager,
  SlickWindowResizer
}

main.js (我当地的项目)

aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-slickgrid');

aurelia.json (我当地的项目)

{
     "name": "aurelia-slickgrid",
     "path": "../node_modules/aurelia-slickgrid/dist/amd",
     "main": "index"
},

如果您正在使用空的Aurelia CLI项目进行测试,则需要添加:

      {
        "name": "aurelia-slickgrid",
        "path": "../node_modules/aurelia-slickgrid/dist/amd",
        "main": "index"
      },
      "slickgrid-es6",
      "jquery"

最后import在代码中使用它:

import {AureliaSlickgrid} from 'aurelia-slickgrid';

关于如何创建的文档Aurelia Plugin几乎不存在,所以我基于另一个插件,即Aurelia-Bootstrap由一位伟大的Aurelia Contributor制作.其中一个对我的插件代码有很大影响的文件是他的index.js,我使用他的编码样式来编写我的代码.

知道哪里可能是我的问题？

---

我也试图添加resources到aurelia.json,但它并没有影响.

{
  "name": "aurelia-slickgrid",
  "path": "../node_modules/aurelia-slickgrid/dist/amd",
  "main": "index",
  "resources": [
    "**/*.html"
  ]
},

---

在寻找其他一些Aurelia插件之后,我们进一步了解了一下.看起来globalResources应该只是View/ViewModel对(html/js),在我的情况下,我只有1对,SlickPager现在只有那个被调用globalResources().另一个可能的问题,仍然需要确认,我有一个名为aurelia-slickgrid.js与插件名称相同的文件,可能会导致冲突吗？可能......谁知道呢.所以无论如何,我将它slick-service.js重命名为并将该类重命名为SlickService.我现在能够调用2/3的对象WebPack Skeleton,但是我仍然无法导入SlickService.

更新index.js了插件

import { SlickService } from './slick-service';
import { SlickPager } from './slick-pager';
import { SlickWindowResizer } from './slick-window-resizer';

export function configure(aurelia) {
  aurelia.globalResources('./slick-pager');
}

export { SlickService, SlickPager, SlickWindowResizer };

我现在可以WebPack毫无问题地调用它

import {SlickPager, SlickWindowResizer} from 'aurelia-slickgrid';
@inject(SlickPager, SlickWindowResizer)

export class Test {
  constructor(slickPager, slickWindowResizer) {
    console.log(slickPager, slickWindowResizer);
  }
}

但是,如果我也导入SlickService,则会引发错误

import {SlickPager, SlickWindowResizer, SlickService} from 'aurelia-slickgrid';
@inject(SlickPager, SlickWindowResizer, SlickService)

export class Test {
   constructor(slickPager, slickWindowResizer, slickService) {
      console.log(slickPager, slickWindowResizer, slickService);
   }
}

以前的代码SlickService现在抛出此错误

ERROR [app-router] Error: Error invoking SlickService. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

Answer 1

1. 是否将文件命名为与插件相同没有关系。
2. globalResources不仅接受视图/ vm对，而且（.html仅用于html组件和单个文件资源，例如自定义属性绑定行为和值转换器）。
3. 如果您在slick-service.js中输入错误，则应该导入SlickWindowResizer而不是SlickResizer。
4. 在aurelia.json中，您需要添加资源数组，例如： "resources": ["**/*.{css,html}"]