获取外部 JS 库以适用于 Angular 2

Question

我正在努力让 FileSaver 参与我的项目。这是我采取的确切步骤

1. npm install filesaver.js --save

2. 在 app.component.ts 内

从 'filesaver.js' 导入 * 作为 FileSaver；

然后我得到这个错误

找不到模块“filesaver.js”。

我还尝试将以下内容添加到我的 angular-cli.json 文件中

  "scripts": [
    "../node_modules/filesaver.js/FileSaver.min.js"
  ]

This 是我能找到的最接近的可能会有所帮助。但是，这家伙的设置与我不同。一定有一种简单的方法来使用这个文件吧？

注意，从 npm 安装 FileSaver 后，在我的节点模块中，我得到了 filesaver.js 文件夹（不知道为什么他们有 .js 作为文件夹名称）。在这个文件夹中，我得到 FileSaver.js 和 FileSaver.min.js

我也试过了

从 'filesaver.js/FileSaver.min.js' 导入 * 作为 FileSaver；

但这只是给了我

找不到模块'filesaver.js/FileSaver.min.js'。）

----更新---

我也尝试过typings file

npm i @types/filesaver

结果是一样的

----更新-----

这是我如何让它工作的。

添加了@types/filesaver 并添加了以下代码。

declare module 'filesaver' {
    var saveAs: any;
    export = saveAs;
}

注意。我正在修改我的 node_module 文件中的内容是不是很糟糕。这意味着每次用户运行 npm install 时，自定义代码都不会出现。如何绕过它？

从 npm 下载的默认文件夹名称是 filesaver.js。我将其更改为文件保护程序。为什么他们将其命名为 .js，程序似乎无法将其识别为文件夹

然后从'filesaver'导入*作为文件保护程序

那我可以打电话了

var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
filesaver.saveAs(blob, "hello world.csv");

-----文件夹结构-----

angular-cli：1.0.0-beta.26 节点：6.9.1 操作系统：darwin x64 @angular/common：2.4.5 @angular/编译器：2.4.5 @angular/core：2.4.5 @angular/forms: 2.4.5 @angular/http: 2.4.5 @angular/material: 2.0.0-beta.1 @angular/platform-b​​rowser: 2.4.5 @angular/platform-b​​rowser-dynamic: 2.4.5 @angular/router: 3.4.5 @angular/compiler-cli: 2.4.5

Answer 1

添加到 angular-cli（你做了什么）

 "scripts": [
    "../node_modules/filesaver.js/FileSaver.min.js"
  ]

然后添加到 src/typings.d.ts

declare function saveAs(data: Blob, filename: string)

现在您可以在没有任何导入的情况下使用此方法。

var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
saveAs(blob, "hello world.csv");

它是如何工作的。

1. 你不应该创建typings.d.ts，它是由angular-cli添加的，所以它必须在你项目的src文件夹中。
2. 当您在部分脚本中添加 angular-cli.json 时，所有这些脚本都将在页面开始时加载。这就是为什么像“../node_modules/filesaver.js/FileSaver.min.js”一样包含来自 node_modules 的脚本很重要的原因。并且像您一样添加了带有 --save 标志的包，因此任何时候删除文件夹并调用 npm install 您的脚本都会到位。 3.