在浏览器中轻松实现CommonJS的`require` - 只需1kb，无需构建

最新推荐文章于 2025-04-02 14:53:00 发布

殷巧或

最新推荐文章于 2025-04-02 14:53:00 发布

阅读量883

点赞数 20

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00061/article/details/138599242

在浏览器中轻松实现CommonJS的`require` - 只需1kb，无需构建

require1k A minimal, and yet practically useful, CommonJS/Node.js `require` module loader for the browser in under 1000 bytes 项目地址: https://gitcode.com/gh_mirrors/re/require1k

这个神奇的小项目提供了一个在浏览器环境下运行的、功能完备且几乎实用的CommonJS/Node.jsrequire模块加载器，大小竟然不到1000字节。

功能亮点

同步的require模块加载
支持exports和module.exports对象
能在Chrome、Opera 15+、Firefox 36+以及Safari（IE待测试）中正常进行调试
兼容npm，通过搜索node_modules目录查找模块（见限制）
处理循环依赖
直接运行，无需构建你的JavaScript代码
尽管小巧，但API却相当丰富！

示例应用

简单示例
Marked Markdown解析器
React框架（难以置信！）

使用方法

在你的模块中，你可以像在Node环境中一样使用require函数、exports对象和module.exports对象。启动该要求系统有两种方式：

HTML中的`data-main`属性

<script src="require1k.min.js" data-main="./index"></script>

在页面加载时，require1k会寻找第一个带有data-main属性的<script>标签，然后根据HTML文件的位置异步加载并执行指定的模块。

全局`R`函数

<script>
R(function (require, module, exports) {
    var index = require("./index");
    exports.hello = "World!";
}, function (err, exports) {
    if (err) {
        console.error(err.statusText);
        return;
    }

    console.log(exports.hello)
});
</script>

R函数接受一个函数或模块ID以及可选的回调函数。如果提供了函数，它将加载所有依赖并执行。如果有错误，回调函数会接收到失败的XMLHttpRequest对象作为第一个参数。此外，它还会获取到函数的exports对象，这可能非常有用。

或者，你也可以提供一个模块ID和一个可选的回调函数来直接获取模块的导出对象。

限制条件

不读取package.json文件，因此忽略"main"属性。包内的模块需要通过完整路径请求，例如：var _ = require("underscore/underscore");
交叉包依赖通过逐级上溯URL路径找到，导致：
- 加载交叉包依赖较慢，因为请求是顺序进行的
- 控制台会出现404错误信息
未找到的交叉包依赖会导致栈溢出并停止脚本执行
如果数据已经可用，回调函数会被同步调用，释放Zalgo
不支持加载.json文件