如何使minimongo.js在浏览器中工作? [英] How to make minimongo.js works in browser?
问题描述
带有服务器通过http同步的客户端mongo数据库
Client-side mongo database with server sync over http
还有一个 minimongo-standalone 提供了一个minimongo.min.js，其中指出:
There is a also a minimongo-standalone providing a minimongo.min.js which states :
您也可以下载minimongo.min.js，将其放在您的 服务器，并在您的源代码中引用它.
You could also just download the minimongo.min.js, place it on your server, and reference it in your source.
对于浏览器
<script src="/js/minimongo.min.js"></script>
我以前使用的d3.js打包方式使.js文件既可以作为lib在Web浏览器中工作，也可以作为npm包在节点上工作.
I previously used d3.js which is packaged in a way so the .js file works both in web-browsers as a lib and on nodes as a npm packages.
因此，我像使用D3.js一样，在本地尝试使用新下载的minimongo.js在Chrome中使用indexeddb构建经典网页.它给出了类似的内容( jsfiddle ):
So I tried locally with my newly downloaded minimongo.js to build a classic webpage with indexeddb in Chrome as I would do with D3.js. It gives something like that (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)
我缺少或误解了什么? 如果可能的话如何使其工作?
What am I missing or misunderstanding ? How to make it work if possible ?
推荐答案
几件事
如果您阅读minimongo-standalone的README.MD，它会说
要求
下划线，异步
Requirements
underscore, async
因此，您需要在页面上的minimongo脚本标记之前包含这两个库.
So you will need to include both those libraries on your page before the minimongo script tag.
<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)，因此为不同的目标提供了单独的文件.
It's important to mention that you need to get the browser versions of these libraries. It seems that async don't use a Universal Module Definition (UMD) and so provide separate files for different targets.
除非您使用browserify或其他commonJS模块加载框架，否则功能require不存在.
The function require doesn't exist unless you are using browserify or another commonJS module loading framework.
我没有检查async或underscore，但是如果没有模块系统，大多数库将在浏览器中回退到普通的全局变量.
I haven't checked async or underscore, but most libraries will fallback to ordinary globals in the browser if a module system isn't present.
在包含三个脚本标签之后，您应该能够全局访问minimongo-standalone的导出符号
After including the three script tags you should be able to access minimongo-standalone's exported symbols globally
令人沮丧的一点； minimongo-standalone在minimongo周围实现Meteor包装器，然后再次重命名它们.
这意味着任何minimongo或Meteor代码都不能直接转让.
A frustrating point; minimongo-standalone implements the Meteor wrappers around minimongo, and then renames them again.
Meaning that any minimongo or Meteor code is not directly transferable.
好的方面是，API大大简化了.您的示例的等效代码为
The good part is that the API is a great deal simpler. The equivalent code for your example would be
// 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);
这篇关于如何使minimongo.js在浏览器中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
