Question

我一直试图在Aurelia / Typescript应用程序中使用NOTY。使用NPM安装了该软件包，并使用requireJS将其拉入应用程序。

无论我尝试什么，我都无法使其正常运行。为了将其导入需要参考的文件中，我尝试了以下两种方法

尝试＃1

import * as Noty from 'noty';

这似乎可以创建正确的引用，我可以在代码中看到它。当我尝试使用它时，没有出现任何构建错误，并且一切正常。

但是，当我运行这段代码时，出现一个错误，指出-"Noty is not a constructor"

尝试2

import Noty from 'noty'

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

我尝试的另一种变化是import { Noty } from 'noty';，这给了我类似的答复

不确定我缺少什么，但是对实现此建议的任何建议均表示赞赏。 TIA

UPDATE＃1

添加到aurelia.json文件中

Noty包未加载

PS：如果需要查看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',...)，而不是普通的匿名定义。它应该可以工作，但是我最近的PR似乎在命名AMD模块上为cli-bundler创建了回归，或者在命名AMD模块上创建了一个新错误。

我将修复该回归问题。 我所做的更新 https://github.com/aurelia/cli/pull/1084

要立即解决，

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

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

此补丁会创建从“ noty”到“ Noty”的别名。

添加到aurelia.json前缀中，必须在 requirejs之后。
默认主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导出其主要功能的方式，我想这是通过commonjs方式完成的：

module.exports = NOTY;

要在代码中正确导入，请使用import模块语法：

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

在Aurelia / Typescript应用程序中使用noty

3 个答案: