2

我一直在尝试将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 文件中添加 在此处输入图像描述

未加载通知包 在此处输入图像描述

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

4

3 回答 3

1

noty 库有一个命名的 AMD 定义define('Noty',...)，而不是普通的匿名定义。它应该可以工作，但似乎我最近的 PR 在命名 AMD 模块上为 cli-bundler 创建了回归，或者可能在命名 AMD 模块上创建了一个新错误。

我会修复那个回归。更新我做了 https://github.com/aurelia/cli/pull/1084

现在要工作，

  1. 在您的项目中创建另一个patch/noty.js包含内容的文件：
define('noty',['Noty'],function(m){return m;});

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

  1. 添加到 aurelia.json 前面，必须在 requirejs 之后。
  2. 默认 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，使用微软推荐的esModuleInterop编译器选项。 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

于 2019-04-05T08:02:31.253 回答
1

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

我刚刚查看了“noty”NPM 包，看起来您对 requireJS 的映射应该类似于：

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

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

顺便说一句，您没有立即理解网络平台的疯狂是可以原谅的。

于 2019-02-11T17:09:33.417 回答
0

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

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();
于 2019-02-08T08:51:12.417 回答