如何使用 Angular-Cli/Webpack 导入 PouchDb-Find答案

【问题标题】：How to import PouchDb-Find with Angular-Cli/Webpack如何使用 Angular-Cli/Webpack 导入 PouchDb-Find
【发布时间】：2016-12-05 19:08:20
【问题描述】：

我想将 Angular 2/Typescript 与 PouchDb 和 PouchDb-Find 与使用 Angular-cli（现在基于 webpack）生成的项目一起使用。PouchDb 通过一个简单的导入语句进行连接。

import * as PouchDB from 'pouchdb'

var commonDb = new PouchDB(this.commonDbUrl) ;
console.log("commonDb",commonDb) ;

// .getIndexes() is from pouchDb.find. I don't know what the import for it is
commonDb.getIndexes().then(function (result) {
    console.log("GetIndexes.Success",result) ;
}).catch(function (err) {
    console.log("GetIndexes.Failed",err) ;
});

新的 PouchDb 有效，commonDb.getIndexes 无效。我在import * as pouchfind from 'pouchdb-find' 上尝试了许多变体，但无济于事。

如何导入 PouchDb-Find 模块？

【问题讨论】：

您必须进行一些设置才能让PouchDB 工作，不是吗？比如npm install ...等。你做了什么？（你也为 PouchDB-Find 做过吗？）
我为 PouchDb 和 PouchDb 找到了 NPM 安装。所以它们在 node_modules 中。我的理解是 webpack 会查看 import 语句来确定要带入包中的内容。我只是不知道导入语句应该是什么样子。
import * as PouchDB from 'pouchdb' 工作吗？
import * as PouchDb from pouchdb` 确实有效。我得到了 pouchdb 的功能。为问题添加了更多信息。
你为他们安装了打字机吗？如果有，是哪些？

标签： angular webpack pouchdb

【解决方案1】：

这应该可行：

import * as PouchDB from 'pouchdb'
import * as PouchFind from 'pouchdb-find'
PouchDB.plugin(PouchFind)

对于打字，我知道没有 pouchdb-find 的打字，所以你必须使用any。

【讨论】：

我继续在 pouchdb-find 上发现模块未找到错误，即使我已经完成了 NPM 安装并验证它位于 node_modules 文件夹中。必须是 angular-cli 的东西。
仅用于我使用的 pouchdb import PouchDB from 'pouchdb';

【解决方案2】：

我怀疑我无法以预期的方式解决此问题，因为 Angular-Cli 仍处于测试阶段，肯定存在一些问题。

我能够通过将 pouchdb.find.js 和 poucdb.js 放入 public/pouchdb 文件夹并从 index.html 引用它们来解决问题，如下所示。我很清楚这是一种变通方法，需要变通方法。

<script src="pouchdb/pouchdb.js"></script>
<script src="pouchdb/pouchdb.find.js"></script>

<script>
    PouchDB('pouchdbfind') ;
</script>

我希望 Angular-cli 能够迅速成熟。

【讨论】：

【解决方案3】：

有点晚了，但我也遇到了同样的问题，不会使用脚本 src 方式...

我正在使用带有 nodejs 7.x 的 nvm，但不知道重启后 nvm use xxx 在 Mac 上会丢失。

切换到 nodejs 7.1.0 后一切正常...

所以：看你的 npm 版本

HTH

皮特

【讨论】：

【解决方案4】：

这对我有用。

安装 npm 包。

npm install --save pouchdb-browser
npm install --save pouchdb-find

并写了这段代码

import PouchDB from 'pouchdb-browser';
import PouchDBFind from 'pouchdb-find';
PouchDB.plugin(PouchDBFind);

【讨论】：

【解决方案5】：

在 Angular 6 中你应该添加到 polyfills.ts:

(window as any).global = window;
(window as any).process = {};
(window as any).process.nextTick = setTimeout;

然后要使用 PouchDB/PouchDB-find，您应该将以下行添加到您的服务/控制器：

import PouchDB from 'pouchdb';
import PouchFind from 'pouchdb-find';
PouchDB.plugin(PouchFind);

【讨论】：

我认为这需要将 TSC 的 esModuleInterop 选项设置为 true。（不确定这是否是 Angular-CLI 中的默认设置）