J'ai essayé d'utiliser NOTY avec une application Aurelia / Typescript. Installation du package à l'aide de NPM et utilisation de requireJS pour le récupérer dans l'application.
Peu importe ce que j'essaye, je n'ai pas réussi à le faire fonctionner. Pour l'importer dans le fichier dont j'ai besoin de la référence, j'ai essayé les deux méthodes suivantes
Tentative n ° 1
import * as Noty from 'noty';
Cela semble créer les bonnes références et je peux le voir dans le code. Lorsque j'essaye de l'utiliser, je n'obtiens aucune erreur de construction et tout semble correct.
Mais quand je lance ceci code, j'obtiens une erreur indiquant - "Noty n'est pas un constructeur"
Tentative 2
importer Noty depuis 'noty'
Cette approche se plaint de l'absence de membres exportés par défaut.
Une autre variante que j'ai essayée est import {Noty} de 'noty'; Cela m'a donné une réponse similaire
Je ne sais pas ce que je manque mais toute suggestion pour l'implémenter est très appréciée. TIA
UPDATE # 1
Ajouté dans le fichier aurelia.json
Paquet Noty non chargé
PS: Ajout d'un lien vers NOTY si un regard sur le fichier index.d.ts est nécessaire.
3 Réponses :
Le problème que vous rencontrez vient probablement de la façon dont NOTY exporte sa fonctionnalité principale, ce qui, je suppose, a été fait de manière courante:
import * as $NOTY from 'noty'; // wrong: const NOTY = $NOTY as any as typeof $NOTY; // wrong: const NOTY = $NOTY.Noty as any as typeof $NOTY; // or // wrong: const NOTY = new (options: $NOTY.OptionsOrSomeThing): $NOTY; const NOTY = ($NOTY as any).Noty as new (options: $NOTY.OptionsOrSomeThing): $NOTY; // do your code here with NOTY new NOTY();
Pour l'importer correctement dans votre code, vous devez utiliser le syntaxe du module d'importation:
import * as NOTY de 'noty';
C'est la même chose pour de nombreuses autres bibliothèques qui conservent toujours le style d'exportation de la manière traditionnelle.
Mise à jour:En fonction de leur exportation de définition de type: https://github.com/needim/noty/blob/master/index.d.ts#L2
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
...
else if(typeof exports === 'object')
exports["Noty"] = factory();
...
Cela signifie que vous devriez toujours faire comme votre tentative 1. Mais voici comment elle est réellement expédiée https://github.com/needim/noty/blob/master/lib/noty.js#L9-L18
declare module 'noty' {
exports = Noty;
}
J'ai essayé ce qui précède et vous pouvez le voir dans la tentative # 1 - Cela semble importer les choses correctement, mais lorsque j'essaye d'utiliser le constructeur, cela ne l'aime pas et génère une erreur. Aucune suggestion ?
J'ai mis à jour la réponse, pouvez-vous jeter un œil et essayer?
Merci, cela avait l'air prometteur, mais pas de dés - toujours la même erreur " Noty n'est pas un constructeur " apparaît.
Cela a duré un peu et je n'ai pas mis toute ma réponse la dernière fois. Pouvez-vous vérifier à nouveau
Il ne semble pas reconnaître const NOTY = $ NOTY.Noty comme any as typeof $ NOTY; La propriété Noty n'existe pas sur le type 'typeof Noty'
Ouais, veuillez vérifier à nouveau. J'ai corrigé ça.
Toujours en train de rencontrer des problèmes - à ce stade, je prévois d'abandonner le plan d'utilisation de ce package avec Aurelia / Typescript. J'ai pu faire fonctionner toastrjs correctement sans beaucoup de problèmes et je continuerai à l'utiliser
Pas de soucis. Désolé d'entendre ça. Je ne l'ai jamais utilisé. Je devrais peut-être essayer avant de recommander.
Vous avez ajouté la prime pour l'aide!
Bien, merci! Je vous recommande quand même d'essayer ce que j'ai mis là dans la réponse avec ma dernière mise à jour.
J'ai essayé la dernière mise à jour et je rencontre toujours des erreurs - je fournirai plus de détails lorsque je serai sur mon ordinateur. Je suis prêt à consacrer plus de temps et d'efforts à ce sujet si vous pensez que nous pouvons arriver quelque part avec ça :)
Il semble que votre mappage de paquet pour requireJS pointe vers le mauvais fichier (probablement le fichier index.d.ts).
Je viens de regarder le package NPM 'noty', il semble que votre mappage pour requireJS devrait être quelque chose comme:
{ "name": "noty", "path": "../node_modules/noty/lib", "main": "noty.min" }
TypeScript se soucie des fichiers * .d.ts, mais requireJS n'est pas TypeScript, il gère le chargement des fichiers dans le navigateur, donc il ne se soucie que des fichiers Javascript.
BTW, on vous pardonne de ne pas avoir immédiatement grogné la folie qu'est la plate-forme Web.
Merci d'avoir mis cela comme réponse - j'ai essayé ce qui précède et toujours pas de chance
Ok, on dirait que nous allons quelque part - j'ai regardé leur documentation et changé un peu votre suggestion en nommant le module avec un Caps 'N'. Maintenant, je vois qu'il essaie de trouver le fichier noty.js dans mon dossier / src et renvoie un 404 pour ce fichier
Donc, votre approche n ° 1 est correcte. On dirait que TS est content, il reconnaît le nom du paquet et fournit la saisie. Cela signifie que le problème se situe quelque part dans le chargement du package. Je veux confirmer que le code ci-dessus est dans la section 'dependecies' de votre fichier aurelia.json, également votre fichier aurelia.json doit être sous / aurelia_project , qui est un frère de / node_modules .
Tout le précédent est vrai.
Dans ce cas, il semble que vous utilisez la CLI Aurelia, je suppose que cela force une sorte de processus de regroupement qui ne génère pas la sortie appropriée. Sans plus d'informations sur votre configuration, il sera très difficile de vous aider. Je suis tombé sur ceci , cela peut vous aider à trouver un hack / une solution de contournement si rien d'autre.
La bibliothèque noty a une définition AMD nommée define ('Noty', ...) au lieu d'une définition anonyme normale. Cela devrait fonctionner, mais il semble que mon récent PR ait créé une régression pour cli-bundler sur un module AMD nommé, ou peut-être un nouveau bogue sur un module AMD nommé.
Je vais corriger cette régression. Mise à jour que j'ai effectuée https://github.com/aurelia/cli/ pull / 1084
Pour contourner le problème maintenant,
patch / noty.js avec le contenu: import * as Noty from 'noty';
Ce patch crée un alias de 'noty' à 'Noty'.
lib / noty.js principale par défaut: {
"name": "vendor-bundle.js",
"prepend": [
"node_modules/requirejs/require.js",
// add this line after requirejs
"patch/noty.js"
],
"dependencies": [
"aurelia-bootstrapper",
"aurelia-loader-default",
"aurelia-pal-browser",
{
"name": "aurelia-testing",
"env": "dev"
},
"text",
// optionally override noty main path, only if you want to get rid of the annoying es6-promise.map error
{
"name": "noty",
"path": "../node_modules/noty",
"main": "lib/noty.min"
}
]
}
Il essaie de charger es6-promise.map mais aucun fichier de ce type.
Mise à jour: l'erreur n'arrêterait pas le regroupement. strong>
ERROR [Bundle] Error: An error occurred while trying to read the map file at /Users/huocp/playground/nt/node_modules/noty/lib/es6-promise.map
Ensuite, cette importation fonctionne, j'ai testé.
define('noty',['Noty'],function(m){return m;});
BTW, pour oublier * comme , utilisez l'option de compilateur esModuleInterop recommandée par Microsoft.
https://www.typescriptlang.org/docs/ manuel / release-notes / typescript-2-7.html
Avez-vous ajouté les définitions de type pour
Noty(fichier.d.ts)?@adiga: Voulez-vous dire cela?
{"name": "noty", "path": "../node_modules/noty", "main": "index"}Avez-vous inclus une référence au script NOTY dans votre modèle aurelia ou votre fichier HTML de base? Êtes-vous sûr que requireJS charge correctement le fichier de script NOTY?
@JoyalToTheWorld - Nouveau dans ce domaine - pouvez-vous donner plus d'informations? Je crois que non. J'étais en train de déboguer davantage et de voir que le module n'est pas défini au moment de l'exécution.
@Ron peut-être que vous pouvez mettre à jour votre message avec votre configuration requireJS. Cela devrait être responsable du chargement de vos scripts, vous devrez mapper le nom du paquet 'NOTY' à l'emplacement du script sur le disque, similaire à ce que vous avez posté ci-dessus en réponse à adiga. En outre, vous pouvez vérifier les outils de développement pour voir s'il y a des demandes qui ont échoué, comparer le chemin dans la demande avec ce que vous voyez réellement sur le disque. J'espère que ça t'as aidé.
@JoyalToTheWorld: Ok, donc si je vous comprends bien, j'ai ajouté la référence que vous mentionnez. Je mettrai à jour la question dans un min. Je ne vois aucune erreur lors du chargement, mais si je mets un point d'arrêt dans Chrome DEV sur la ligne que j'ai mentionnée, je vois que l'objet n'est pas défini. Idem à l'emplacement d'importation - La variable NOTY n'est pas définie.
@Ron donc si le script est chargé correctement, mais que le module n'a pas l'air correct dans le débogueur, il semble que votre mappage de package pour require pointe vers le mauvais fichier. Je viens de regarder le package NPM 'noty', il semble que votre mappage pour requireJS devrait être quelque chose comme
{"name": "noty", "path:" ../node_modules/noty/lib ", main:" noty.min "}. Si requireJS charge index.d.ts cela expliquerait pourquoi votre module n'est pas défini lorsque vous inspectez au point d'arrêt.