Yabble入门 – 浏览器端的CommonJS模块加载
有人熟悉Yabble或其他浏览器端CommonJS装载机?
我正在尝试Node.js,并非常想创build可在服务器端和客户端交换使用的Javascript模块。 这可能最终会比“因为它是实用而有用”的东西更像是“因为它很棒”而已。
因此,我基本上试图让CommonJS require()
方法在浏览器端工作,这正是Yabble应该做的。 不过,我真的不知道从哪里开始。 除了Yabble的Github自述文件外,我似乎找不到任何文档,这没什么帮助。
基本上我所做的是把它放在一个HTML页面中
<script src="yabble.js"></script> <!-- Uses require --> <script> require.setModuleRoot('http://localhost:8030/') my_module = require('my_module') </script>
但是,无论何时我调用require()
函数,我Synchronous require() is not supported.
抛出exception。
有人可以帮我开始吗? 在哪里我应该加载yabble.js
我应该打电话要求? 有没有一种特殊的方式来运行我的Javascript模块?
当加载需要在浏览器中使用require()
函数的JavaScript代码时,该代码的入口点必须是require.run()
函数。
好,好:
<script src="yabble.js"></script> <script> require.setModuleRoot('http://localhost:8030/') require.run('my_module') // <-- Uses require() function somewhere </script>
例如,坏(将得到Synchronous require() is not supported
错误):
<script src="yabble.js"></script> <script src="http://localhost:8030/my_module.js"></script> <!-- <== Use's require function somewhere -->
仅供参考,Yabble如何做到这一点非常好。 它实际上会静态分析你的Javascript源代码,我想基本上只是使用一个正则expression式来查找require()
方法,然后尝试从服务器中提取该.js
脚本,然后对其进行相同的静态分析.js
脚本,并继续。
这可能会特别令人困惑,因为即使控制逻辑意味着程序stream程永远不会到达require()
函数,它实际上也会加载这些.js
脚本。 例如,如果你有…
if (False) { require('some_module'); }
… Yabble 仍然会加载这个模块。
在浏览器中同步加载模块是有问题的。 构造如下:
var x = require('something_remote.js')
意味着浏览器将停止你的代码(即块),去获取远程文件,parsing它,然后返回给你导出。 但是,这并不与单线程浏览器环境 – 我们将停止主要的JavaScript线程(并因此为用户的页面交互性)在networking的性能。 所以浏览器已经发展到了这种情况下,以支持自己的时间表的asynchronous加载。 这里有一些很好的讨论:
一个可能在这里工作的模式是require()实现同步阻塞,通过XHR获取文件然后将其转发,但似乎针对基于asynchronous文件的加载的所有浏览器支持/基础结构运行。 另外,我很好奇浏览器安全的跨域原语会带来什么样的影响。
所以为了适应浏览器的asynchronous加载模型,我们需要使用如下的callback机制:
require("something.js", function () { // called later, after something.js has loaded! })
看起来像RequireJS是这样做的:
http://requirejs.org/docs/start.html
也许给一个镜头?
像NodeJS等JavaScript环境 – 通过从磁盘加载“本地”模块而不是外部networking主机 – 可以执行同步加载。
我会非常感谢来自JS专家的任何更正:-)