Stitch 使用指南把 CommonJS 模块缝进浏览器的完整教程【免费下载链接】stitchStitch your CommonJS modules together for the browser项目地址: https://gitcode.com/gh_mirrors/sti/stitchStitch 是一个 Node.js 小工具解决一个问题你在 Node 里按 CommonJS 方式写模块浏览器却不认识 require。Stitch 能把整个模块目录缝合成一个可直接加载的 JS 文件开发测试与浏览器运行两不误。 Stitch 如何快速启动三步跑通克隆仓库git clone https://gitcode.com/gh_mirrors/sti/stitch在项目目录执行npm install装好 async、underscore 运行时依赖与 coffee-script、nodeunit、eco 开发依赖。写一段脚本stitch.createPackage指定模块目录compile回调里把源码写盘。这段脚本就是最小可运行路径指向你的模块目录编译失败直接抛错成功则产出 package.js。var stitch require(stitch); var fs require(fs); var pkg stitch.createPackage({ paths: [lib] }); pkg.compile(function (err, source) { if (err) throw err; fs.writeFile(package.js, source, function (err) { if (err) throw err; console.log(Compiled package.js); }); });生成的 package.js 自带 require 与 define浏览器引入即可按模块名取用代码。想验证环境直接cake test跑 nodeunit 测试。 Stitch 项目目录与职责一览路径作用src/stitch.coffeeCoffeeScript 源码Package 类、模块收集与编译逻辑都在这里lib/stitch.js编译产物require(stitch) 实际加载的入口test/test_stitch.coffeenodeunit 测试覆盖目录遍历、文件编译、打包输出test/fixtures/多组测试数据default、alternate、eco、link 等场景Cakefilebuild 任务把 src 编译到 libtest 任务跑测试package.json声明 async、underscore 依赖与开发依赖 Stitch 如何生成浏览器可用的单文件包createPackage(config)是全部功能的核心接收配置对象后返回 Package 实例输出有两条路写文件package.compile(callback)异步读完依赖与模块目录拼出一段 IIFE 源码交给回调你只管写盘。直接服务package.createServer()返回 Express 中间件请求/application.js这类地址时实时编译、返回 200 的 JS编译出错回 500 并带错误栈。核心逻辑在 src/stitch.coffeepaths 里每个可编译文件被转成function(exports, require, module){...}再包进一个带模块缓存的加载器这就是缝合的由来。⚙️ Stitch 配置项如何按环境生效配置靠 createPackage 的参数按环境传入常用项identifier默认require注入浏览器的模块函数名paths默认[lib]可传多个目录并递归收集dependencies第三方库文件如 zepto.js、underscore.js按顺序拼在模块之前compilersjs 内置装了 coffee-script、eco 会自动扩展对应扩展名cache默认 true按 mtime 缓存编译结果二次构建更快 实用场景按环境切换缓存与 identifier线上页面已有同名 require 变量时换个 identifier 就能避免冲突本地调试想保证每次都重新编译就把 cache 关掉。这段代码给出开发、生产两套配置的写法var stitch require(stitch); var dev stitch.createPackage({ identifier: require, paths: [lib], cache: true }); var prod stitch.createPackage({ identifier: $, paths: [lib], cache: false });下一步可以往哪走试试给 compilers 加一个自定义编译函数把模板类文件也纳入打包或直接用 createServer 接入 Express 做实时构建。【免费下载链接】stitchStitch your CommonJS modules together for the browser项目地址: https://gitcode.com/gh_mirrors/sti/stitch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考