代码之家 › 专栏 › 技术社区 › Hugo LOPEZ

如何制作minimongo。js在浏览器中工作?

minimongo meteor

Hugo LOPEZ · 技术社区 · 8 年前

这个 github presentation of minimongo 声明如下

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

还有一个 minimongo-standalone 提供minimongo。min.js,其中说明:

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

对于浏览器

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

我以前用过d3。js的打包方式使。js文件在web浏览器中作为lib工作,在节点上作为npm包工作。

所以我在本地尝试了我新下载的 minimongo.js 使用创建经典网页 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)

我遗漏了什么或误解了什么? 如果可能,如何使其工作?

2 回复 | 直到 8 年前

coagmano 8 年前

几件事

1、依赖关系

如果您阅读 README.MD 属于 minimongo-standalone ,它说

要求

下划线,异步

因此,在 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模块加载框架,否则不存在。

我还没查过 异步 或 underscore ,但如果没有模块系统,大多数库将退回到浏览器中的普通全局变量。

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

3. `minimongo独立` 有一个非常不同的API `minimongo公司`

令人沮丧的一点; minimongo独立 实现 Meteor 周围的包装 minimongo公司 ,然后再次重命名。意味着任何 minimongo公司 或 流星 代码不能直接转让。

好的方面是,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);

Hugo LOPEZ 8 年前

@弗雷德·斯塔克:我们鼓励您将此纳入您的答案中。

短:可以工作,但超重(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/捆js文件,在jsfiddle jsfiddle中用作黑盒。净额/2008年2月7日

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