在 Typescript/Javascript 里使用宏

2021-09-15 19:53:56 +08:00
 shangyes

😂 推广一下这段时间写的一个 vite 插件,可以快速地在基于 vite 的 Typescript/Javascript 项目中编写、使用词法宏,并且宏对于最终用户是透明的,可以完全视作一个普通函数使用,有类型,无魔法。 支持宏之间的嵌套,支持宏使用另一个宏,支持宏使用 external helper 来减少展开后的代码量。

与其他成熟方案(主要是 babel-plugin-macros)的对比: https://github.com/viteland/vite-plugin-macro#-why-vite-plugin-macro

Github: https://github.com/viteland/vite-plugin-macro

文档: https://github.com/viteland/vite-plugin-macro#-documentation

NPM: https://www.npmjs.com/package/vite-plugin-macro

Demo: 基本使用 | vue 3 的 ref sugar 结合 jsx 的实现

贴两个来自 fixtures 的截图哈,可以快速看下嵌套宏的 case:

展开为

个人已经基于这个插件在某项目中编写了几十个宏,举三个可以贴项目截图的栗子。

约定式路由:

身处约定式路由下的文件可以使用相对路径获得挂载后的绝对路径:

自动管理 i18n 资源与 namespace:


如果有老哥感兴趣的可以试试,碰到 bug 或者需求开 issue 反馈哈,虽然这个插件从项目中独立并且完善到现在已经快两个月,在我的项目中使用良好,但是还很 naive,在此谢过啦 🤗

1764 次点击
所在节点    前端开发
2 条回复
runze
2021-09-15 21:37:00 +08:00
很有意思,但是 babel-plugin-macros 都很难推广开,依赖 vite 的应用范围有点小。

可以用 https://github.com/unjs/unplugin 兼容其它打包工具嘛?
shangyes
2021-09-15 22:40:30 +08:00
@runze #1 其实在和 babel-plugin-macros 的对比里有提到一点是,利用模块依赖图使得开发时宏能跟随外部依赖的变化而重展开,所以在构思出一个能兼容的各个构建工具链的方案前暂时不会往这方向写 feature 哈

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/802107

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX