在Aurelia/类型记录应用中使用noty

Question

我一直试图在Aurelia/Typescript应用程序中使用诺蒂。使用NPM安装包，并使用requireJS将其拉到应用程序中。

无论我如何努力，我都无法使它开始工作。为了在我需要引用的文件中导入它，我尝试了以下两种方法

Attempt# 1

import * as Noty from 'noty';

这似乎创建了正确的引用，我可以在代码中看到这一点。当我尝试使用它时，我不会遇到任何构建错误，而且一切看起来都很好。

​

​

但是当我运行这段代码时，我会得到一个错误，即状态- "Noty is not a constructor"。

尝试2

import Noty from 'noty'

​

​

此方法抱怨没有默认导出成员。

我尝试过的另一个变体是import { Noty } from 'noty'; --这给了我一个类似的反应

​

​

不知道我错过了什么，但任何实施这方面的建议都会受到高度赞赏。提亚

UPDATE#1

添加aurelia.json文件

​

Noty包未装载

​

如果需要查看index.d.ts文件，请添加到NOTY的链接。

Answer 1

听起来您的requireJS包映射指向错误的文件(可能是index.d.ts文件)。

我刚刚查看了“noty”NPM包，看起来您对requireJS的映射应该如下所示：

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

TypeScript关心*.d.ts文件，但requireJS不是TypeScript，它处理将文件加载到浏览器中，因此它只关心Javascript文件。

顺便说一句，你没有立刻摸到疯狂的网络平台，这是被原谅的。

Answer 2

noty有一个命名的AMD define('Noty',...)，而不是普通的匿名定义。这应该是可行的，但我最近的公关似乎为命名为AMD模块的cli-bundler创建了一个回归，或者在命名为AMD模块上创建了一个新的bug。

我会解决这个问题的。更新我做了 https://github.com/aurelia/cli/pull/1084

现在开始工作，

1. 在项目patch/noty.js中创建另一个包含以下内容的文件：

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

此修补程序从“Noty”到“Noty”创建别名。

1. 添加到aurelia.json前，必须是后的。
2. 默认主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承诺.映射，但没有这样的文件。

更新:错误不会停止捆绑.

{
    "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，请使用微软推荐的esModuleInterop编译器选项。https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Answer 3

您所遇到的问题可能来自NOTY导出其主要功能的方式，我猜这是以普通的方式完成的：

module.exports = NOTY;

要在代码中正确导入它，应该使用导入模块语法：

进口*从“NOTY”进口；

对于仍然保持传统方式导出风格的许多其他库来说，情况也是一样的。

更新：

基于它们的类型定义导出：https://github.com/needim/noty/blob/master/index.d.ts#L2

declare module 'noty' {
  exports = Noty;
}

这意味着您应该始终像尝试1那样做。

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