Использование ноти в приложении Aurelia / Typescript

Question

Я пытался использовать NOTY с приложением Aurelia / Typescript.Установите пакет с помощью NPM и используйте requireJS, чтобы загрузить его в приложение.

Что бы я ни пытался, я не смог заставить его работать.Чтобы импортировать его в файл, для которого мне нужна ссылка, я попробовал следующие два метода:

---

Попытка # 1

import * as Noty from 'noty';

Это, кажется, создаетправильные ссылки, и я могу видеть это в коде.Когда я пытаюсь его использовать, я не получаю никаких ошибок сборки, и все кажется нормальным.

Но когда я запускаю этот код, я получаюошибка, которая заявляет - "Noty is not a constructor"

---

Попытка 2

import Noty from 'noty'

Этот подход жалуется на отсутствие экспортируемых по умолчанию членов.

Еще один вариант, который я попробовал, это import { Noty } from 'noty'; Это дало мне аналогичный ответ

---

Не уверен, что яотсутствует, но любые предложения по реализации это высоко ценится.TIA

---

ОБНОВЛЕНИЕ # 1

Добавлено в файл aurelia.json

Пакет Noty не загружен

PS: добавлена ​​ссылка на NOTY, если необходим просмотр файла index.d.ts.

Answer 1

Похоже, что ваше отображение пакета для requireJS указывает на неправильный файл (возможно, файл index.d.ts).

Я только что посмотрел на пакет NPM 'noty', похоже, что ваше отображение для requireJS должно быть примерно таким:

{ "name": "noty", "path": "../node_modules/noty/lib", "main": "noty.min" }

TypeScript заботится о файлах * .d.ts, но requireJS неЭто не TypeScript, он обрабатывает загрузку файлов в браузер, поэтому он заботится только о файлах Javascript.

Кстати, вы прощены за то, что не сразу впали в безумие веб-платформы.

Answer 2

Ноти-библиотека имеет именованное AMD определение define('Noty',...) вместо обычного анонимного определения.Это должно работать, но, похоже, мой недавний PR создал регрессию для cli-bundler на названном модуле AMD, или, возможно, новую ошибку на названном модуле AMD.

Я исправлю эту регрессию. Обновление, которое я сделал https://github.com/aurelia/cli/pull/1084

Чтобы обойти это сейчас,

1. создайте еще один файл в вашем проекте patch/noty.js с содержимым:

define('noty',['Noty'],function(m){return m;});

Этот патч создает псевдоним от 'noty' до 'Noty'.

добавить к aurelia.json prepend, должно быть после requirejs . существует другая проблема со значением по умолчанию main lib/noty.js:

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

Он пытается загрузить es6-promise.map, но такого файла нет.

Обновление: ошибка не остановит связывание.

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

    ]
}

Тогда этот импорт работает,Я тестировал.

import * as Noty from 'noty';

Кстати, чтобы забыть о * as, используйте рекомендованный Microsoft вариант компилятора esModuleInterop.https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Answer 3

Вероятно, проблема возникла из-за того, что NOTY экспортирует их основные функциональные возможности, что, я думаю, было сделано обычным способом:

module.exports = NOTY;

Чтобы правильно импортировать его в код, вам следует использовать модуль импортасинтаксис:

импорт * как NOTY из 'noty';

То же самое для многих других библиотек, которые все еще сохраняют стиль экспорта традиционным способом.

Обновление:

На основе экспорта определения их типа: https://github.com/needim/noty/blob/master/index.d.ts#L2

declare module 'noty' {
  exports = Noty;
}

Это означает, что вы всегда должны делать то же самое, что и ваша попытка 1. Но именно так она и отправляется https://github.com/needim/noty/blob/master/lib/noty.js#L9-L18

(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();
...

Обратите внимание на последнюю часть exports["Noty"] = factory().Я подозреваю, что это то, что взял, а не первый.Это означает, что он равен именованному экспорту Noty

Так что, вероятно, это несоответствие между этими элементами экспорта, которое вызвало у вас проблему.Я бы посоветовал вам сделать это:

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();