2017-01-08 5 views
7

Я создал новый плагин 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, создающий плагин Aurelia: plugin.load не является функцией

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" 
}, 

Если вы тестируете пустой Aure Проект Lia 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. Один из файлов, которые сильно повлияли на мой код плагина, был его 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. Теперь я могу вызвать 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? 
+0

Возможно, вам не хватает, чтобы загрузить HTML-файлы? '" resources ": [" **/*. html "]' после вашего '' main ":" index "' entry. –

+0

Одна из незначительных проблем с кодом: [this] (https://github.com/ghiscoding/aurelia-slickgrid/blob/master/src/slick-pager.js#L2) должна быть 'jquery' вместо' bootstrap' , Интересно, если это ошибка с aurelia-cli. Вы пытались использовать плагин в одном из проектов скелета? –

+0

@MarcScheib Я забыл упомянуть, что я уже пытался добавить «ресурсы» с помощью '**/*. Html' и никаких различий. @JeremyDanyow Я изменил ссылку jquery и опубликовал новую версию, и это не устраняет проблему (также обратите внимание, что все это работало локально). Я только пытался «Aurelia-CLI», потому что я не знаю, как загрузить 'SASS' в' Aurelia-Webpack', который использует мой плагин. – ghiscoding

ответ

4
  1. Это не имеет значения, если вы называете файл такой же, как ваш плагин.
  2. globalResources допускает не только пары view/vm, но (.html для компонентов только html и отдельных файловых ресурсов, таких как настраиваемые атрибуты, связывающие поведение и преобразователи значений).
  3. У вас есть опечатка в slick-service.js, вы должны импортировать SlickWindowResizer, а не SlickResizer.
  4. в aurelia.json вам нужно добавить массив ресурсов, как: "resources": ["**/*.{css,html}"]
+0

Да, это он, я, наконец, получил работу благодаря @noj и себе. Ваш вопрос 4 также помог мне разобраться с «Aurelia-CLI», и я также не знал, что вы можете написать его на одной строке, чтобы получить все 'css' и' html', что является удивительным. Это потрясающе :) – ghiscoding

+2

Такая информация должна действительно быть частью документации 'Aurelia Plugin' ... проблема в том, что документа не существует :( – ghiscoding

 Смежные вопросы

  • Нет связанных вопросов^_^