Yabble入门 - 浏览器端CommonJS模块加载

Question

有人熟悉Yabble或其他浏览器端的CommonJS加载器吗？

我正在尝试使用Node.js,并且非常希望创建可以在服务器端和客户端互换使用的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.抛出异常.

有人可以帮助我开始吗？我应该在哪里加载yabble.js我应该要求的地方？有没有一种特殊的方式来运行我的Javascript模块？

Answer 1

当加载需要将该require()函数用于浏览器的Javascript代码时,该代码的入口点必须是该require.run()函数.

好的:好的:

<script src="yabble.js"></script>

<script>
    require.setModuleRoot('http://localhost:8030/')
    require.run('my_module') // <-- Uses require() function somewhere
</script>

例如,Bad(会得到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源代码,我认为基本上只是使用正则表达式来查找该require()方法,然后尝试.js从服务器中提取该脚本,然后它对该.js脚本执行相同的静态分析,并且依次.

这可能会特别令人困惑,因为它实际上会加载这些.js脚本,即使控制逻辑意味着程序流永远不会到达require()函数.例如,如果你有...

if (False) { require('some_module'); }

... Yabble 仍将加载此模块.