我一直在尝试使用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
PS:如果需要查看index.d.ts文件,则添加了对NOTY的链接。
听起来像requireJS的包映射指向错误的文件(可能是index.d.ts文件)。
我只是看了'noty'的NPM包,看起来你对requireJS的映射应该是这样的:
{ "name": "noty", "path": "../node_modules/noty/lib", "main": "noty.min" }
TypeScript关注* .d.ts文件,但requireJS不是TypeScript,它处理将文件加载到浏览器中,因此它只关心Javascript文件。
顺便说一句,你没有立即解决网络平台的疯狂问题。
noty lib有一个命名的AMD定义define('Noty',...)
而不是普通的匿名定义。它应该工作,但似乎我最近的PR在命名的AMD模块上创建了cli-bundler的回归,或者可能是命名AMD模块的新bug。
我会修复那个回归。更新我做了https://github.com/aurelia/cli/pull/1084
要现在解决,
patch/noty.js
中创建另一个包含内容的文件:define('noty',['Noty'],function(m){return m;});
此补丁创建了从'noty'到'Noty'的别名。
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
你得到的问题可能来自于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();