Uncaught TypeError tworząc wtyczkę Aurelia: plugin.load nie jest funkcją

Question

Stworzyłem nową wtyczkę Aurelia o nazwie Aurelia-Slickgrid i wszystko działało lokalnie z .feature('resources'). Byłem wtedy gotowy na następny krok, udostępniając go wszystkim jako wtyczkę i stworzył projekt Github i udostępniono go pod tym GitHub link - Aurelia-Slickgrid. Użyłem Aurelia Skeleton Plugin do utworzenia mojej wtyczki, a także uruchomiłem gulp build, aby utworzyć transpiled output. Następnie opublikowałem go pod numerem NPM i pomyślnie zainstalowałem go pod numerem npm i --save aurelia-slickgrid. Obecnie używam Aurelia-CLI na pakiet i wszystko idzie dobrze, dopóki ja otworzyć przeglądarkę i zobaczyć, że błąd został rzucony w konsoli (teraz ja zostaję z białej strony w przeglądarce):

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

Dla w tej chwili próbuję załadować go jako wtyczkę z Aurelia-CLI. Zobacz poniżej kompletnej konfiguracji używany:

index.js wtyczki

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 (mojego projektu lokalnego)

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

aurelia.json (mojego projektu lokalnego)

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

Jeśli testujesz z pustym Aure Projekt lia CLI trzeba dodać:

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

Wreszcie import go używać w kodzie poprzez:

import {AureliaSlickgrid} from 'aurelia-slickgrid'; 

dokumentacji na temat sposobu tworzenia Aurelia Plugin jest prawie nie istniejący, więc opiera się na innym wtyczka, a mianowicie Aurelia-Bootstrap wykonana przez świetnego współtwórcę Aurelia. Jednym z plików, który znacząco wpłynął na mój kod wtyczki był jego index.js i użyłem jego stylu kodowania do zakodowania mojego.

Każdy pomysł, gdzie może być mój problem?

---

Próbowałem też dodać resources do aurelia.json, jednak nie miał żadnych efektów.

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

---

się trochę dalej, po poszukiwaniach w kilku innych wtyczek Aurelia. Wygląda na to, że globalResources powinien być tylko parą View/ViewModel (html/js), w moim przypadku mam tylko jedną z tych par, która jest SlickPager i teraz tylko ta jest wywoływana przez globalResources(). Kolejny możliwy problem, który mimo to mam potwierdzić, miałem plik o nazwie aurelia-slickgrid.js, który jest taki sam, jak nazwa wtyczki, może to spowodować konflikt? Prawdopodobnie ... kto wie. W każdym razie zmieniłem nazwę na slick-service.js i zmieniono nazwę na SlickService. Teraz mogę wywołać 2/3 moich obiektów w WebPack Skeleton, ale nadal nie mogę zaimportować SlickService.

aktualizowane index.js wtyczki

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 }; 

mogę teraz nazwać w WebPack bez problemów

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

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

Jednak jeśli mogę importować SlickService jak dobrze, to zgłasza błąd

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

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

poprzedni kod z SlickService teraz rzuca ten błąd

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. To nie ma znaczenia, czy nazwać plik taki sam jak wtyczki.
2. globalResources akceptuje nie tylko parniki widok/vm, ale (.html dla komponentów tylko html i zasoby pojedynczego pliku, takie jak zachowania atrybutów niestandardowych i konwertery wartości).
3. masz literówkę w slick-service.js, powinieneś importować SlickWindowResizer, a nie SlickResizer.
4. w aurelia.json trzeba dodać tablicę zasobów, takich jak: "resources": ["**/*.{css,html}"]