首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使minimongo.js在浏览器中工作?

如何使minimongo.js在浏览器中工作?
EN

Stack Overflow用户
提问于 2018-02-21 16:33:27
回答 2查看 1.7K关注 0票数 4

github minimongo介绍声明它为

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

还有一个最小-独立提供了一个minimongo.min.js,它声明:

您还可以下载minimongo.min.js,将其放在服务器上,并在源代码中引用它。 适用于浏览器 <script src="/js/minimongo.min.js"></script>

我以前使用了d3.js,它是以某种方式打包的,因此.js文件既可以在web浏览器中作为库工作,也可以在节点上作为npm包工作。

因此,我尝试在本地使用我新下载的minimongo.js,用indexeddb在Chrome中构建一个经典的网页,就像使用D3.js一样。它给出了类似的内容(小提琴):

代码语言:javascript
复制
<!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>

它返回错误:

代码语言:javascript
复制
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)

,我错过了什么或者误解了什么?如果可能的话,如何使它工作?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-22 01:37:45

几件事

1.依赖关系

如果你读了“README.MD of minimongo-standalone”,上面写着

要求 下划线,异步

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

代码语言:javascript
复制
<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模块加载框架。

我还没有检查过asyncunderscore,但是如果没有模块系统,大多数库都会退回到浏览器中的普通全局。

在包含三个脚本标记之后,您应该能够在全球范围内访问minimongo独立的导出符号。

3. minimongo-standalone的API与minimongo有很大不同。

令人沮丧的一点是,minimongo-standalone实现了围绕minimongoMeteor包装器,然后重新命名它们。意味着任何minimongoMeteor代码都不能直接传输。

好的地方是API非常简单。您的示例的等效代码将是

代码语言:javascript
复制
// 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);
票数 4
EN

Stack Overflow用户

发布于 2018-02-22 16:29:40

@Fred_Stark :我们鼓励您将这一点集成到您的回答中。

短:工作,但超级重(800 but!)https://jsfiddle.net/7fehe9ey/9/。再用点别的!

初始码

代码语言:javascript
复制
/* **************************************************************** */
/* 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);
  });
});

捆起来

代码语言:javascript
复制
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

它将生成一个800 It ./bundle.js文件,该文件在jsfiddle jsfiddle.net/7fehe9ey/8中充当黑匣子。

HTML-JS

代码语言:javascript
复制
<!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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48910939

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档