我创建了一个新的 Aurelia 插件，它被命名为 Aurelia-Slickgrid 并使用 .feature('resources') 让它在本地工作>。然后我为下一步做好了准备，将它作为插件提供给所有人，并创建了一个 Github 项目并在这个 GitHub link - 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 插件 的文档几乎不存在，所以我基于另一个插件，即 Aurelia-Bootstrap由一位伟大的 Aurelia 贡献者制作。对我的插件代码影响很大的文件之一是他的 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)，在我的例子中，我只有一对 SlickPager，现在只有那个是被 globalResources() 调用。另一个可能的问题，仍然要确认，我有一个名为 aurelia-slickgrid.js 的文件，它与插件名称的命名相同，这会导致冲突吗？可能……谁知道呢。所以无论如何，我将它重命名为 slick-service.js 并将类重命名为 SlickService。我现在可以调用 WebPack Skeleton 中 2/3 的对象，但是我仍然无法导入 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?

最佳答案

1. 如果您将您的文件命名为与您的插件相同的名称并不重要。
2. globalResources 不仅接受 View /虚拟机对，还接受(.html 用于纯 html 组件和单个文件资源，如自定义属性绑定(bind)行为和值转换器)。
3. 您在 slick-service.js 中有错字，您应该导入 SlickWindowResizer 而不是 SlickResizer。
4. 在 aurelia.json 中，您需要添加资源数组，例如:"resources": ["**/*.{css,html}"]

关于javascript - Uncaught TypeError creating an Aurelia Plugin : plugin. 加载不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41539183/