ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

在 Brunch 中引入 Roy 语言支持:roy-brunch 插件安装、原理与编译验证指南

在 Brunch 中引入 Roy 语言支持:roy-brunch 插件安装、原理与编译验证指南 构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载roy-brunch 是 Brunch 生态中的一款编译器插件其唯一职责就是为 Brunch 项目添加 Roy 语言支持让应用代码中可以直接编写.roy文件并参与构建。本文以该插件在仓库中的 README 为骨架结合其 CoffeeScript 源码、编译产物、单元测试 与 Brunch 核心的插件加载/适配机制讲清三件事如何安装启用、插件内部如何把.roy文件编译为 JavaScript、以及如何在构建前后验证编译结果。roy-brunch 是什么根据 roy-brunch 的 README下称原文档该插件的定位一句话即可概括Adds Roy support to brunch.Roy 是一门带有静态类型注解、可编译为 JavaScript 的函数式语言。roy-brunch 让 Brunch 项目中的.roy源文件能够被识别、读取并编译为 JavaScript 后参与打包。从 package.json 可以看到它的运行时依赖只有roy: ~0.1.x一个main字段指向./lib/index——也就是说编译动作本身完全委托给roy包完成roy-brunch 只负责按照 Brunch 的插件规范把roy的编译能力接入构建流水线。从 CHANGELOG 看该插件最早于 2012 年 3 月发布 1.0.0之后陆续加入 Windows 支持、Node.js 0.8/0.9/0.10 支持并在 1.3.0 将依赖的 roy 升级到 0.1.5、改为发布前预编译prepublish阶段用coffee --bare从src/生成lib/。安装与启用三种方式原文档给出的安装方式有三种均可直接照做。方式一npm 安装推荐在 Brunch 应用的根目录执行npm install --save-dev roy-brunch使用--save-dev会把它写入package.json的devDependencies与 Brunch 的常规插件管理方式保持一致。方式二手动写入 package.json在应用项目的package.json中添加依赖条目{ devDependencies: { roy-brunch: x.y.z } }原文档特别提醒选择的插件版本号要与当前 Brunch 主版本的小版本号minor即 y对应。例如 Brunch 是1.y.z时应选用1.x.y的 roy-brunch 版本以保持插件 API 与 Brunch 内部接口的兼容。方式三使用 git 版本的插件如果你需要体验尚未发布到 npm 的最新改动可以把依赖指向 git 仓库{ devDependencies: { roy-brunch: gitssh://gitgithub.com:brunch/roy-brunch.git } }无论哪种方式安装完成后无需任何额外配置——Brunch 会自动发现并加载该插件原因见下文插件自动发现机制。插件自动发现机制为什么装完就能用roy-brunch 之所以装完即用是因为 Brunch 在加载插件时有一套约定式发现规则实现在 lib/utils/plugins.js读取应用根目录package.json路径由config.paths.packageConfig决定中的所有 dependencies 与 devDependencies只保留名称中包含brunch字样的依赖作为候选插件逐个require候选包并检查其导出类的原型上是否有brunchPlugin标志对应Plugin.prototype.brunchPlugin满足条件才实例化并注册实例化时会把整个 Brunchconfig对象作为构造参数传入即new Plugin(config)。对照 roy-brunch 的源码其导出类恰好满足第 3 步的判定条件module.exports class RoyCompiler brunchPlugin: yes type: javascript extension: roybrunchPlugin: yes就是让 Brunch 认定这是一个插件的关键标志。同理若插件加载失败如依赖未安装Brunch 会抛出RUN_NPM_INSTALL错误提示你执行npm install。插件核心实现解读compile 做了什么roy-brunch 的编译逻辑非常薄全部收敛在一个compile方法上。以 CoffeeScript 源码 src/index.coffee 为准compile: (data, path, callback) - try result (roy.compile data).output catch err error err finally callback error, result它接收三个参数data源文件内容、path源文件路径、callbackNode.js 风格回调。核心动作只有一行——(roy.compile data).output即调用roy包的compile函数得到编译结果对象取出其中的.output字段作为编译产物。出错时例如 Roy 语法错误则捕获异常并通过回调的error参数回传符合错误优先的回调约定。再看由 CoffeeScript 编译生成的 lib/index.js语义完全一致RoyCompiler.prototype.compile function(data, path, callback) { var err, error, result; try { return result (roy.compile(data)).output; } catch (_error) { err _error; return error err; } finally { callback(error, result); } };插件声明的另外两个属性也至关重要type: javascript告诉 Brunch 该插件的输出是 JavaScript 类型编译产物可进入 JS 打包管线与javascript-brunch等 JS 编译器的产物同链路处理extension: roy告诉 Brunch 该插件负责匹配.roy后缀的源文件。在 Brunch 当前的插件适配层 lib/utils/plugin-adapter.js 中extension会被进一步转换为正则匹配规则extToRegExp会把roy规范化为.roy并生成/\.roy$/i这样的正则只有命中该正则的源文件才会交给此插件编译。这也是无需配置即可生效的另一半原因。旧式回调 API 与插件适配器的兼容细心的读者会发现roy-brunch 的compile(data, path, callback)是典型的旧式三参数回调 API而现代 Brunch 插件通常写成compile(file)返回 Promise。这一差异由 Brunch 的插件适配器在加载时自动消化。查看 lib/utils/plugin-adapter.js 中promisify的分支逻辑switch (fn.length) { case 1: // Modern API: fn(file) Promise return fn; case 2: // Legacy API: fn(data, path) Promise ... case 3: // Legacy API: fn(data, path, callback) void const promisified microPromisify(fn); return file promisified(file.data, file.path); }它根据函数声明的形参数自动识别 API 形态compile声明了 3 个形参即被判定为旧式回调 API通过util.promisify包装成接收file、返回 Promise的新式接口并交给wrapStrings统一规范返回结构。因此 roy-brunch 虽然诞生于 2012 年但只要形参数约定不变就能被当前 Brunch 的适配层无缝兼容——这也解释了原文档按 Brunch 小版本号选择插件版本建议的底层原因。实战验证编写 .roy 文件并观察编译产物在应用中编写 .roy 源码在 Brunch 项目的app/目录下创建.roy文件即可被自动编译例如app/application.roylet a:Number 1Number是 Roy 的静态类型注解表示变量a的类型为数值。roy-brunch 不会做任何类型检查它只是把源码原样交给roy.compile翻译成 JavaScript。用单元测试验证编译行为仓库自带的测试 test/plugin_test.js 直接给出了可复现的编译预期it(should compile and produce valid result, function(done) { var content let a:Number 1; var expected (function() {\nvar a 1;\n})();\n; plugin.compile(content, file.coffee, function(error, data) { expect(error).not.to.be.ok; expect(data).to.equal(expected) done(); }); });这个用例揭示了两个要点编译产物形态let a:Number 1会被翻译成一段以 IIFE立即执行函数表达式包裹的var a 1;输出即 Roy 编译器的典型输出风格调用约定编译通过callback(error, data)返回error为空表示成功data为最终 JS 代码字符串。在仓库内运行测试roy-brunch 的 package.json 中声明了测试命令npm test内部等价于mocha --require test/common.js其中 test/common.js 负责注入全局expectchai和Plugin指向编译产物../lib。若要观察真实构建效果则需在 Brunch 应用内执行brunch build之后到public/目录查看打包产物中对应片段的 JS 代码。附带的 Backbone 生成器骨架源码中还存在一个值得注意的细节——generators属性generators: backbone: do - types {} [collection, model, router, view].forEach (type) - parent formatClassName type types[type] (fileName) - className formatClassName fileName # This is temporary, until royll release module system. types它预置了 backbone 生态的collection / model / router / view四类代码生成器占位配合capitalize与formatClassName两个工具函数例如把twitter_users规范化为TwitterUsers可在未来用于生成 Backbone 风格骨架代码。源码注释明确标注这是临时实现等待 Roy 发布模块系统因此生成器目前仅返回空字符串不产生实际代码——从源码结构看这部分属于预留的扩展点当前版本的核心能力仍是compile。版本演进与兼容性注意事项结合 CHANGELOG.md可整理出该插件的关键版本脉络版本时间要点1.0.02012-03首次发布1.1.02012-04增加 Windows 支持1.3.02012-06roy 升级到 0.1.5支持 Node.js 0.8/0.9npm 发布前预编译1.5.02013-01改进安装流程1.5.12013-03支持 Node.js 0.10移除 coffee-script 直接依赖使用时的兼容性提醒基于仓库实际内容插件运行时依赖roy ~0.1.x属于非常早期的 Roy 编译器版本仅支持当时 Roy 的语法子集compile采用三参数回调 API依赖 Brunch 插件适配器 plugin-adapter.js 的兼容逻辑因此应尽量选择与所用 Brunch 小版本对应的插件版本生成器功能尚未完成不应依赖generators.backbone产出实际代码。Licenseroy-brunch 采用 MIT License版权归 Paul Miller2012–2017所有许可全文可在 roy-brunch README 末尾查看。MIT 许可允许自由使用、复制、修改与再分发前提是保留上述版权声明与许可声明。小结roy-brunch 是一个薄而标准的 Brunch 编译器插件通过brunchPlugin、type、extension三个声明被 Brunch 自动发现并绑定到.roy文件通过一个compile(data, path, callback)方法把 Roy 源码交给底层roy包编译为 JavaScript再由 Brunch 的插件适配器统一适配成现代接口。读懂它你既能快速在自己的 Brunch 项目中引入 Roy 语言支持也能以此为一个最小范例理解 Brunch 插件加载、匹配与编译调用的完整链路。赞分享构建工具前端【免费下载链接】brunch Web applications made easy. Since 2011.项目地址https://gitcode.com/gh_mirrors/br/brunch点击查看免费下载相关推荐在 Brunch 项目中集成 Nunjucks 模板引擎nunjucks-brunch 插件安装、配置与编译原理在 Brunch 项目中集成 Nunjucks 模板引擎nunjucks brunch 插件安装、配置与编译原理 本篇文章以 Brunch 仓库中 nunju构建工具前端深入 roy-brunchBrunch 生态中 Roy 语言编译插件的版本演进与技术实现深入 roy brunchBrunch 生态中 Roy 语言编译插件的版本演进与技术实现 roy brunch 是 Brunch 构建工具生态中的一款编译器插构建工具前端css-brunch 插件完全指南为 Brunch 增加 CSS 与 CSS Modules 编译支持css brunch 插件完全指南为 Brunch 增加 CSS 与 CSS Modules 编译支持 本指南以仓库内 css brunch/README.m构建工具前端上一篇探索optparse-applicative强大的命令行选项解析库下一篇终极键盘打字练习指南如何通过打字提升英语单词记忆创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表