如何使 minimongo.js 在浏览器中工作？
How to make minimongo.js works in browser?
github presentation of minimongo表示为
Client-side mongo database with server sync over http
还有一个 minimongo-standalone 提供了一个 minimongo.min.js 声明：
You could also just download the minimongo.min.js, place it on your
server, and reference it in your source.
For browsers
<script src="/js/minimongo.min.js"></script>
我以前使用过 d3.js，它的打包方式使 .js 文件既可以在网络浏览器中作为 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>
它 returns 错误 :
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)
我错过了什么或误解了什么？
如果可能，如何让它工作？
几件事
1。依赖项
如果你阅读 minimongo-standalone 的 README.MD，它说
Requirements
underscore, async
因此您需要在页面上的 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);
@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>
Returns
控制台returns：
Cat's name is: Cingo
github presentation of minimongo表示为
Client-side mongo database with server sync over http
还有一个 minimongo-standalone 提供了一个 minimongo.min.js 声明：
You could also just download the minimongo.min.js, place it on your server, and reference it in your source.
For browsers
<script src="/js/minimongo.min.js"></script>
我以前使用过 d3.js，它的打包方式使 .js 文件既可以在网络浏览器中作为 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>
它 returns 错误 :
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)
我错过了什么或误解了什么？ 如果可能，如何让它工作？
几件事
1。依赖项
如果你阅读 minimongo-standalone 的 README.MD，它说
Requirements
underscore, async
因此您需要在页面上的 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);
@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>
Returns
控制台returns：
Cat's name is: Cingo