如何使 minimongo.js 在浏览器中工作？答案

【问题标题】：How to make minimongo.js works in browser?如何使 minimongo.js 在浏览器中工作？
【发布时间】：2018-08-01 07:56:37
【问题描述】：

github presentation of minimongo 声明为

通过 http 与服务器同步的客户端 mongo 数据库

还有一个minimongo-standalone 提供了一个 minimongo.min.js 声明：

你也可以只下载 minimongo.min.js，把它放在你的服务器，并在您的源代码中引用它。

对于浏览器

<script src="/js/minimongo.min.js"></script>

我之前使用过 d3.js，它以某种方式打包，因此 .js 文件在 web 浏览器中作为 lib 和在节点上作为 npm 包工作。

所以我尝试在本地使用我新下载的minimongo.js 在 Chrome 中使用indexeddb 构建一个经典网页，就像使用 D3.js 一样。它给出了类似的东西（jsfiddle）：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MiniMongo</title>
    <script src="https://rawgit.com/rurri/minimongo-standalone/master/minimongo.min.js"></script>
    <!-- https://github.com/rurri/minimongo-standalone/blob/master/minimongo.min.js -->
  </head>
  <body></body>
  <script>
    // Require minimongo
    var minimongo = require("minimongo");
    var LocalDb = minimongo.MemoryDb;
    // Create local db (in memory database with no backing)
    db = new LocalDb();
    // Add a collection to the database
    db.addCollection("animals");
    doc = { species: "dog", name: "Bingo" };
    // Always use upsert for both inserts and modifies
    db.animals.upsert(doc, function() {
      // Query dog (with no query options beyond a selector)
      db.animals.findOne({
        species: "dog"
      }, {}, function(res) {
        console.log("Dog's name is: " + res.name);
      });
    });

  </script>
</html>

它返回错误：

Uncaught ReferenceError: _ is not defined
    at minimongo.min.js:1
    at minimongo.min.js:3
Uncaught ReferenceError: require is not defined
    at (index):5911
Uncaught ReferenceError: _ is not defined
    at (index):91
    at window.onload ((index):5889)

我遗漏了什么或误解了什么？如果可能的话如何使它工作？

【问题讨论】：

你想在非流星项目中使用 minimongo 吗？
我想要一个小提琴，一个经典的 HTML+JS index.html 网页。

标签： meteor minimongo

【解决方案1】：

一些事情

1。依赖关系

如果您阅读minimongo-standalone 的README.MD，它会说

要求

下划线，异步

因此，您需要在页面中的 minimongo 脚本标记之前包含这两个库。

<head>
  <script src="https://link/to/underscore.js"></script>
  <script src="https://link/to/async.js"></script>
  <script src="https://rawgit.com/rurri/minimongo-standalone/master/minimongo.min.js"></script>

值得一提的是，您需要获取这些库的浏览器版本。 async 似乎没有使用通用模块定义 (UMD)，因此为不同的目标提供了单独的文件。

2。需要

require 函数不存在，除非您使用的是 browserify 或其他 commonJS 模块加载框架。

我还没有检查过async 或underscore，但如果模块系统不存在，大多数库将回退到浏览器中的普通全局变量。

包含三个脚本标签后，您应该能够全局访问 minimongo-standalone 的导出符号

3。 `minimongo-standalone` 与 `minimongo` 有一个非常不同的 API

令人沮丧的一点； minimongo-standalone 在 minimongo 周围实现 Meteor 包装器，然后再次重命名它们。这意味着任何minimongo 或Meteor 代码都不能直接转移。

好的部分是 API 非常简单。您的示例的等效代码是

// Create collection
var animals = new LocalCollection('animals');
// Insert/update a document

var doc = { species: "dog", name: "Bingo" };
animals.upsert('dog', doc);

// Fetch document and log
var myDog = animals.findOne({ species: "dog" });
console.log("Dog's name is: " + myDog.name);

【讨论】：

我使用 cdnjs.org 加载依赖项。它似乎不起作用：jsfiddle.net/7fehe9ey/7。我可能将“客户端”误解为“在浏览器中”，但事实并非如此。它实际上完全需要一个 nodejs 环境，以便通过 require() 加载模块。
哦，我错过了 require 错误！对不起。两者都是。您需要 deps 并且不能使用 require，因为这是一种 browserify 方法
我做了npm install minimongo underscore async; npm install -g browserify; echo "{js-only code sample from satckoverflow question above ⬆️}" > ./app.js; browserify ./app.js -o ./bundle.js;。它会生成一个 800Kb ./bundle.js 文件，该文件在 jsfiddle jsfiddle.net/7fehe9ey/8 中作为黑盒工作，但我无法在 index.html 页面中编写可与 indexeddb 一起使用的 js 代码。
我发现了一个类似的 MongoDB 包装器，它似乎工作得更好，并且有更好的文档：ZangoDB:github.com/erikolson186/zangodb
@NeedleNoseNeddy，如果您对 ZangoDB 有一些掌握或正确的知识，请考虑在此案例研究中写一个答案，我们可以比较方法：stackoverflow.com/questions/48890649

【解决方案2】：

@Fred_Stark ：我们鼓励您将其整合到您的答案中。

短：工作但超重（800kb！）。 https://jsfiddle.net/7fehe9ey/9/ 。用别的东西！

初始代码

/* **************************************************************** */
/* THIS WILL GO TO BUNDLE ***************************************** */
// Require minimongo
var minimongo = require('minimongo');
var LocalDb = minimongo.MemoryDb;
// Create local db (in memory database with no backing)
db = new LocalDb();

/* **************************************************************** */
/* THIS WILL GO TO INDEX.HTML ************************************* */
// Add a collection to the database
db.addCollection("animals");
doc = { species: "dog", name: "Bingo" };
// Always use upsert for both inserts and modifies
db.animals.upsert(doc, function() {
  // Query dog (with no query options beyond a selector)
  db.animals.findOne({
    species: "dog"
  }, {}, function(res) {
    console.log("Dog's name is: " + res.name);
  });
});

捆绑

npm install minimongo underscore async
npm install -g browserify
echo "var minimongo=require('minimongo');var LocalDb=minimongo.MemoryDb;db=new LocalDb();" > ./app.js
browserify ./app.js -o ./bundle.js

它会生成一个 800Kb 的 ./bundle.js 文件，该文件在 jsfiddle jsfiddle.net/7fehe9ey/8 中用作黑盒

HTML-JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MiniMongo</title>
    <!-- ======================================================= -->
    <!-- ======================================================= -->
    <script src="./js/bundle.js"></script><!--================== -->
    <!-- ======================================================= -->
    <!-- ======================================================= -->
  </head>
  <body>
</body>
    <script>
    // Require minimongo
    // var minimongo = require('minimongo');
    // var LocalDb = minimongo.MemoryDb;
    // Create local db (in memory database with no backing)
    // db = new LocalDb();
    // Add a collection to the database
    db.addCollection("animals");
    doc = { species: "Cat", name: "Cingo" };
    // Always use upsert for both inserts and modifies
    db.animals.upsert(doc, function() {
      // Query dog (with no query options beyond a selector)
      db.animals.findOne({
        species: "Cat"
      }, {}, function(res) {
        console.log("Cat's name is: " + res.name);
      });
    });

    </script>
</html>

控制台返回：

猫的名字是：Cingo