aurelia custom plugin qui utilise un attribut personnalisé - ne peut pas trouver l'attribut personnalisé

Question

Salut, j'ai téléchargé le plugin hello world aurelia skelton de https://github.com/aurelia/skeleton-plugin. puis je référence cela à partir du fichier package.json dans une nouvelle copie de l'aurelia esnext/webpack skelton (https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack) comme mon application principale. je peux alors utiliser le plug-in dans un de mes composants avec

<require from="aurelia-skeleton-plugin/hello-world"></require> 

en haut de la vue et de placer <hello-world></hello-world> partout sur la vue. Cela fonctionne très bien.

la prochaine étape que je veux essayer est d'ajouter un attribut personnalisé à mon plugin. dans le dossier src de mon plug-in i ajouté simple attribut personnalisé

export class RedSquareCustomAttribute { 
    static inject = [Element]; 

    constructor(element){ 
    this.element = element; 
    this.element.style.width = this.element.style.height = '100px'; 
    this.element.style.backgroundColor = 'red'; 
    } 
} 

je référence alors cela dans ma page bonjour-world.html avec le code suivant

<require from="./red-square"></require> 
    <div red-square></div> 

terme de construction engouffreur, puis réinstallez le paquet dans mon application principale. dans l'application principale npm start construit ok mais le navigateur me donne l'erreur: Impossible de trouver le module './aurelia-skeleton-plugin/red-square'

ive lire beaucoup de docs mais rien donne un exemple de ce scénario et toute aide serait grandement appréciée.

Answer 1

Voici quelques choses à essayer - même si je l'ai eu à travailler hors de la boîte du tutoriel dans le lien que vous avez fourni.

Confirmez que babelOptions dans config.js a classProperties.

babelOptions: { 
    "optional": [ 
     "runtime", 
     "optimisation.modules.system", 
     "es7.classProperties" 
    ] 
    }, 

Ensuite, s'il vous plaît vérifiez que vos fichiers sont correctement placés dans le dossier src et nommé:

• red-sqaure.js
• simple-attribute-usage.html

Ensuite, quel que soit le fichier HTML a votre contenu - votre shell/application, faites quelque chose comme ce qui suit:

<compose view="simple-attribute-usage.html" viewmodel="red-square"></compose>

si je suis en mesure d'obtenir HTML d'origine pour travailler

<require from="./red-square"></require> 
    <div red-square></div>