在 Angular 5 中，如何导入没有 @types 的 NPM 模块

Posted 2023-03-07

【中文标题】在 Angular 5 中，如何导入没有 @types 的 NPM 模块

【英文标题】：In Angular 5, how can I import NPM modules with no @types

【发布时间】：2018-07-23 12:46:46

【问题描述】：

我正在尝试 Angular 5，从 angular-cli 开始一个项目。在这个项目中，我想使用一个 NPM 模块：J2M (https://github.com/kylefarris/J2M)，所以我在网上看到了这两个命令：

npm install j2m --save
npm install @types/j2m --save-dev

不幸的是，@types/j2m 根本不存在。 所以我试图找到一种方法来定义我自己的类型，但没有成功......

我正在使用此代码：

import * as J2M from "j2m";
...
console.log(J2M.toM(value));

但是根据我在网上找到的示例，要么“j2m”无法识别，要么“toM”不是函数......

那么，导入这个模块的正确方法是什么？

谢谢，

【问题讨论】：

没有@types/j2m 包。您需要编写自己的类型。

【参考方案1】：

您需要将脚本添加到您的angular-cli.json 文件中。

在scripts 属性下，添加

'../node_modules/path/to/minified/js.js'

如果需要样式，您还必须在同一文件中的styles 属性下添加它。

完成此操作后，您的库已导入。这意味着您不需要使用诸如

之类的东西

import * from 'j2m';

但是如果你想使用一个全局变量而不让你的 IDE 抛出错误，那么你应该添加

declare var J2M: any;

J2M 是库中导出的全局函数（例如，对于 MomentJS，此变量称为 moment）。

当您使用定义文件时，它只是告诉 CLI 自动获取 JS 库，并为您提供 IDE 自动完成功能。使用此解决方案，您无需自动完成，而是明确告诉 CLI 从何处获取库。

【讨论】：

完美！那行得通 :) 接受为最佳解决方案。

哦，当我尝试切换到 J2M 的分叉版本时，出现了另一个“问题”，它使用“require('marked') ReferenceError: require is not defined 后来在 TypeError: J2M is undefined可能是因为它无法导入标记...

那就不要切换了 :D 不然看this issue解决