2017-01-08 39 views
7

Aurelia-Slickgrid adlı yeni bir Aurelia eklentisi oluşturdum ve tüm yerel olarak .feature('resources') ile çalışıyorum. Daha sonra bir sonraki adım için hazırdım, herkes için bir eklenti olarak kullanılabilir hale getirdim ve bir Github projesi oluşturdum ve bu GitHub link - Aurelia-Slickgrid kapsamında kullanıma hazır hale getirdim. Eklenti oluşturmak için Aurelia Skeleton Plugin kullandım, ayrıca aktarılan çıktıyı oluşturmak için gulp build'u çalıştırdım. Daha sonra NPM üzerinde yayımladı ve başarıyla npm i --save aurelia-slickgrid ile yükledim. Şu anda bir araya getirmek Aurelia-CLI kullanıyorum ve tarayıcı açın ve bir hata (şimdi tarayıcıda bir beyaz sayfa ile kaldım) konsolda atıldı görene kadar her şey iyi gider:A yakalanmamış TypeError bir Aurelia Eklentisi yaratıyor: plugin.load bir işlev değil

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

için an, ben Aurelia-CLI ile bir eklenti olarak yüklemeye çalışıyorum.

{ 
    "name": "aurelia-slickgrid", 
    "path": "../node_modules/aurelia-slickgrid/dist/amd", 
    "main": "index" 
}, 
(benim yerel proje) (benim yerel proje) eklentiye

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 ait

index.js

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

aurelia.json: Kullanılan tam yapılandırma için aşağıya bakın

Boş bir Aure ile test ediyorsanız

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

import aracılığıyla kodunda kullanmak: lia CLI proje eklemeniz gerekir

import {AureliaSlickgrid} from 'aurelia-slickgrid'; 

denecek bir Aurelia Plugin nasıl oluşturulacağına ilişkin belgeler, bu yüzden başka kendimi dayalı Eklenti, bir Aurelia Katılımcı tarafından yapılan Aurelia-Bootstrap. Eklenti kodumu büyük ölçüde etkileyen dosyalardan biri index.js idi ve kodlama stilini benimki için kodlamada kullandım.

Sorunum nerde olabilir?


Ben de ancak hiç bir etkisi olmadığı aurelia.json için resources eklemek çalıştı.
{ 
    "name": "aurelia-slickgrid", 
    "path": "../node_modules/aurelia-slickgrid/dist/amd", 
    "main": "index", 
    "resources": [ 
    "**/*.html" 
    ] 
}, 

birkaç diğer Aurelia eklentileri için arama yaptıktan sonra, biraz daha ileri var. globalResources sadece View/ViewModel çifti (html/js) olmalıdır, benim durumumda sadece SlickPager olan bir çiftin ve şimdi sadece globalResources() tarafından çağrılan bir çiftin var. Yine de bir başka olası sorun, onaylamak için, eklenti adı ile aynı adlandırma olan aurelia-slickgrid.js adlı bir dosyam vardı, bu bir çakışma neden olabilir? Muhtemelen ... kim bilir. Her neyse, onu slick-service.js olarak yeniden adlandırdım ve sınıfı SlickService olarak yeniden adlandırdım. Artık WebPack Skeleton'da nesnemin 2/3'ünü arayabilirim, ancak hala SlickService'u içe aktaramıyorum.Eklentinin

güncellenen 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 }; 

şimdi konularda ben de SlickService içe Ancak

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

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

olmadan WebPack bu çağırabilir, bir hataya

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

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

önceki kodileşimdi bu hatayı

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

"resources": ["**/*.{css,html}"] Belki HTML dosyalarını yüklemek için eksik: aurelia.json içinde

  • sizin gibi, kaynaklar dizi eklemeniz gerekir? "" kaynaklar ": [" **/*. html "]' '' ana ':' index ''girdinizden sonra. –

  • +0

    Kodla ilgili bir küçük sorun: [bu] (https://github.com/ghiscoding/aurelia-slickgrid/blob/master/src/slick-pager.js#L2) "bootstrap" yerine "jquery" olmalıdır . Bu aurelia-cli ile bir hata olup olmadığını merak ediyorum. İskelet projelerinden birinde eklentiyi kullanmayı denediniz mi? –

    +0

    @MarcScheib “**”/*. Html ile kaynak eklemeyi denediğimi ve hiçbir farkın olmadığını belirtmeyi unuttum. @JeremyDanyow jquery referansını değiştirdim ve bir sürümü yeniden yayınladım ve bu sorunu çözmüyor (aynı zamanda yerel olarak çalıştığını da unutmayın). Ben sadece 'Aurelia-CLI' denedim çünkü benim eklenti – ghiscoding

    cevap

    4
    1. Eklentinizde olarak size dosya aynı ararsanız farketmez atar.
    2. globalResources yalnızca görünüm/vm çiftlerini değil, (yalnızca html bileşenleri ve özel nitelikler bağlanma davranışları ve değer dönüştürücüler gibi tek dosya kaynakları için .html) kabul eder.
    3. slick-service.js dosyasında yazım hatası var, SlickWindowResizer değil SlickResizer.
    +0

    Evet bu, nihayet @noj ve kendiniz sayesinde çalıştım. 4. noktanız aynı zamanda “Aurelia-CLI” ile de gitmeme yardımcı oldu ve ben de onu 'css' ve 'html' in harika olması için 1 satır üzerine yazabileceğinizi bilmiyordum. Bu harika :) – ghiscoding

    +2

    Bu tür bilgi gerçekten 'Aurelia Plugin' belgelerinin bir parçası olmalıdır ... sorun şu ki, doktor mevcut değil :( – ghiscoding