Question

我创建了一个新的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 Plugin的文档几乎不存在，所以我基于另一个插件，即由一位伟大的Aurelia贡献者制作的Aurelia-Bootstrap。其中一个极大影响我的插件代码的文件是他的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中的一对，现在只有{{1}调用了一对}}。另一个可能的问题，但仍需确认，我有一个名为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

Answer 1

如果您将文件称为插件，则无关紧要。
globalResources不仅接受view / vm对，而且（.html仅用于html组件和单个文件资源，如自定义属性绑定行为和值转换器）。
你有光滑的服务错误。你应该导入SlickWindowResizer而不是SlickResizer。
在aurelia.json中，您需要添加资源数组，例如："resources": ["**/*.{css,html}"]

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

1 个答案: