无法导入外部 NPM 包来制作角度库

Question

• package.json首先我这样做了，

{
"name": "crypto-local-storage",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^12.2.0",
"@angular/core": "^12.2.0",
"crypto-js": "^3.1.8",
"secure-web-storage": "^1.0.2"
},
"dependencies": {
"tslib": "^2.3.0"
},
"devDependencies": {
"@types/crypto-js": "^4.0.2"
}
}

其次，我做了这个

{
"name": "crypto-local-storage",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^12.2.0",
"@angular/core": "^12.2.0"

},
"dependencies": {
"tslib": "^2.3.0",
"crypto-js": "^3.1.8",
"secure-web-storage": "^1.0.2"
},
"devDependencies": {
"@types/crypto-js": "^4.0.2"
}
}

但是在我的服务文件中当我像这样导入secure-web-storage时

import * as SecureStorage from 'secure-web-storage';我收到了这样的信息，

TS7016: Could not find a declaration file for module 'secure-web-storage'.
'D:/AMS/crypto-local-storage/projects/crypto-local-storage/node_modules/secure-web-storage/secure-storage.js' 
implicitly has an 'any' type.  
Try `npm i --save-dev @types/secure-web-storage` if it exists or add a new declaration (.d.ts) file containing 
`declare module 'secure-web-storage';`

secure-web-storage不包含任何@types/secure-web-storage文件。怎样才能摆脱这个错误呢?我搜索了那么多，还是没有得到明确的答案。

我的文件夹结构可能对你有帮助，

我的文件夹结构图片

Answer 1

如果运行npm install -D @types/secure-web-storage不能解决问题，请使用require代替import。

const secureWebStorage= require('secure-web-storage');

Answer 2

您也可以尝试在src文件夹中创建一个typings.d.ts文件，并手动为其添加类型。

declare module 'secure-web-storage' {
export function someFunction(): void;
}

然后在ts文件中，你可以使用-

import { someFunction } from 'secure-web-storage';

与使用-

相比，使用此方法可以节省大量的包大小。

const secureWebStorage= require('secure-web-storage');

占用了大量的包大小，使应用程序变慢。您可以在这里阅读更多内容- https://web.dev/commonjs-larger-bundles/