<div class="markdown-text"><p><a href="https://registry.npmmirror.com">https://registry.npmmirror.com</a> npmmirror 镜像站在2013年12月开始就使用基于 koa 的 <a href="https://github.com/cnpm/cnpmjs.org">https://github.com/cnpm/cnpmjs.org</a> 私有 npm 应用搭建，这些年 node 应用框架在快速换代升级，连我们自己造的 egg 都要升级到 TypeScript 了，所以在 2021 年我们启动了 <a href="http://cnpmjs.org">cnpmjs.org</a> 的技术升级重构，基于 egg 的 TypeScript 模式重新实现 <a href="https://github.com/cnpm/cnpmcore">https://github.com/cnpm/cnpmcore</a> 。</p>
<p>npm registry 的接口是 100% 实现迁移，然后在数据同步上通过数据库实现足够简单的任务系统，已经在 2022年1月30日完全老数据迁移。
非常感谢阿里云这么多年来的对中国 npm 镜像云服务器的开源赞助，只能靠仅有的广告位和每年的感谢帖子来回报这份天价的云资源账单。这一次重构之后，我们验证下来至少可以节省一半的云服务器资源，也算是让阿里云的开源赞助可以减轻一些成本负担。</p>
<p>当然 cnpmcore 不仅仅是为了技术升级，我们的核心新能力会跟随 npmfs 黑科技在 2022 年发布出来，到时候 npm install 的安装速度会在 cli 侧和 registry 侧同时发力，让 npm 模块安装速度在可预见的未来达到秒级。</p>
<p>PS：预估你在此期间遇到包数据同步和丢失问题，请先手动同步一次，如果还是没有，请回帖反馈给我们。</p>
</div>

npmmirror 镜像站升级公告

<div class="markdown-text"><p>很多人觉得Node.js没有往年那么火了，事实上不是这样的，Node.js社区健康稳步的发展中，主要是从性能好向好用转变，在易用性上有很大提升，从Node.js源码更新的内容看，大抵如此。Node.js Diagnostics Working Group是近二年Node.js社区的重点工作组，Node.js 14版本之后的大部分功能特性都是这个工作组推动的。早在2015年，有2个跟踪工作组tracing WG 和事后分析工作组 postmortem WG，在2017年合并到Diagnostics WG。核心产出是async_hooks, profiling, tracing, dump debug, report等，都是在易用性和好用性上做提升。让每个Node.js开发者更低门槛的提升Node.js应用的开发体验。</p>
<p>秦粤老师在《浮华过后的Node.js》分享里，也表达了同样观点，他用的是产品化平缓期，也是健康稳步的发展的意思。</p>
<p><img src="//static.cnodejs.org/FqRK1Uehhaz3lFDF3oHeL97Z7zYm" alt="image.png"></p>
<p>社区方面，Web框架已经没有多少空间，以特性取胜的框架，应该不会很多，比较期待Egg3。像fastify这种，修改Node.js机制，在性能领域深耕的框架，目前看是比较有作为的。pnpm是有创新的，但代码是有点可读性不太好。我更加喜欢rushstack对menorepo的改进，大规模编程范式还需要探索。除了去年提的midway-hooks，easy-monitor，看起来remix和morden算新，但还没有超出之前的范畴。</p>
<p>下面结合《<a href="https://nodersurvey.github.io/reporters">Node.js开发者2021报告</a>》内容，我们详细解读一下Node.js 2021年的情况。这份解读是根据冰森&amp;狼叔直播内容整理的，要点如下。
​</p>
<h3>1）开发框架变化较大，造轮子变少，TS变多，使用企业级框架变多</h3>
<p>​</p>
<p>去年express占比还非常高，今年企业级框架变多，尤其是大而全的框架更受欢迎。</p>
<p><img src="//static.cnodejs.org/Fl-QFKuag-dvFGbx7Q45WabMH5d8" alt="image.png"></p>
<p>Egg在国内普及率很高，而Midway和Nest增长较快，其实和TS普及有一定关系。
​
<img src="//static.cnodejs.org/FvoNa6PGZJN1ZaqZlmXZuRnNUI5_" alt="image.png">
​</p>
<h3>2）版本更新变化较大，从Node 12升级到Node 14，升级比较积极</h3>
<p>​</p>
<p>去年Node.js主要是使用Node 12，2021年Node 14占比将近一半，更新还是较快的。</p>
<p><img src="//static.cnodejs.org/FpQcq4qzd9rl-R-VEXzLZAiVMPaa" alt="image.png">
​</p>
<h3>3）吐槽变多，意味着用的人变多，趋于成熟</h3>
<p>​</p>
<p>C++之父Bjarne Stroustrup说过：世界上只有两种编程语言,一种是整天被人骂的,还有一种是没人用的。
​</p>
<p>大家对Node.js吐槽变多，实际上是在应用场景上使用较多，不再是针对于某些特性而进行吹捧。回归理性，在真实应用场景上，分布广泛，核心围绕API和BFF层，CLI&amp;工具。
​
<img src="//static.cnodejs.org/FkEeeI7hvEdSMIyUNaKxnQx9pzcJ" alt="image.png"></p>
<h3>4）出圈：年龄分布较去年比变大，使用工种也变得比较丰富。</h3>
<p>除了应用场景上，分布广泛外，非前端意外的开发者相关角色也有很大比例的提升，比如架构师，技术总监，项目经理等都一定程度上使用Node.js。可以说Node.js走出了前端圈，面向更大群体提供服务。另外受访者的年龄分布也变大了，这和出圈是有直接关系的。
​
<img src="//static.cnodejs.org/FsnHAf1Map8P8i4bEAn89POQf_8E" alt="image.png"></p>
<h3>5）使用困惑：性能优化，内存泄漏以及npm依赖</h3>
<p>​</p>
<p>以往对Node.js困惑最多的是异步流程控制，随着async/await的普及，这个问题已经慢慢在弱化。随着开发者使用Node.js深度增加，对性能优化，内存泄漏更为关注，这也是比较容易理解的。</p>
<p><img src="//static.cnodejs.org/FkPiwL5U9kbNq1vUE1J8AQKn54z4" alt="image.png"></p>
<p>​</p>
<h3>6）未来：从业经验越高则越关注性能和 Serverless</h3>
<p>​</p>
<p>关注性能比较容易理解，关注Serverless最主要是的原因是Serverless可以做到低运维甚至是0运维。运维作为Node.js开发者必备技能，Serverless的出现使得很多非专业Node.js也能轻松搞定Node.js各种服务端场景。</p>
<p><img src="//static.cnodejs.org/FjZSOZ1uO-Tqh8yTL2E4CtvMUFbN" alt="image.png"></p>
<p><img src="//static.cnodejs.org/FshPaWkMvnMKMxJckqf0L-M5OYe1" alt="image.png"></p>
<h3>推荐阅读</h3>
<ul>
<li>天猪《EggJS 的前世今生与未来》，比较期待Egg3，easy-monitor作者一君也加入Egg3项目组了 <a href="https://www.yuque.com/atian25/blog/egg-1to2to3">https://www.yuque.com/atian25/blog/egg-1to2to3</a></li>
<li>秦粤 《浮华过后的Node.js》链接稍后给出来</li>
</ul>
<h3>参考</h3>
<ul>
<li>原文  <a href="https://cnodejs.org/topic/6108bbc2a5d29d175c2d4208">https://cnodejs.org/topic/6108bbc2a5d29d175c2d4208</a></li>
<li>报告 <a href="https://nodersurvey.github.io/reporters">https://nodersurvey.github.io/reporters</a></li>
</ul>
<p>如果大家想参与讨论，欢迎回复</p>
</div>

Node.js 2021年开发者报告解读：健康稳步的发展中

<div class="markdown-text"><p>RT.</p>
<p>请大家遵守法律法规，勿发布不合规内容。</p>
<ul>
<li>2021/11/26：针对部分打擦边球的推广行为（如各种云服务商的推广链接），将会对账户做出屏蔽处理。</li>
<li>2021/11/26：针对机器人频繁发布广告与违规内容，新增发帖限制如下：新用户五天内不允许发帖（不影响回帖）。</li>
</ul>
</div>

【2021/11/26】请大家遵纪守法，勿发布不合规内容

<div class="markdown-text"><h2>概述</h2>
<p>Node.js 刚刚发布了 18.0.0 版本，内置了 <code>fetch</code>、<code>node:test</code> 等标准模块。</p>
<p><strong>一句话点评：std lib 在标准化，user lib 在精细化。</strong></p>
<blockquote>
<p>原文地址：<a href="https://zhuanlan.zhihu.com/p/502951532">EggJS 知乎专栏</a>，求点赞。</p>
</blockquote>
<hr>
<h2>如何快速体验</h2>
<p>推荐用 <a href="https://github.com/Schniz/fnm">fnm</a>，<a href="https://github.com/jasongin/nvs">nvs</a>，<a href="https://github.com/nvm-sh/nvm">nvm</a> 等 Node.js 版本管理器。</p>
<pre class="prettyprint language-bash"><code>$ fnm install 18
Installing Node v18.0.0 (arm64)

$ fnm use 18
Using Node v18.0.0

$ node -v
v18.0.0
</code></pre><p>需要注意的是，该版本不是 LTS 版本，请勿在生产环境使用，需要等到 2022-10-25 才会成为 LTS 版本。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/012135a1091b40ef807c8b6e3919bcce~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png" title="https://github.com/nodejs/Release"></p>
<h2>Looking to the future</h2>
<blockquote>
<p>The project is also continuing its ‘Next 10’ effort.  The goal of this effort is to reflect on what led to success in the first 10 years of Node.js and set the direction for success in the next 10.</p>
</blockquote>
<p>Node.js 官方启动了 <a href="https://github.com/nodejs/next-10">next-10</a> 工作，并讨论出了<a href="https://github.com/nodejs/node/blob/master/doc/contributing/technical-priorities.md">未来重要的几件事</a>：</p>
<ul>
<li>现代化的 HTTP</li>
<li>友好的类型支持</li>
<li>对初学者更友好的渐进式文档</li>
<li>对 ECMAScript 规范的支持和及时跟进</li>
<li>可观测性，包括 logging/metrics/tracing，以及 APM 等</li>
<li>更好的多线程支持</li>
<li>支持打包为单文件的分发方式</li>
</ul>
<p>譬如前面说的 Fetch 就和 Modern HTTP 的会议讨论有关，<a href="https://github.com/nodejs/next-10/blob/main/meetings/summit-jan-2022.md">相关纪要</a>。</p>
<blockquote>
<p>6 月份的 OpenJS World 会议中将分享 ESM 和 Observability 进展，可以关注下相关动态。</p>
</blockquote>
<hr>
<h2>Fetch API</h2>
<p>前端同学应该都很熟悉<code>fetch()</code>这个 API，它提供了标准的网络请求能力，取代了远古的  XMLHttpRequest 。</p>
<p>反观 Node.js 侧，官方提供的 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/http.html#httprequesturl-options-callback">http.request()</a>，太底层太基础了，用起来往往需要大量的封装。譬如 302 后自动跳转、文件上传、响应结果解析等等。</p>
<p>因此在 Node.js 社区有非常多的上层请求库封装：</p>
<ul>
<li>曾经广受社区欢迎的 request 库去年<a href="https://github.com/request/request/issues/3142">宣布停止维护</a>后，也引起了社区比较大的混乱。。</li>
<li>我们 Egg 内置的是 <a href="https://www.npmjs.com/package/urllib">urllib</a>，沉淀了阿里多年在网络请求上踩的坑，足够稳定，不过代码也有点久远了。</li>
<li>更多参见 <a href="https://github.com/request/request/issues/3143">Alternative libraries to request</a> 以及 <a href="https://zhuanlan.zhihu.com/p/415361629">《天猪：那些你应该说再见的 npm 祖传老库》</a>。</li>
</ul>
<p><strong>去年 Node.js 官方推出了 <strong><a href="https://undici.nodejs.org/"><strong>undici</strong></a></strong>，一个非常现代化的库，具备优越的性能，良好的扩展性，内置的 mock 等能力，集大成者。</strong></p>
<blockquote>
<p>undici 的命名也很有趣：A HTTP/1.1 client → 11 → Eleven → Undici，即意大利语的 11。</p>
</blockquote>
<p>从而 <strong>Node.js 终于内置了新的请求库</strong>，它遵循 <a href="https://fetch.spec.whatwg.org/">Fetch 规范</a>，底层就是基于 undici 来实现的。</p>
<pre class="prettyprint language-javascript"><code>const res = await fetch(&#x27;https:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;documentation.json&#x27;);
if (res.ok) {
  const data = await res.json();
  console.log(data);
}
</code></pre><p>就这么简单，比 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/http.html#httprequesturl-options-callback">http.request()</a> 那一坨 callback-style 代码简洁多了，平时写个脚本啥的，不用再引入额外的类库了。</p>
<p>全局增加了 fetch, FormData, Headers, Request, Response 这几个 API，以及 Web Streams API。</p>
<p>目前还处于默认开启的实验性特性阶段，文档在 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/globals.html#fetch">Globals</a> 章节，近乎没有，有需要直接看 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">MDN 文档</a> 即可。</p>
<p>可能是为了遵循规范， undici 的很多能力如 Mock，Proxy，Pool 等都没有提供出来。</p>
<hr>
<h2>Test Runner</h2>
<p>单元测试很重要，很多新兴的编程语言都是会内置对应的能力，但前端这块一直都是由社区来实现，前端同学耳熟能详的 Test Runner 有 <a href="https://mochajs.org/">Mocha</a>、<a href="https://jestjs.io/">Jest</a>。</p>
<pre class="prettyprint language-javascript"><code>&#x2F;&#x2F; mocha showcase
import assert from &#x27;assert&#x2F;strict&#x27;;

describe(&#x27;test&#x2F;index.test.js&#x27;, () =&gt; {
  it(&#x27;test1&#x27;, async () =&gt; {
    const res = await fetch(&#x27;https:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;documentation.json&#x27;);
    assert(res.ok);
  });
  
  it.skip(&#x27;skip some test&#x27;, () =&gt; {});
});
</code></pre><p>终于，Node.js 在 18.x 里官方支持了 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/test.html">Test 能力</a>：</p>
<pre class="prettyprint language-javascript"><code>import test from &#x27;node:test&#x27;;
import assert from &#x27;assert&#x2F;strict&#x27;;

&#x2F;&#x2F; 等价于 describe()
test(&#x27;asynchronous passing test&#x27;, async () =&gt; {
  const res = await fetch(&#x27;https:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;documentation.json&#x27;);
  assert(res.ok);
});

test(&#x27;multi level test&#x27;, async (t) =&gt; {
  &#x2F;&#x2F; 等价于 it()
  await t.test(&#x27;subtest 1&#x27;, (t) =&gt; {
    assert.strictEqual(1, 1);
  });

  await t.test(&#x27;subtest 2&#x27;, (t) =&gt; {
    assert.strictEqual(2, 2);
  });
});

&#x2F;&#x2F; 等价于 describe.skip() &#x2F; it.skip()
test(&#x27;skip option&#x27;, { skip: true }, () =&gt; {});

&#x2F;&#x2F; 等价于 describe.only() &#x2F; it.only()
test(&#x27;only option&#x27;, { only: true }, () =&gt; {});
</code></pre><p>可以看到：</p>
<ul>
<li>语法其实差不多，会更简洁一点，就一个 <code>test()</code>，options 除了 skip 和 only 外，还支持 concurrency 并发。</li>
<li>无需启动器，每一个文件都是一个可执行的 Node.js 代码。</li>
<li>暂未支持 <code>before/after/beforeEach/afterEach</code> 能力，看 issue 描述会后续支持。</li>
<li>暂未支持 Reporter，但日志输出为标准 <a href="https://testanything.org/">TAP</a> 格式，所以应该很容易能复用现有的社区生态。</li>
</ul>
<p>类似覆盖率的演进过程，以前我们需要通过 nyc 对代码转译打桩，现在变为的 Node.js 内置覆盖率输出，nyc 变为 c8 这样的覆盖率报告生成工具。</p>
<p>后续 mocha 等估计会变为类似的上层封装，提供批量执行 和 Reporter 等能力。</p>
<hr>
<h2>Build-time user-land snapshot</h2>
<p>简单的说，可以把某个 js 直接编译成 v8 snapshot，从而可以极大的提速启动时间。</p>
<p>目前这个版本，还只能通过 Node.js 源码来编译，且只能编译成 Node.js Runtime 的方式，即 Build-time。</p>
<pre class="prettyprint language-bash"><code># 把一段 markdown 渲染的逻辑，直接打包到 Node Runtime
$ cd &#x2F;path&#x2F;to&#x2F;node&#x2F;source
$ .&#x2F;configure --node-snapshot-main=marked.js
$ make node

# 执行编译好的 Node Runtime
$ out&#x2F;Release&#x2F;node
&gt; const html = globalThis.marked(&#x27;# this is title&#x27;);
</code></pre><p>秋怡正在继续推进<a href="https://github.com/nodejs/node/issues/35711">该能力</a>，未来可以无需编译 Node.js 源码：</p>
<pre class="prettyprint language-bash"><code>$ node --build-snapshot --snapshot-blob marked.blob marked.js 
$ node --snapshot-blob marked.blob
</code></pre><p>PS：这个能力用在命令行 CLI 的独立打包好像也不错。<a href="https://github.com/nodejs/node/issues/42566">https://github.com/nodejs/node/issues/42566</a></p>
<hr>
<h2>V8 引擎升级</h2>
<p>内置的 V8 引擎升级到 10.1 版本，值得注意的特性：</p>
<ul>
<li>class fields 和 private class methods 的性能优化。</li>
<li><a href="https://v8.dev/blog/v8-release-99#intl.locale-extensions">Intl 规范</a> 的支持，在做日期的本地化，字符串处理的时候非常有用。</li>
<li>数组支持 findLast() 和 findLastIndex() 等。</li>
</ul>
<p>秋怡也写了一篇文章 <a href="https://v8.dev/blog/faster-class-features">Faster initialization of instances with new class features</a> 分享了背后的实现。</p>
<p>PS：<a href="https://mp.weixin.qq.com/s/6PTcjJQTED3WpJH8ToXInw">ECMAScript 双月报告：装饰器提案进入 Stage 3</a> ，阿里的 Node 架构团队今年会推动 Decorator 方案在 V8 的落地实现，不过肯定赶不上了，只能 Node.js 20.x 见了。</p>
<hr>
<h2>ESM 的支持</h2>
<p>虽然在 18.x 中没有新的内容，但在过去的几个月中一直在持续推动 ECMAScript模块实现：</p>
<ul>
<li>对 <a href="https://github.com/tc39/proposal-import-assertions">JSON Import Assertions</a> 的支持。</li>
<li>JSON 模块的正式支持。</li>
<li>对 HTTPS 和 HTTP 导入的实验性支持。</li>
<li><a href="https://github.com/nodejs/loaders">Node.js 加载器团队</a>也在继续开发 ECMAScript 模块加载器实现。</li>
</ul>
<hr>
<h2>工具链和编译器的升级</h2>
<ul>
<li>Linux 版是在 RHEL8 上构建的，要求 glibc 2.28 以上版本。</li>
<li>macOS 要求 10.15 以上版本。</li>
<li>Windows 很多旧版本也不支持了。</li>
</ul>
<p>PS：CentOS 7 官方不再维护了，它对应的 glibc 版本太低，所以升不了。。。</p>
<ul>
<li><a href="https://developer.aliyun.com/article/780803">centos7和8不维护停止更新之后，服务器选择使用什么系统好？</a></li>
<li><a href="https://github.com/nodejs/node/pull/42659">doc: update minimum glibc requirements for Linux by richardlau</a></li>
</ul>
<hr>
<h2>相关资料</h2>
<ul>
<li><a href="https://nodejs.org/en/blog/announcements/v18-release-announce">https://nodejs.org/en/blog/announcements/v18-release-announce</a></li>
<li><a href="https://nodejs.org/en/blog/release/v18.0.0/">https://nodejs.org/en/blog/release/v18.0.0/</a></li>
</ul>
</div>

Node.js 18 新特性解读

<div class="markdown-text"><p>继 2019 年开源 Midway 框架之后，阿里一直在 Node.js 的前沿进行深度研究，除了加入 TC39 参与标准化建设，向上游 Node.js 项目持续贡献，与龙蜥社区合作优化之外，也在 Serverless 领域有了不小的成果。</p>
<p>今天，向大家介绍我们最新的面向云原生场景，面向 Serverless 架构下的新产品， 代号 <strong>Noslate</strong>。</p>
<h2>Noslate 是什么？</h2>
<p>欢迎访问项目了解更多内容：<a href="https://github.com/noslate-project/noslate">Noslate</a>
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01hh1Db41sqh60CiNhD_!!6000000005818-2-tps-1324-390.png" alt="Noslate">
JavaScript 是开发者数量最庞大的编程语言，早些年 Node.js 等技术的出现，让 JavaScript 可以轻松地处理各类服务端任务。</p>
<p>但随着云原生/Serverless 等新架构概念的引导，弹性效率成为了全新的架构设计目标。为了能够让 JavaScript 任务拥有更高的弹性效率，进而满足在泛终端、全栈交付等领域的效率期待。我们逐步深入探索的过程中逐渐形成了 Noslate Project，旨在提升云原生场景下 JavaScript 的被调度性能，解决诊断性黑盒问题。</p>
<p>Noslate 它主要由三个子项目组成，分别体现了我们在提升 Javascript 任务弹性效率过程中碰到的问题以及解决方式：</p>
<ol>
<li>Node.js Distribution：初期针对函数计算冷启动场景优化，降低 Node.js 用户代码加载耗时，形成了针对性的 Node.js 发行版本。</li>
<li>Noslate Workers：随着探索的深入，我们设计了面向轻量端云同构场景的 W3C Web-interoperable JavaScript 轻量化容器方案。在交付灵活度上和资源、执行效率上形成平衡，现在主要应用于中心化的 SSR 渲染等轻量任务场景，效果显著。</li>
<li>Noslate Debugger：在落地业务过程中，我们发现在弹性效率提升后，对于异常和崩溃变得难以定位，得益于 Linux 系统 Coredump 机制的启发，我们设计了基于 Corefile 对问题进行离线诊断的 Noslate Debugger 产品，帮助用户实现问题的回溯和实时定位。</li>
</ol>
<p>简而言之，Noslate 目标是通过提供完整的技术产品方案， 将 JavaScript 打造成云原生时代最灵活的交付语言。</p>
<h2>为什么开源？</h2>
<p>一方面我们希望通过开源加强项目产品化程度；另一方面希望在社区中吸收更多的实践场景进而继续完善产品设计，也欢迎大家参与到项目中来。
同时，依托阿里云龙蜥社区和 Anolis 操作系统的合作关系，我们得以在底层探索，实现技术的演进。</p>
<h3>一、Noslate Workers</h3>
<p><img src="https://gw.alicdn.com/imgextra/i4/O1CN01L6QLHh1NRjQD5l5PE_!!6000000001567-2-tps-1270-339.png" alt="Noslate Workers">
W3C Web-interoperable 运行时 Aworker，提供了一个轻量，近乎 0 冷启动的 JavaScript Serverless 运行环境。通过它，可以轻松的在已有的架构中集成轻量化类 Serverless 的能力。
<img src="https://gw.alicdn.com/imgextra/i2/O1CN015XmQ8e20OlsVamGdC_!!6000000006840-2-tps-1729-672.png" alt="Noslate Workers 架构">
与传统的 FaaS 架构不同，这是一个在普通应用容器之上的轻量任务单位。得益于良好的动态任务高密度混部和隔离特性、以及基于任务状态拷贝 API 带来的近乎 0 冷启动特性，可以实现任务的即用即启与即停即抛，进而无需关心在整个大集群中任务节点的编排问题。
与既有架构的关系：
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01hwla1u1WSUch3qhT0_!!6000000002787-0-tps-3337-1879.jpg" alt="弹性架构分层">
Noslate Workers 由两个主要组件组成：</p>
<ol>
<li>Aworker - 轻量、Web-interoperable JavaScript Runtime</li>
<li>Noslated - Serverless 化的 Aworker 调度管控实现</li>
</ol>
<h4>关于 Aworker</h4>
<p>提供 Web API 标准的 Web-interoperable JavaScript 运行时，适合不直接依赖系统接口的业务逻辑部署。 Aworker 实现了近似 <a href="https://www.w3.org/TR/service-workers/">Service Worker API</a> 的规范，提供了基本的 <a href="https://www.w3.org/TR/service-workers/#fetchevent">Request-Response</a> 服务 API。
因为提供了相比于 Node.js 的 API 更加高层次、抽象的定义，不会泄漏系统底层状态，Aworker 通过 Startup Snapshot 和 Warmfork 能力， 实现了更快的水平及垂直扩容，能够在毫秒级启动并处理流量，具备更高的弹性效率。</p>
<h5>亮点特性一、Warmfork</h5>
<p>熟悉 Linux 系统编程的同学都知道 fork(2) 系统调用有几个优势：</p>
<ol>
<li>新进程可以继承母进程的当前状态，而无需从 main() 开始初始化；</li>
<li>pcb、栈、内存页，页表都是纯内存复制，所以进程创建快 (&lt;1ms)；</li>
<li>CopyOnWrite，新进程可以继承母进程的静态页表，可节省系统内存；</li>
</ol>
<p>对于 Node.js 来说，因为其无法在主线程持有所有多线程的状态 (如锁，信号量等)，所以 Node.js 进行 fork 的修改难度很大。其多线程设计主要 来源于 libuv 库和 V8 Platform Worker 线程：</p>
<ol>
<li>因部分 IO 操作存在同步调用，如 dns，文件读写等，所以 libuv 使用 IO 线程将同步操作转换成异步操作；</li>
<li>Node.js 的 V8 默认配置为多线程 GC、Background Compilation/Optimization 的方式；</li>
</ol>
<p>Node.js 的单进程多线程模型可以由下图表示：
<img src="https://gw.alicdn.com/imgextra/i1/O1CN01f3vkhU1gZxESjIBhq_!!6000000004157-2-tps-767-267.png" alt="Node.js 单进程多线程模型">
Aworker 的设计是采用单进程单线程的模型，也就是将上述模型中的 worker thread 单独抽出放到一独立进程中。Worker 因此可支持 fork，从而避免从 main() 开始的启动消耗，达到快速启动的目的。
<img src="https://gw.alicdn.com/imgextra/i1/O1CN01vaKK3b1NniQw29c7a_!!6000000001615-2-tps-734-266.png" alt="Aworker 单进程单线程模型">
为了支持单线程，Aworker 还做了如下修改：</p>
<ol>
<li>使用了 Linux AIO 特性替掉了 libuv 中同步的文件系统操作（不是 POSIX AIO，两者有区别。Posix AIO 类似于 libuv 现有的实现）；</li>
<li>使用 V8 的 SingleThread 模式，这是一个给低端设备（Low-end devices）实现的能力，不过非常符合 Serverless 资源模型；</li>
</ol>
<p>而为了管理、隔离这些工作进程，我们设计了一个轻量的业务进程容器管理组件 Turf ，该组件能通过 Warmfork 方式创建新的 Aworker 服务进程，并能提供一定的资源、环境的隔离能力，同时兼容 OCI。区别于传统 runc, rund 的容器，turf 旨在承载如 Aworker 这类轻 JS Runtime，它无需镜像运行，开销更低，可以支持更高的部署密度。</p>
<p>Warmfork 具体的对比：
<img src="https://gw.alicdn.com/imgextra/i2/O1CN01cLR5kd1JGVFa2tPic_!!6000000001001-2-tps-480-391.png" alt="warmfork">
提供 “被复制” 的进程，称为 “种子进程”，其他服务进程都是该进程的克隆。譬如 Aworker 作为种子进程，它需要确定自己一个 “可被克隆” 的时间点，将自己的所在状态（内存）作为克隆进程的初始状态。</p>
<p>Warmfork 的系统时序如下：
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01dTl9w71ZcW8TdBOon_!!6000000003215-2-tps-675-386.png" alt="warmfork 时序"></p>
<h5>亮点特性二、Startup Snapshot</h5>
<p>Warmfork 能实现了单机上服务进程的快速启动，而对于优化冷机启动加载速度，需要采用 Startup Snapshot 方案。
Startup Snapshot 和 CodeCache 的区别在于 Startup Snapshot 能够保存用户代码逻辑执行状态，而 CodeCache 只保存代码解析结果、仍然需要重新执行 用户代码逻辑。</p>
<p>设计上，Startup Snapshot 可提供携带用户代码逻辑的快速恢复，但是也有局限性：</p>
<ol>
<li>Startup Snapshot 对内存开销敏感，如果应用启动阶段用了大量内存，可能造成负优化；</li>
<li>用户代码启动需要没有歧义的状态，比如 IP 地址、日期、连接状态、服务发现结果等，针对这些歧义内容用户代码需要在进程恢复时有修正能力；</li>
</ol>
<p>V8 的 Startup Snapshot Serializer 就是一个类似于 GC 的对象遍历器。这个遍历器通过遍历加入到 Snapshot 中的 Root 对象，遍历它所对应的对象图并按照对象关系生成一系列的反序列化指令。</p>
<p>Startup Snapshot 相当于从 V8 Context 对象与它的 globalThis 开始，遍历堆中所有的对象并将对象关系与引用序列化成 特有的字节码，形成一个线性的可存储状态。并在恢复时，解释执行这些字节码，恢复堆中的对象内容与他们之间的引用关系。
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01VbTxVV1j7xsJEqEGB_!!6000000004502-2-tps-750-390.png" alt="V8 对象">
上述的两类和被调度性能相关的特性被统一归类为状态拷贝 API，具体使用可以参考官网文档中的<a href="https://noslate.midwayjs.org/docs/noslate_workers/aworker/serialize-api">《状态拷贝 API》</a>章节，详细介绍了命令行参数和程序内的 Events。</p>
<h4>Noslated</h4>
<p>Noslate Container Deamon，作为 Noslate Workers 解决方案的核心管控程序，提供了实例调度、弹性扩缩容、配置管理、流量管理等能力。</p>
<p>基于健壮性考虑，它由两个角色组成：控制面（Control Plane）、数据面（Data Plane）
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01OGE8Xk1hEiU0mY4Nw_!!6000000004246-2-tps-2845-1351.png" alt="Noslated 架构">
Noslated 对于实例的管控主要有三个模式：</p>
<ol>
<li>基础模式 - 基于流量的扩缩容</li>
<li>即抛模式 - 运行完即销毁</li>
<li>预留模式 - 面向历史场景兼容，在此不额外展开，详情可以查阅官网<a href="https://noslate.midwayjs.org/docs/noslate_workers/references/scale/#%E4%B8%89%E9%A2%84%E7%95%99%E7%AD%96%E7%95%A5">【预留策略】</a>。</li>
</ol>
<h5>一、基础模式</h5>
<p>当流量进入 Data Plane 后，如果没有能够处理请求的 Worker 实例，会通过 requestQueueing 事件通知 Control Plane，它会根据当前水位决定扩容数量，如果当前已无法创建 Worker 实例，会返回资源上限报错。新的 Worker 实例启动后，会自动连接到 Data Plane，Data Plane 发现新的 Worker 实例连接后会主动触发初始化请求，初始化成功后开始消费请求队列里堆积的请求。</p>
<p>当 Worker 实例闲置一段时间后，Control Plane 会主动发起 GC 操作，告知 Data Plane 关闭流量，流量关闭后，Control Plane 会通知 Turf 关闭 Worker 实例，清理资源残留。
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01TWklUC1OusEnQ5ENK_!!6000000001766-2-tps-1207-1020.png" alt="基础弹性模式"></p>
<h5>二、即抛模式</h5>
<p>针对特定的灵活场景，一次性的轻量用户脚本执行（比如特别高密度的混部执行二方任务如 SSR），为了隔离不同请求间的上下文，可以针对每个请求创建一个实例，并在执行后销毁。
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01k7ZGMG1DHWQzoQWSV_!!6000000000191-2-tps-1207-1020.png" alt="即抛模式">
在常规 Node.js 实例带上业务逻辑启动一般都不会太快，如果直接用于响应用户流量 RT 会难以接受。得益于 Aworker 运行时的 Warmfork 以及 Startup Snapshot 能力，把部分业务初始化逻辑放置到 Warmfrok 特性中，进而让新实例都是更快的启动并具备响应能力，这才让高密度混部二方任务成为可能。</p>
<h2>二、Noslate Debugger</h2>
<p><img src="https://gw.alicdn.com/imgextra/i1/O1CN010OWgpL1yU9IWuE5XG_!!6000000006581-2-tps-1270-339.png" alt="Noslate Debugger">
Noslate Debugger 是针对 V8 应用的离线分析工具，它可以分析 Node.js 等应用程序产生的 Corefile (Core 文件)：</p>
<ol>
<li>检查 Node.js/V8 应用程序的结构体、堆栈等内容</li>
<li>检查 V8 堆内的各种对象信息</li>
<li>从 Corefile 中导出 Heap Snapshot</li>
<li>业务无感获取 Corefile (通过 Arthur 工具)</li>
<li>已支持 Node.js / AWorker LTS 官方发行版</li>
</ol>
<p>为了更好的解决问题而不是造轮子，在未来的几个月 Noslate Debugger 也会和国内社区 Node.js 稳定性领域优秀的开源软件 Easy Monitor 共建整合，在 Node.js/V8 的问题诊断领域形成合力，也是值得期待的事情。</p>
<h5>优点一：基于 Corefile 的 “快照” 更适应 Serverless</h5>
<p>Serverless 应用通常会使用大量生命周期短、规格小的任务实例，但在此类任务实例上获得调试诊断能力并不容易，这使得 Serverless 应用长期处于较为黑盒的窘境。比如，Inspector 需要稳定和长时的网络连接、运行时 Heap Snapshot 需要较多的计算和内存资源，都是和 Serverless 架构背道而驰的。</p>
<p>不管是 V8 的对象还是堆快照，它都是 “信息” 在内存中的存储，而 Inspector 功能就是可以在 “运行时” 能提取这些信息。Noslate Debugger 通过 Corefile 将这部分调试诊断能力转移到了离线时进行，让原有实时性要求高的在线诊断调试转化为只需简单文件上传即可集成使用。</p>
<p>在用户本地或云端服务上提供接近用户本地开发时的调试诊断体感：
<img src="https://gw.alicdn.com/imgextra/i2/O1CN01OCIltT1LGcaAR4r8G_!!6000000001272-2-tps-861-519.png" alt="调试流程"></p>
<blockquote>
<p>Corefile (特指 GNU Corefile 格式) 主要记录的是 Node.js 进程的内存和寄存器转储(CoreDump: 内存到磁盘的过程)。所以它也是进程完整“信息”，被用于 Linux 系统应用 Crash(有损) 的调试载体，也可用于 GCore(无损) 产生进程快照用于离线分析。</p>
</blockquote>
<h5>优点二：更小的业务影响​</h5>
<p>对比原有线上 “堆快照” 对业务的影响长达数分钟，到只影响业务 RT 秒级（通过 GCore），甚至只有几十毫秒 （通过 Arthur 工具）。Corefile 快照也不会有任何运行时的&quot;添油加醋&quot;，所以它也适合那些还未被GC的对象定位，譬如诊断已经结束了的业务处理等。</p>
<p>Arthur 是 Noslate Debugger 中用于低影响获取 core文件的工具，利用 fork 减少进程暂停时间，LZ4 压缩减少转储体积。带业务流量的线上环境抓取，业务影响 31.106 毫秒，Corefile 大小为 338 MB （进程原使用 1.44GB 物理内存）。</p>
<h2>三、Node.js 发行版</h2>
<p><img src="https://gw.alicdn.com/imgextra/i1/O1CN01wxGn641fHLWa312QP_!!6000000003981-2-tps-1270-339.png" alt="Anode">
我们还对 Node.js 的实例进行了定向弹性场景的优化，提高了用户代码的加载速度，从而降低了冷启动时间。主要包括 Require 关系加速、Bytecode Cache，优化效果提升可高达 100% ~ 200%。该发行版，同时包含来自阿里云基础软件团队在 ARM 架构的性能优化特性。</p>
<h3>冷启动优化</h3>
<p>PGO（Profile Guided Optimization），是一种根据运行时 Profiling Data 来进行编译优化的技术，这里我们借鉴了这一概念。主要是通过执行一遍之后收集启动阶段的热点数据生成缓存文件，后续通过内存映射直接加载高效的缓存文件，即可获得提升在 100% ~ 200% 的用户代码冷启动优化效果。
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01nHx1UD1yE7Qqlfef6_!!6000000006546-2-tps-1164-930.png" alt="PGO 流程"></p>
<h3>面向特定平台架构优化</h3>
<p>Node.js 支持包括 x64、arm64 等在内的多种架构。 但针对 ARM 芯片的快速发展，上游版本往往仅提供基础适配，缺少针对新指令集的优化，导致在 ARM 芯片上无法获得潜在的性能提升。当下主流云厂商大都提供了 ARM 架构、高性价比的运行环境。 Noslate Node.js 发行版针对 ARM 等平台的优化可以让应用在这些架构上获得更高的性能和效率。
目前 Noslate Node.js 发行版已经在进行针对阿里云 Ampere、阿里云倚天的定制优化，未来计划包括支持龙蜥社区中的其他架构。主要包括：zlib 特性优化、其他一些利用 SIMD 的性能提升都在 PR 合并和准别中。
上面是对 Noslate Project 的简单介绍，如果想要详细了解可通过下述方式：
● GitHub: <a href="https://github.com/noslate-project/noslate">https://github.com/noslate-project/noslate </a>
● 网站：<a href="https://noslate.midwayjs.org/">https://noslate.midwayjs.org/</a>
● 龙蜥社区 SIG（特殊兴趣小组，有钉钉群）：<a href="https://openanolis.cn/sig/web-platform">https://openanolis.cn/sig/web-platform</a>
● 邮件列表：noslate-support@list.alibaba-inc.com</p>
<p>致谢
感谢阿里巴巴集团内业务方的支持，同时还要特别感谢所有给本项目贡献过代码、一起探索过技术方向伙伴们（包括不限于 legendecas、mariodu、zhaolei0505、XadillaX、umuoy1、oraluben、hyj1991 等）。</p>
</div>

阿里巴巴 Noslate 正式开源 - 面向云原生的 JavaScript 容器方案

<div class="markdown-text"><p>CNode TG Channel 开启 !</p>
<p>Channel 将定期推送最新技术文章、资讯以及活动，欢迎订阅！</p>
<p><a href="https://t.me/cnode_js">https://t.me/cnode_js</a></p>
<p><img src="//static.cnodejs.org/FkwbDvoUIeRAccpPd6f53rgXwrDz" alt="qrcode_tg_channel_cnode.png"></p>
<blockquote>
<p>Tips: 订阅后点击 “设置- View Discussion” 即可加入交流群!</p>
</blockquote>
</div>

CNode - TG 频道

<div class="markdown-text"><p>最近在找工作，感觉很卷，真的完蛋了吗</p>
</div>

35岁的前端真的完蛋了吗？

<div class="markdown-text"><p>分享一个朋友的网站：<a href="https://www.dkluge.com/draw">刀刻网</a>
<img src="https://asset.dkluge.com/uploads/dkluge-forum-images/bfa483d97ebddd2e95aac0857098fb6c75aa2204eaa5a10c4a0343ac3e823bdb.png" alt="使用引导__ (3).png"></p>
<p>支持 AI 生成：</p>
<p><img src="https://dkluge-files-v1.oss-cn-hangzhou.aliyuncs.com/uploads/dkluge-images/ce5e1e4835aee8814d50740c3138e3fd5d5da6cb5be50c16b6f8df99a0e60216.png" alt="AI 生成"></p>
</div>

分享一个画流程图各种图的网站

<div class="markdown-text"><p>针对高并发、数据量大的场景，通常会考虑采用<code>分库分表</code>进行优化。在这篇文章，我们重点盘点一下Node.js主流ORM框架的动态分表方案：</p>
<h2>分表规则</h2>
<p>比如我们需要对订单表进行分表操作。可以根据实际业务需求设计分表规则，在这里，我们根据顾客Id取模动态生成表名。比如，拆分为16张表，顾客Id为129，对应的表名如下：</p>
<pre class="prettyprint language- typescript"><code>const tableName = &#96;Order_${129 % 16}&#96;;  &#x2F;&#x2F; Order_1
</code></pre><h2><a href="https://typeorm.io">TypeORM</a></h2>
<p>在TypeORM中可以按照如下方式设置动态表名：</p>
<pre class="prettyprint language- typescript"><code>&#x2F;&#x2F; 获取repository
const repositoryOrder = dataSource.createQueryBuilder().connection.getRepository(EntityOrder);
&#x2F;&#x2F; 设置动态表名
const userId = 129;
const tableName = &#96;Order_${userId % 16}&#96;;
repositoryOrder.metadata.tablePath = tableName;
&#x2F;&#x2F; 查询订单
const orders = await repositoryOrder.find();
</code></pre><h2><a href="https://orm.drizzle.team">Drizzle ORM</a></h2>
<p><code>schema.ts</code></p>
<pre class="prettyprint language- typescript"><code>const orderFactory = userId =&gt; pgTable(
  &#96;Order_${userId % 16}&#96;,
  {
    id: serial(&#x27;id&#x27;).primaryKey(),  
    name: text(&#x27;name&#x27;).notNull(),
  },
);

export const order0 = orderFactory(0);
...
export const order15 = orderFactory(15);
</code></pre><p><code>query.ts</code></p>
<pre class="prettyprint language- typescript"><code>import * as schema from &#x27;.&#x2F;db&#x2F;schema&#x27;;

const db = drizzle(process.env.DATABASE_URL!, { schema });

const userId = 129;
const modelName=&#96;order${userId % 16}&#96;;
const orders = await db.query[modelName].findMany();
</code></pre><h2><a href="https://www.prisma.io/docs">Prisma ORM</a></h2>
<p>Prisma ORM对动态表名的支持还在规划当中，参见：<a href="https://github.com/prisma/prisma/issues/1708">Table Partitioning</a></p>
<p>作为备选方案，我们可以使用<code>$queryRawUnsafe</code>直接构造原始SQL：</p>
<pre class="prettyprint language- typescript"><code>const userId = 129;
const tableName = &#96;Order_${userId % 16}&#96;;  
const orders = await prisma.$queryRawUnsafe(&#96;SELECT * FROM &quot;${tableName}&quot;&#96;);
</code></pre><h2><a href="https://vona.js.org/guide/techniques/orm/introduction.html">Vona ORM</a></h2>
<p>Vona ORM提供了两种模式：自动模式/手工模式</p>
<h3>1. 自动模式</h3>
<p><code>model/order.ts</code></p>
<pre class="prettyprint language- typescript"><code>import { EntityOrder } from &#x27;..&#x2F;entity&#x2F;order.ts&#x27;;

@Model({
  entity: EntityOrder,
  table(ctx: VonaContext, defaultTable: keyof ITableRecord) {
    const user = ctx.app.bean.passport.getCurrentUser();
    if (!user) return defaultTable;
    return &#96;${defaultTable}_${Number(user.id) % 16}&#96;;
  },
})
export class ModelOrder {}
</code></pre><ul>
<li>defaultTable: 是在EntityOrder中定义的缺省表名，如：<code>Order</code></li>
</ul>
<p><code>service/order.ts</code></p>
<pre class="prettyprint language- typescript"><code>class ServiceOrder {
  async findAll() {
    return await this.scope.model.order.select();
  }
}
</code></pre><h3>2. 手工模式</h3>
<p><code>service/order.ts</code></p>
<pre class="prettyprint language- typescript"><code>class ServiceOrder {
  async findAll() {
    const user = this.bean.passport.getCurrentUser();
    const tableName = &#96;Order_${Number(user!.id) % 16}&#96;;
    const modelOrder = this.scope.model.order.newInstance(undefined, tableName as any);
    return await modelOrder.select();
  }
}
</code></pre><ul>
<li>newInstance: 第一个参数可以传入数据源，从而实现<code>分库</code>能力。这里忽略，因此传入undefined</li>
</ul>
</div>

Node.js 主流ORM框架动态分表方案大盘点

<div class="markdown-text"><p>上周，我薅了 Warp 一个月的 Turbo 会员（包含一万次请求），趁着这波“东风”，开发了一个基于大模型的 OCR 网站：<a href="https://llmocr.com/zh">LLMOCR</a></p>
<p>目前，网站基于 Mistral OCR 打造，属于一个“套壳”版本，但已经能提供高效、稳定的文字识别服务。未来，我计划接入更多大模型并新增功能，让它变得更强大。</p>
<h2>网站速览</h2>
<ul>
<li><strong>核心技术</strong>：基于前沿大模型，OCR 识别又快又准。</li>
<li><strong>当前阶段</strong>：Mistral OCR 驱动，性能可靠，体验流畅。</li>
<li><strong>未来计划</strong>：更多大模型 + 新功能，敬请期待！</li>
</ul>
<h2>Warp 使用心得</h2>
<p>这次开发中，Warp 的表现让我眼前一亮。相比 Cursor，它的速度快了不少，Coding 起来特别带感。不过，用到 4000 次请求左右时，我感觉速度稍微慢了一点，可能是资源限制的原因。但总体来说，Warp 的性能和稳定性还是很值得点赞的！</p>
<h2>欢迎体验</h2>
<p>网站已经上线，快来 <a href="https://llmocr.com/zh">LLMOCR</a> 试试大模型 OCR 的魅力吧！后续我会持续优化，欢迎大家多提建议，一起把它打造成更好用的工具！</p>
</div>

Vibe Coding了一个LLM OCR工具

<div class="markdown-text"><p>为了响应快速开发企业网站，并且能够适配移动端，完整的使用tailwind css写一套还挺复杂。</p>
<p>虽然有很多的UI框架，这些框架开发管理系统还可以，有着统一的UI风格，企业网站主要面向C端用户，有着不同设计风格需求，那么之前的bootstrap布局的页面还是很不错的选择。</p>
<p>比如就可以在<a href="https://www.mobanwang.com/">模板王</a>中下载一套项目代码，通过将内容和文字做一些修改，即可给客户使用。</p>
<p>接下来是改造的过程：</p>
<p>改造最初通过询问AI，给出了2个方案；</p>
<ul>
<li>第一，使用bootstrap-vue-next，然后配合tailwind css进行改造【使用的此方法，改动量很大，放弃】；</li>
<li>第二，将js和css文件迁移的public目录下，然后在项目中加载，这样只需要将html文件修改为.vue的文件类型，然后修改很少的链接跳转方式即可。</li>
</ul>
<p>本文中采用第二种方案。</p>
<p><strong>&lt;font style=“background-color:#D9EAFC;”&gt;迁移过程最痛苦的2件事，在vue中js的加载时机 和 迁移静态资源public/assets。&lt;/font&gt;</strong></p>
<h2>下载代码</h2>
<p>本次改造的项目代码，原模板下载<a href="https://www.mobanwang.com/mb/demo/22705/">https://www.mobanwang.com/mb/demo/22705/</a>；</p>
<p>也可以下载其他网络上的优秀的企业站代码。</p>
<p><img src="//static.cnodejs.org/FqXmAFlI_6BfkixbyLswOj30D5cj" alt="1213233453.png"></p>
<pre class="prettyprint language-plain"><code>├── about.html
├── assets
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── em-breadcrumb.css
│   │   ├── plugin_theme_css.css
│   │   └── responsive.css
│   ├── fonts
│   │   ├── Flaticon.woff
│   │   ├── Flaticon.woff2
│   │   ├── Sofia Pro Bold.ttf
│   │   ├── aprova0698.eot
│   │   ├── aprova0698.svg
│   │   ├── aprova0698.ttf
│   │   ├── aprova0698.woff
│   │   ├── fontawesome-webfont3295.ttf
│   │   ├── fontawesome-webfont3295.woff
│   │   ├── fontawesome-webfont3295.woff2
│   │   ├── icofont.eot
│   │   ├── icofont.svg
│   │   ├── icofont.ttf
│   │   ├── icofont.woff
│   │   ├── icofont.woff2
│   │   ├── themify.ttf
│   │   └── themify.woff
│   ├── images
│   │   ├── about-img-1.jpg
│   │   ├── b1.jpg
│   │   ├── b2.jpg
│   │   ├── b3.jpg
│   │   ├── b4.jpg
│   │   ├── b5.jpg
│   │   ├── b6.jpg
│   │   ├── b7.jpg
│   │   ├── b8.jpg
│   │   ├── blog-sidebar1.jpg
│   │   ├── blog-sidebar2.jpg
│   │   ├── blog-sidebar3.jpg
│   │   ├── br1.jpg
│   │   ├── br2.jpg
│   │   ├── br3.jpg
│   │   ├── br4.jpg
│   │   ├── br5.jpg
│   │   ├── contact-bg.jpg
│   │   ├── faq-img.png
│   │   ├── favicon.png
│   │   ├── fottor-bg.jpg
│   │   ├── logo1.png
│   │   ├── logo2.png
│   │   ├── service-bg-img.jpg
│   │   ├── service-img.png
│   │   ├── single-blog.jpg
│   │   ├── single-service.jpg
│   │   ├── skill-img.jpg
│   │   ├── slide-03.jpg
│   │   ├── slider1.jpg
│   │   ├── slider2.jpg
│   │   ├── tab-img.jpg
│   │   ├── tab-img2.jpg
│   │   ├── tab-img3.jpg
│   │   ├── team-bg.jpg
│   │   ├── team1.jpg
│   │   ├── team1.png
│   │   ├── team2.jpg
│   │   ├── team2.png
│   │   ├── team3.jpg
│   │   ├── team3.png
│   │   ├── team4.png
│   │   ├── test1.png
│   │   ├── test2.png
│   │   ├── test3.png
│   │   └── test4.png
│   ├── js
│   │   ├── BeerSlider.js
│   │   ├── ajax-mail.js
│   │   ├── bootstrap.min.js
│   │   ├── bootstrap.min.js.map
│   │   ├── customizer.js
│   │   ├── imagesloaded.pkgd.min.js
│   │   ├── isotope.pkgd.min.js
│   │   ├── jquery.appear.js
│   │   ├── jquery.knob.js
│   │   ├── jquery.meanmenu.js
│   │   ├── jquery.nivo.slider.pack.js
│   │   ├── jquery.waitforimages.js
│   │   ├── map.js
│   │   ├── modernizr.custom.79639.js
│   │   ├── owl.carousel.min.js
│   │   ├── slick.min.js
│   │   ├── swiper-bundle.min.js.map
│   │   ├── theme-pluginjs.js
│   │   ├── theme.js
│   │   └── vendor
│   │       ├── jquery-3.5.1.min.js
│   │       └── modernizr-2.8.3.min.js
│   └── webfonts
│       ├── fa-brands-400.eot
│       ├── fa-brands-400.svg
│       ├── fa-brands-400.ttf
│       ├── fa-brands-400.woff
│       ├── fa-brands-400.woff2
│       ├── fa-regular-400.eot
│       ├── fa-regular-400.svg
│       ├── fa-regular-400.ttf
│       ├── fa-regular-400.woff
│       ├── fa-regular-400.woff2
│       ├── fa-solid-900.eot
│       ├── fa-solid-900.svg
│       ├── fa-solid-900.ttf
│       ├── fa-solid-900.woff
│       └── fa-solid-900.woff2
├── blog-left-sidebar.html
├── blog-right-sidebar.html
├── blog.html
├── contact.html
├── faq.html
├── home-video.html
├── index.html
├── landing-page.html
├── portfolio-3column.html
├── portfolio-4column.html
├── portfolio.html
├── pricing-table.html
├── service.html
├── single-blog.html
├── single-service.html
├── style.css
├── team.html
├── testimonial.html
└── venobox
    ├── close.gif
    ├── next.gif
    ├── preload-circle.png
    ├── preload-dots.png
    ├── preload-ios.png
    ├── preload-quads.png
    ├── preload.png
    ├── prev.gif
    ├── venobox.css
    ├── venobox.js
    └── venobox.min.js

9 directories, 133 files
</code></pre><h2>迁移静态资源</h2>
<p>分为3中情况</p>
<ul>
<li>assets下的图片资源，统一存放到<code>public/assets</code>下，<strong>后边调整代码</strong>来获取该路径的资源</li>
<li>将assets下的js和css和font资源，放到<code>public/assets</code>下的js和css和font</li>
</ul>
<p>将venobox和style.css文件也迁移到<code>public/assets</code>下，style.css可以放到<code>public/assets/css</code>的目录下，&lt;font style=“color:#DF2A3F;”&gt;注意这里需要将&lt;/font&gt;<code>&lt;font style=&quot;color:#DF2A3F;&quot;&gt;style.css&lt;/font&gt;</code>&lt;font style=“color:#DF2A3F;”&gt;的图片引用，修改为相对引用地址。&lt;/font&gt;</p>
<ul>
<li>将html结尾的文件，复制body部分的代码到vue文件的template中。</li>
</ul>
<h2>关于js脚本加载的问题</h2>
<p>在bootstrap中，每个页面为独立html页面，打开都会加载js脚本，并且加载脚本的时间在dom结构渲染完成后进行加载。</p>
<p>那么在改写的vue中，就需要onMounted的生命周期中加载。</p>
<p>在改造过程中尝试了几种方案：</p>
<ul>
<li>写到plugin中，通过<code>nuxtApp.hook('app:mounted', async () =&gt; {})</code>的生命周期时机进行加载，这种方法对<code>index.vue</code>页面生效，但是只加载了一次，对其他页面会失效。</li>
<li>第二种还是想放到插件中，让每个页面的路由之后，加载js</li>
</ul>
<pre class="prettyprint language-javascript"><code>if (process.client) {
  const router = useRouter();

  &#x2F;&#x2F; 监听路由变化，模拟每个页面的 mounted
  router.afterEach(async (to, from) =&gt; {
    console.log(&#x27;页面 mounted 模拟:&#x27;, to.path);
    &#x2F;&#x2F; 在这里执行你的逻辑
    &#x2F;&#x2F; 加载脚本、埋点、初始化第三方库等
    &#x2F;&#x2F; const scripts = [
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;vendor&#x2F;modernizr-2.8.3.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;vendor&#x2F;jquery-3.5.1.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;bootstrap.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;isotope.pkgd.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;owl.carousel.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;jquery.nivo.slider.pack.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;slick.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;venobox&#x2F;venobox.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;imagesloaded.pkgd.min.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;jquery.appear.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;jquery.knob.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;BeerSlider.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;theme-pluginjs.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;jquery.meanmenu.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;ajax-mail.js&#x27;,
    &#x2F;&#x2F;   &#x27;&#x2F;js&#x2F;theme.js&#x27;,
    &#x2F;&#x2F; ];

    &#x2F;&#x2F; for (const src of scripts) {
    &#x2F;&#x2F;   try {
    &#x2F;&#x2F;     await loadScript(src);
    &#x2F;&#x2F;     console.log(&#x27;脚本加载成功:&#x27;, src);

    &#x2F;&#x2F;   } catch (err) {
    &#x2F;&#x2F;     console.error(err);
    &#x2F;&#x2F;   }
    &#x2F;&#x2F; }
  });
}
</code></pre><p>这种方案不能使用<code>&lt;nuxt-link&gt;</code>标签，使用此标签跳转的页面，还是无法正常加载和显示页面。使用<code>&lt;a&gt;</code>时可以生效，但是会刷新页面。</p>
<p>也放弃了这个方案</p>
<ul>
<li>使用<code>composables</code>下写一个公用的加载js的函数方法，在每个页面的<code>onMounted</code>周期中调用一下，这算是最好的解决办法。</li>
</ul>
<pre class="prettyprint language-javascript"><code>&#x2F;&#x2F; 缓存已加载的脚本
const loadedScripts = new Set&lt;string&gt;();

const loadScript = (src: string) =&gt; {
  return new Promise((resolve, reject) =&gt; {
    if (loadedScripts.has(src)) {
      resolve(true);
      return;
    }

    const script = document.createElement(&#x27;script&#x27;);
    script.src = src;
    script.defer = true;

    script.onload = () =&gt; {
      loadedScripts.add(src);
      resolve(true);
    };

    script.onerror = () =&gt; {
      reject(new Error(&#96;Failed to load script: ${src}&#96;));
    };

    document.body.appendChild(script);
  });
};
export const loadScriptClient = async () =&gt; {
  const script1 = document.createElement(&#x27;script&#x27;);
  script1.src = &#x27;&#x2F;js&#x2F;vendor&#x2F;modernizr-2.8.3.min.js&#x27;;
  document.body.appendChild(script1);

  const script2 = document.createElement(&#x27;script&#x27;);
  script2.src = &#x27;&#x2F;js&#x2F;vendor&#x2F;jquery-3.5.1.min.js&#x27;;
  document.body.appendChild(script2);

  const script3 = document.createElement(&#x27;script&#x27;);
  script3.src = &#x27;&#x2F;js&#x2F;bootstrap.min.js&#x27;;
  document.body.appendChild(script3);

  const script4 = document.createElement(&#x27;script&#x27;);
  script4.src = &#x27;&#x2F;js&#x2F;isotope.pkgd.min.js&#x27;;
  document.body.appendChild(script4);

  const script5 = document.createElement(&#x27;script&#x27;);
  script5.src = &#x27;&#x2F;js&#x2F;owl.carousel.min.js&#x27;;
  document.body.appendChild(script5);

  const script6 = document.createElement(&#x27;script&#x27;);
  script6.src = &#x27;&#x2F;js&#x2F;jquery.nivo.slider.pack.js&#x27;;
  document.body.appendChild(script6);

  const script7 = document.createElement(&#x27;script&#x27;);
  script7.src = &#x27;&#x2F;js&#x2F;slick.min.js&#x27;;
  document.body.appendChild(script7);

  const script18 = document.createElement(&#x27;script&#x27;);
  script18.src = &#x27;&#x2F;venobox&#x2F;venobox.min.js&#x27;;
  document.body.appendChild(script18);

  const script8 = document.createElement(&#x27;script&#x27;);
  script8.src = &#x27;&#x2F;js&#x2F;imagesloaded.pkgd.min.js&#x27;;
  document.body.appendChild(script8);

  const script9 = document.createElement(&#x27;script&#x27;);
  script9.src = &#x27;&#x2F;js&#x2F;jquery.appear.js&#x27;;
  document.body.appendChild(script9);

  const script10 = document.createElement(&#x27;script&#x27;);
  script10.src = &#x27;&#x2F;js&#x2F;jquery.knob.js&#x27;;
  document.body.appendChild(script10);

  const script11 = document.createElement(&#x27;script&#x27;);
  script11.src = &#x27;&#x2F;js&#x2F;BeerSlider.js&#x27;;
  document.body.appendChild(script11);

  const script12 = document.createElement(&#x27;script&#x27;);
  script12.src = &#x27;&#x2F;js&#x2F;theme-pluginjs.js&#x27;;
  document.body.appendChild(script12);

  const script13 = document.createElement(&#x27;script&#x27;);
  script13.src = &#x27;&#x2F;js&#x2F;jquery.meanmenu.js&#x27;;
  document.body.appendChild(script13);

  const script14 = document.createElement(&#x27;script&#x27;);
  script14.src = &#x27;&#x2F;js&#x2F;ajax-mail.js&#x27;;
  document.body.appendChild(script14);

  const script15 = document.createElement(&#x27;script&#x27;);
  script15.src = &#x27;&#x2F;js&#x2F;theme.js&#x27;;
  document.body.appendChild(script15);
  
};

</code></pre><p>在vue的页面中进行调用</p>
<pre class="prettyprint language-javascript"><code>&#x2F;&#x2F; 初始化脚本
onMounted(() =&gt; {
  loadScriptClient();
})
</code></pre><h2>关于图片资源引用的问题</h2>
<h3>public/css内部应用的图片路径地址</h3>
<p>public/assets/css内部应用的图片路径地址，是public/assets/images中的资源；</p>
<pre class="prettyprint language-css"><code>.consit_service_area2 {
    background-image: url(&quot;..&#x2F;images&#x2F;port-bg-img.jpg&quot;);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0px 110px;
}
</code></pre><h3>vue文件的template的图片</h3>
<p>template模版内的图片引入：</p>
<ul>
<li>使用<code>&quot;/assets/images/logo1.png&quot;</code>的也是<code>public/assets/images</code>目录的资源。</li>
<li>如果代码<code>&quot;assets/images/logo1.png&quot;</code>则是使用了<code>assets/images</code>目录资源</li>
</ul>
<pre class="prettyprint language-vue"><code>&lt;template&gt;
  &lt;div class=&quot;mobile_menu_logo text-center&quot;&gt;
    &lt;a href=&quot;index.html&quot; title=&quot;consit&quot;&gt;
      &lt;img src=&quot;&#x2F;assets&#x2F;images&#x2F;logo1.png&quot; alt=&quot;consit&quot; &#x2F;&gt;
    &lt;&#x2F;a&gt;
  &lt;&#x2F;div&gt;
&lt;&#x2F;template&gt;
</code></pre><h3>vue文件的template的style中使用图片</h3>
<p>在template中的style添加背景图片，这里如果正常使用<code>/assets/images/logo1.png</code>，就会引用到/assets/images的资源，而不是public/assets/image的资源。</p>
<h4>下面代码引用了 <code>assets/image</code>的资源</h4>
<p>这里不管有没有 <code>/</code> 路径，都是使用的 <code>assets/image</code></p>
<pre class="prettyprint language-vue"><code>&lt;template&gt;
  &lt;div
      class=&quot;swiper-slide d1 t1 m1 witr_swiper_height&quot;
      style=&quot;background-image:	url(&#x2F;assets&#x2F;images&#x2F;slider1.jpg)&quot;
    &gt;
    1111
  &lt;&#x2F;div&gt;
&lt;&#x2F;template&gt;
</code></pre><h4>可以结合script，使用public的资源；</h4>
<p>主要思路是通过动态导入图片资源，然后在绑定到style中</p>
<pre class="prettyprint language-vue"><code>&lt;template&gt;
  &lt;div
      class=&quot;swiper-slide d1 t1 m1 witr_swiper_height&quot;
      :style=&quot;{ backgroundImage: &#96;url(${slider1})&#96; }&quot;
    &gt;
    1111
  &lt;&#x2F;div&gt;
&lt;&#x2F;template&gt;
&lt;script setup&gt;
  &#x2F;&#x2F; vue script内引入assets图片的方法
  import slider1 from &#x27;&#x2F;assets&#x2F;images&#x2F;slider1.jpg&#x27;;
&lt;&#x2F;script&gt;
</code></pre><h2>迁移完成后代码结构</h2>
<pre class="prettyprint language-javascript"><code>.&#x2F;
├── README.md
├── app.vue
├── components
│   ├── navFooter.vue
│   └── navHeader.vue
├── composables
│   └── index.ts
│── nuxt.config.ts
├── package.json
├── pages
│   ├── about.vue
│   ├── blog.vue
│   ├── blogLeft.vue
│   ├── blogRight.vue
│   ├── contact.vue
│   ├── faq.vue
│   ├── homeVideo.vue
│   ├── index.vue
│   ├── landingPage.vue
│   ├── portfolio.vue
│   ├── portfolio3column.vue
│   ├── portfolio4column.vue
│   ├── pricingTable.vue
│   ├── service.vue
│   ├── serviceSingle.vue
│   ├── singleBlog.vue
│   ├── team.vue
│   └── testimonial.vue
├── plugins
│   └── load-script.client.ts
├── pnpm-lock.yaml
├── public
│   ├── assets
│   │   └── images
│   │       ├── about-img-1.jpg
│   │       ├── b1.jpg
│   │       ├── b2.jpg
│   │       ├── b3.jpg
│   │       ├── b4.jpg
│   │       ├── ...
│   │       ├── css
│   │       │   ├── bootstrap.min.css
│   │       │   ├── em-breadcrumb.css
│   │       │   ├── plugin_theme_css.css
│   │       │   ├── responsive.css
│   │       │   └── style.css
│   │       ├── fonts
│   │       │   ├── Flaticon.woff
│   │       │   ├── ...
│   │       ├── js
│   │       │   ├── BeerSlider.js
│   │       │   ├── ajax-mail.js
│   │       │   ├── ...
│   │       ├── venobox
│   │       │   ├── close.gif
│   │       │   ├── next.gif
│   │       │   ├── preload-circle.png
│   │       │   ├── preload-dots.png
│   │       │   ├── preload-ios.png
│   │       │   ├── preload-quads.png
│   │       │   ├── preload.png
│   │       │   ├── prev.gif
│   │       │   ├── venobox.css
│   │       │   ├── venobox.js
│   │       │   └── venobox.min.js
│   │       └── webfonts
│   │           ├── fa-brands-400.eot
│   │           ├── fa-brands-400.svg
│   │           ├── ... 
│   ├── favicon.ico
│   ├── favicon.png
│   ├── robots.txt
└── tsconfig.json

29 directories, 146 files
</code></pre><p>以上是将bootstrap项目转为nuxt项目的代码结构。</p>
<h2>关于接口调用和打包发布上线的操作</h2>
<p>详细的操作和项目代码仓库，放置到个人网站中，如有需要请查看；</p>
<ul>
<li>文章地址：<a href="https://shenshuai89.github.io/pages/3926f2/">https://shenshuai89.github.io/pages/3926f2/</a></li>
<li>线上预览地址：<a href="https://www.shenshuai.site/nuxtapp202504114/">https://www.shenshuai.site/nuxtapp202504114/</a></li>
</ul>
</div>

用现有bootstrap的模板，改造成nuxt3项目

<div class="markdown-text"><p>不知道目前国内node发展是啥情况，但是搜node中文社区，貌似本站是最大的。
但是从阅读和回帖量等看，看起来本站死气沉沉，没有活跃度，不知道是node在国内使用量少还是咋回事？
有哪位老哥能解惑一下么？</p>
</div>

求解惑，为什么最大的中文node社区看着不活跃？

<div class="markdown-text"><p><a href="https://github.com/vonajs/vona">Vona</a> 是一款直观、优雅、强大的 Node.js Web 框架，用于快速开发任何规模的企业级应用。首创 DTO 动态推断与生成能力，从而显著提升开发效率和开发体验。Vona ORM 对数据库事务提供了完整的支持，提供了直观、优雅、强大的特性：</p>
<ol>
<li>使用装饰器启用事务</li>
<li>事务传播机制</li>
<li>事务补偿机制</li>
<li>确保数据库与缓存数据一致性</li>
</ol>
<h2>使用装饰器启用事务</h2>
<pre class="prettyprint language- typescript"><code>import { Database } from &#x27;vona-module-a-orm&#x27;;

class ServicePost {
  @Database.transaction()
  async transaction() {
    &#x2F;&#x2F; insert
    const post = await this.scope.model.post.insert({
      title: &#x27;Post001&#x27;,
    });
    &#x2F;&#x2F; update
    await this.scope.model.post.update({
      id: post.id,
      title: &#x27;Post001-Update&#x27;,
    });
  }
}  
</code></pre><h2>手工启用事务</h2>
<h3>1. 使用当前数据源</h3>
<pre class="prettyprint language- typescript"><code>class ServicePost {
  async transactionManually() {
    const db = this.bean.database.current;
    await db.transaction.begin(async () =&gt; {
      await this.scope.model.post.update({ id: 1, title: &#x27;Post001_Update&#x27; });
    });
  }
}
</code></pre><h3>2. 使用指定数据源</h3>
<pre class="prettyprint language- typescript"><code>class ServicePost {
  async transactionManually() {
    const db = this.bean.database.getDb({ clientName: &#x27;default&#x27; });
    await db.transaction.begin(async () =&gt; {
      const modelPost = this.scope.model.post.newInstance(db);
      await modelPost.update({ id: 1, title: &#x27;Post001_Update&#x27; });
    });
  }
}
</code></pre><h2>事务参数</h2>
<pre class="prettyprint language- diff"><code>class ServicePost {
  @Database.transaction({
+   isolationLevel: &#x27;READ_COMMITTED&#x27;,
+   propagation: &#x27;REQUIRED&#x27;
  })
  async transaction() {
    ...
  }
}  
</code></pre><pre class="prettyprint language- diff"><code>class ServicePost {
  async transactionManually() {
    const db = this.bean.database.getDb({ clientName: &#x27;default&#x27; });
    await db.transaction.begin(
      async () =&gt; {
        ...
      },
      {
+       isolationLevel: &#x27;READ_COMMITTED&#x27;,
+       propagation: &#x27;REQUIRED&#x27;,
      }
    );
  }
}  
</code></pre><h2>事务参数：isolationLevel</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>DEFAULT</td>
<td>数据库相关的缺省isolationLevel</td>
</tr>
<tr>
<td>READ_UNCOMMITTED</td>
<td></td>
</tr>
<tr>
<td>READ_COMMITTED</td>
<td></td>
</tr>
<tr>
<td>REPEATABLE_READ</td>
<td></td>
</tr>
<tr>
<td>SERIALIZABLE</td>
<td></td>
</tr>
<tr>
<td>SNAPSHOT</td>
<td></td>
</tr>
</tbody>
</table>
<h2>事务参数：propagation</h2>
<p>Vona ORM 支持数据库事务传播机制</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>REQUIRED</td>
<td>默认的事务传播级别。如果当前存在事务, 则加入该事务。如果当前没有事务, 则创建一个新的事务</td>
</tr>
<tr>
<td>SUPPORTS</td>
<td>如果当前存在事务，则加入该事务. 如果当前没有事务, 则以非事务的方式继续运行</td>
</tr>
<tr>
<td>MANDATORY</td>
<td>强制性。如果当前存在事务, 则加入该事务。如果当前没有事务，则抛出异常</td>
</tr>
<tr>
<td>REQUIRES_NEW</td>
<td>创建一个新的事务。如果当前存在事务, 则把当前事务挂起。也就是说不管外部方法是否开启事务，总是开启新的事务, 且开启的事务相互独立, 互不干扰</td>
</tr>
<tr>
<td>NOT_SUPPORTED</td>
<td>以非事务方式运行。如果当前存在事务，则把当前事务挂起(不用)</td>
</tr>
<tr>
<td>NEVER</td>
<td>以非事务方式运行。如果当前存在事务，则抛出异常</td>
</tr>
</tbody>
</table>
<h2>事务补偿机制</h2>
<p>当事务成功或者失败时执行一些逻辑</p>
<h3>1. 成功补偿</h3>
<pre class="prettyprint language- typescript"><code>this.bean.database.current.commit(async () =&gt; {
  &#x2F;&#x2F; do something when success
});
</code></pre><h3>2. 失败补偿</h3>
<pre class="prettyprint language- typescript"><code>this.bean.database.current.compensate(async () =&gt; {
  &#x2F;&#x2F; do something when failed
});
</code></pre><h2>事务与Cache数据一致性</h2>
<p>许多框架使用最简短的用例来证明是否高性能，而忽略了业务复杂性带来的性能挑战。随着业务的增长和变更，项目性能就会断崖式下降，各种优化补救方案让项目代码繁杂冗长。而 Vona 正视大型业务的复杂性，从框架核心引入缓存策略，并实现了<code>二级缓存</code>、<code>Query缓存</code>和<code>Entity缓存</code>等机制，轻松应对大型业务系统的开发，可以始终保持代码的优雅和直观</p>
<p>Vona 系统对数据库事务与缓存进行了适配，当数据库事务失败时会自动执行缓存的补偿操作，从而让数据库数据与缓存数据始终保持一致</p>
<p>针对这个场景，Vona 提供了内置的解决方案</p>
<h3>1. 使用当前数据源</h3>
<pre class="prettyprint language- typescript"><code>class ServicePost {
  @Database.transaction()
  async transaction() {
    &#x2F;&#x2F; insert
    const post = await this.scope.model.post.insert({
      title: &#x27;Post001&#x27;,
    });
    &#x2F;&#x2F; cache
    await this.scope.cacheRedis.post.set(post, post.id);
  }
}  
</code></pre><ul>
<li>当新建数据后，将数据放入 redis 缓存中。如果这个事务出现异常，就会进行数据回滚，同时缓存数据也会回滚，从而让数据库数据与缓存数据保持一致</li>
</ul>
<h3>2. 使用指定数据源</h3>
<pre class="prettyprint language- typescript"><code>class ServicePost {
  async transactionManually() {
    const db = this.bean.database.getDb({ clientName: &#x27;default&#x27; });
    await db.transaction.begin(async () =&gt; {
      const modelPost = this.scope.model.post.newInstance(db);
      const post = await modelPost.insert({ title: &#x27;Post001&#x27; });
      await this.scope.cacheRedis.post.set(post, post.id, { db });
    });
  }
}  
</code></pre><ul>
<li>如果对指定的数据库进行操作，那么就需要将数据库对象<code>db</code>传入缓存，从而让缓存针对数据库对象<code>db</code>执行相应的补偿操作。当数据库事务回滚时，让数据库数据与缓存数据保持一致</li>
</ul>
</div>

这个Database Transaction功能多多，你用过吗？

<div class="markdown-text"><p>在node 16下，把cc安装在node 22下面。
然后node 16下 执行node 22下面的cc。。。</p>
<p>第一次见过这么骚的操作</p>
</div>

题目：如何在node 16上执行claude code（cc只能跑在node 18+）？

<div class="markdown-text"><p>同志们，Cnode社区阔别好多年了，今天终于回来了！欢迎大家一起探讨学习JS！</p>
</div>

阔别好多年，我回来了！

<div class="markdown-text"><p>在上一篇文章（<a href="https://juejin.cn/post/7534568184419893275">Prisma不能优雅的支持DTO，试试Vona ORM吧</a>）中，我们基于静态关系实现了<code>目录树</code>的关联查询，并且动态推断生成了DTO（用于Swagger元数据）。在这篇文章我们探讨<code>动态关系</code>的用法。</p>
<h2>什么是动态关系</h2>
<p>那么，什么是动态关系呢？在大型业务系统中，我们会创建大量数据模型，这些数据模型之间的关联众多，我们不可能将所有关联通过<code>静态关系</code>的机制事先声明出来。特别是当存在大量业务模块，这些数据模型散落在不同的业务模块中，那么通过<code>静态关系</code>事先声明所有的关联关系也变得不太现实。比如，Prisma就只支持<code>静态关系</code>。如果事先没有定义<code>静态关系</code>，在实际代码中，我们就需要提供一种使用<code>动态关系</code>的机制，让我们的查询、类型推断、DTO推断等能力得以正常使用。</p>
<h2>准备数据模型</h2>
<p>在上一篇文章中，我们已经介绍了如何创建Entity和Model，这里不再赘述。而是直接把Order和Customer的Entity和Model罗列出来，然后演示<code>动态关系</code>的用法</p>
<h3>Entity</h3>
<h4>1. Order</h4>
<pre class="prettyprint language-typescript"><code>@Entity()
export class EntityOrder extends EntityBase {
  @Api.field(v.openapi({ title: $locale(&#x27;OrderNo&#x27;) }), v.default(&#x27;&#x27;), v.min(3))
  orderNo: string;

  @Api.field(v.title($locale(&#x27;Remark&#x27;)), v.optional())
  remark?: string;

  @Api.field(v.tableIdentity())
  customerId: TableIdentity;
}
</code></pre><ul>
<li>v.openapi：声明字段的元数据，用于Swagger
<ul>
<li>title：采用$locale定义，从而让Swagger元数据支持多语言能力</li>
</ul>
</li>
<li>v.title：等价于v.openapi({ title: … })</li>
<li>TableIdentity：string | number</li>
</ul>
<h4>2. Customer</h4>
<pre class="prettyprint language-typescript"><code>@Entity()
export class EntityCustomer extends EntityBase {
  @Api.field(v.min(3))
  name: string;
}
</code></pre><h3>Model</h3>
<h4>1. Order</h4>
<pre class="prettyprint language-typescript"><code>@Model({ entity: EntityOrder })
export class ModelOrder extends BeanModelBase {}
</code></pre><h4>2. Customer</h4>
<pre class="prettyprint language-typescript"><code>@Model({ entity: EntityCustomer })
export class ModelCustomer extends BeanModelBase {}
</code></pre><h2>基于<code>动态关系</code>的查询</h2>
<p>现在我们查询订单列表，包含归属的顾客信息：</p>
<pre class="prettyprint language-typescript"><code>const orders = await this.scope.model.order.select({
  with: {
    customer: $relationDynamic.belongsTo(
      () =&gt; ModelOrder,
      () =&gt; ModelCustomer,
      &#x27;customerId&#x27;,
    ),
  },
});
</code></pre><ul>
<li>$relationDynamic:提供一组工具，用于定义动态关系</li>
<li>belongsTo：定义<code>多对一</code>的关系
<ul>
<li>参数1：Order模型</li>
<li>参数2：Customer模型</li>
<li>参数3：设置关联外键customerId</li>
</ul>
</li>
</ul>
<p>下面我们看一下<code>orders</code>的类型推断效果：</p>
<p><img src="https://origin.picgo.net/2025/08/08/686e78c52ec7f8abe.png" alt></p>
<p><img src="https://origin.picgo.net/2025/08/08/7e1a41a6d14a811cd.png" alt></p>
<h2>自动推断DTO</h2>
<p>现在我们自动推断DTO，并且设为API的返回数据的类型：</p>
<pre class="prettyprint language-typescript"><code>const DtoOrderResult = $Dto.get(
  () =&gt; ModelOrder,
  {
    with: {
      customer: $relationDynamic.belongsTo(
        () =&gt; ModelOrder,
        () =&gt; ModelCustomer,
        &#x27;customerId&#x27;,
      ),
    },
  },
);

@Controller(&#x27;order&#x27;)
export class ControllerOrder extends BeanBase {
  @Web.get()
  @Api.body(v.array(v.object(DtoOrderResult)))
  async findAll() {
    return await this.scope.service.order.findAll();
  }
}  
</code></pre><ul>
<li>行1：动态创建<code>DtoOrderResult</code></li>
<li>行17：将<code>DtoOrderResult</code>用于Swagger/Openapi的元数据</li>
</ul>
<p>下面我们看一下API的Swagger效果：</p>
<p><img src="https://origin.picgo.net/2025/08/08/8ddd9646456a51f11.png" alt></p>
<h2>封装DTO</h2>
<p>我们还可以创建一个新的DTO，将前面动态创建的<code>DtoOrderResult</code>封装起来，从而用于其他地方：</p>
<p>在VSCode中，可以通过右键菜单<code>Vona Create/Dto</code>创建DTO的代码骨架：</p>
<pre class="prettyprint language-typescript"><code>@Dto()
export class DtoOrderResult {}
</code></pre><p>然后我们通过继承机制来封装DTO：</p>
<pre class="prettyprint language-typescript"><code>const DtoOrderResultDynamic = $Dto.get(
  () =&gt; ModelOrder,
  {
    with: {
      customer: $relationDynamic.belongsTo(
        () =&gt; ModelOrder,
        () =&gt; ModelCustomer,
        &#x27;customerId&#x27;,
      ),
    },
  },
);

@Dto()
export class DtoOrderResult extends DtoOrderResultDynamic {}
</code></pre><p>现在，我们再使用新创建的DTO来改造前面的API代码：</p>
<pre class="prettyprint language-diff"><code>+ import { DtoOrderResult } from &#x27;..&#x2F;dto&#x2F;orderResult.ts&#x27;;

@Controller(&#x27;order&#x27;)
export class ControllerOrder extends BeanBase {
  @Web.get()
+ @Api.body(v.array(v.object(DtoOrderResult)))
+ async findAll(): Promise&lt;DtoOrderResult[]&gt; {
    return await this.scope.service.order.findAll();
  }
}
</code></pre><ul>
<li>行6: 直接传入<code>DtoOrderResult</code></li>
<li>行7: 返回类型为<code>Promise&lt;DtoOrderResult[]&gt;</code></li>
</ul>
<h2>结语</h2>
<p>Vonajs已开源：<a href="https://github.com/vonajs/vona">https://github.com/vonajs/vona</a>。</p>
<p>Vonajs作者正在B站直播撰写技术文档，工作日每晚8:30，欢迎围观：<a href="https://space.bilibili.com/454737998">濮水代码直播间</a></p>
</div>

如何基于动态关系进行ORM关联查询，并动态推断DTO？

<div class="markdown-text"><p>require 如果失败，服务停止，只能改错后，再次启动。
希望是这样的：
const m = require(‘m1’);
if (m) {
…
}
else {
	m = require(‘m2’);
}
有没有有个更好的函数，可以在失败是返回false 或者 null？这样，避免了终止，可以自行选择require其他。</p>
<p>比如以下连续，require不到时，返回false或null，就可以不出错
const m1 = require(‘m1’);
const m2 = require(‘m2’);
const m3 = require(‘m3’);</p>
<p>require 这个方法是不是该升级了？</p>
</div>

如何不在require调用失败时终止运行

<div class="markdown-text"><p>在Nodejs生态中，Prisma是一个非常流行的ORM库，支持Typescript，提供了非常友好的类型推断能力。但是，Prisma却不能优雅的支持DTO。在与其他后端框架整合时，DTO是进行参数验证、生成Swagger元数据的关键节点。如果不能像推断类型一样自动推断出DTO，那么，我们就仍然需要手工创建DTO。随着业务的增长，复杂的表间关系会让手工补充DTO的工作日益繁重。</p>
<p>而Vona ORM就提供了非常便利的工具，使我们可以非常直观的动态推断出DTO，就像推断类型一样，从而解放我们的双手，显著提升生产力。甚至可以说，能够自动推断DTO，为Nodejs后端框架打开了一扇窗。</p>
<p>Vona本身就是一款更直观的Nodejs框架，如果大家第一次接触，可以先参考这篇文章：<a href="https://juejin.cn/post/7509709812857110582">你认为Vonajs提供的这些特性会比Nestjs更好用吗？</a></p>
<p>限于篇幅，这里不展开讲解Vona ORM所有的知识点，而是以<code>目录树</code>为例，演示如何查询一棵目录树，以及如何动态生成DTO，并最终生成Swagger元数据。Vona框架作者正在直播撰写Vona文档。围观官方文档的实时编写过程，有利于加深对框架设计的理解，探索不一样的架构设计路径。有兴趣的欢迎移步：<a href="https://space.bilibili.com/454737998">B站濮水代码直播间</a></p>
<h2>1. 创建Entity</h2>
<p>在VSCode中，可以通过右键菜单<code>Vona Create/Entity</code>创建Entity的代码骨架：</p>
<pre class="prettyprint language-typescript"><code>@Entity(&#x27;demoStudentCategory&#x27;)
export class EntityCategory extends EntityBase {
  [@Api](&#x2F;user&#x2F;Api).field()
  name: string;

  [@Api](&#x2F;user&#x2F;Api).field(v.optional())
  categoryIdParent?: TableIdentity;
}
</code></pre><ul>
<li>行2: 继承自EntityBase，就会自动提供5个基础字段：id、createdAt、updatedAt、deleted、iid
<ul>
<li>iid：是实例Id，通过多实例的机制支持多租户系统的开发</li>
</ul>
</li>
<li>行4、7: 定义两个业务字段：name、categoryIdParent</li>
<li><a href="/user/Api">@Api</a>.field：通过此装饰器定义的信息，可同时应用于参数验证和Swagger元数据</li>
<li>v.optional：声明为可选字段</li>
<li>更多信息，参见：<a href="https://vona.js.org/zh/guide/essentials/scope/entity.html">Vona Entity</a></li>
</ul>
<h2>2. 创建Model</h2>
<p>在VSCode中，可以通过右键菜单<code>Vona Create/Model</code>创建Model的代码骨架：</p>
<pre class="prettyprint language-typescript"><code>import { EntityCategory } from &#x27;..&#x2F;entity&#x2F;category.ts&#x27;;

@Model({ entity: EntityCategory })
export class ModelCategory extends BeanModelBase&lt;EntityCategory&gt; {}
</code></pre><ul>
<li>行3: entity：指定Model所对应的Entity</li>
<li>行4: 继承自BeanModelBase，从而拥有大量操作数据库的方法，如：CRUD、聚合、分组，等等</li>
</ul>
<h2>3. 创建树形结构</h2>
<p>如果要创建一棵目录树，本质就是建立Model引用自身的递归结构。Vona ORM同样支持4种关系：<code>1对1</code>、<code>1对多</code>、<code>多对1</code>，<code>多对多</code>。那么，在这里，我们就需要采用<code>1对多</code>来创建目录的自身引用关系。</p>
<pre class="prettyprint language-diff"><code>import { EntityCategory } from &#x27;..&#x2F;entity&#x2F;category.ts&#x27;;

@Model({
  entity: EntityCategory,
+ relations: {
+   children: $relation.hasMany(() =&gt; ModelCategory, &#x27;categoryIdParent&#x27;, {
+     autoload: true,
+     columns: [&#x27;id&#x27;, &#x27;name&#x27;],
+   }),
+ },
})
export class ModelCategory extends BeanModelBase&lt;EntityCategory&gt; {}
</code></pre><ul>
<li>行5: relations：可以定义多个关系</li>
<li>行6: children：定义一个1对多的关系</li>
<li>$relation.hasMany：
<ul>
<li>参数1: 引用自身ModelCategory</li>
<li>参数2: 设置关联外键categoryIdParent</li>
<li>参数3: 关联选项
<ul>
<li>autoload：是否自动加载关联数据</li>
<li>columns：控制关联数据的字段列表</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>4. 创建Controller</h2>
<p>在VSCode中，可以通过右键菜单<code>Vona Create/Controller</code>创建Controller的代码骨架：</p>
<pre class="prettyprint language-typescript"><code>@Controller()
export class ControllerCategory extends BeanBase {}
</code></pre><p>接下来我们创建一个Api，用于获取目录树：</p>
<pre class="prettyprint language-typescript"><code>export class ControllerCategory extends BeanBase {
  [@Web](&#x2F;user&#x2F;Web).get(&#x27;getCategoryTree&#x27;)
  async getCategoryTree() {
  }
}
</code></pre><ul>
<li>行2: 通过<a href="/user/Web">@Web</a>.get定义一个api，path为getCategoryTree</li>
</ul>
<h2>5. 查询目录树</h2>
<p>一般而言，我们还需要创建一个Service，从而实现以下调用链：Controller-&gt;Service-&gt;Model-&gt;操作数据库。为了简化起见，在这里，我们直接在Controller中调用Model方法：</p>
<pre class="prettyprint language-typescript"><code>export class ControllerCategory extends BeanBase {
  [@Web](&#x2F;user&#x2F;Web).get(&#x27;getCategoryTree&#x27;)
  async getCategoryTree() {
    const tree = await this.scope.model.category.select({
      columns: [&#x27;id&#x27;, &#x27;name&#x27;],
    });
    return tree;
  }
}
</code></pre><ul>
<li>行4: 通过<code>this.scope</code>取得Category Model，然后调用select方法
<ul>
<li>columns：指定要查询的字段列表</li>
</ul>
</li>
</ul>
<p>由于前面我们设置children关系为<code>autoload: true</code>，因此，查询结果<code>tree</code>就是一棵完整的目录树。下面我们看一下<code>tree</code>的类型推断效果：</p>
<p><img src="https://origin.picgo.net/2025/08/05/1c0db0a4260be4663.png" alt="1.png"></p>
<p><img src="https://origin.picgo.net/2025/08/05/2093623b1ca3e0dea.png" alt="2.png"></p>
<h2>6. 自动推断DTO</h2>
<p>现在我们自动推断DTO，并且设为API的返回数据的类型：</p>
<pre class="prettyprint language-diff"><code>export class ControllerCategory extends BeanBase {
  [@Web](&#x2F;user&#x2F;Web).get(&#x27;getCategoryTree&#x27;)
+ [@Api](&#x2F;user&#x2F;Api).body(v.array(v.object($Dto.get(() =&gt; ModelCategory, { columns: [&#x27;id&#x27;, &#x27;name&#x27;] }))))
  async getCategoryTree() {
    const tree = await this.scope.model.category.select({
      columns: [&#x27;id&#x27;, &#x27;name&#x27;],
    });
    return tree;
  }
}
</code></pre><ul>
<li>行3: 通过<a href="/user/Api">@Api</a>.body定义API返回数据的类型：
<ul>
<li>v.array：定义数组类型</li>
<li>v.object：定义对象类型</li>
</ul>
</li>
<li>$Dto.get：动态推断DTO
<ul>
<li>参数1：指定目标Model</li>
<li>参数2：指定选项
<ul>
<li>columns：指定要提取的字段列表</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>同样，由于前面我们设置children关系为<code>autoload: true</code>，因此，<code>$Dto.get</code>生成的DTO就是一棵完整的目录树。下面我们看一下API的Swagger效果：</p>
<p><img src="https://origin.picgo.net/2025/08/05/3f78f6b398ff25403.png" alt="3.png"></p>
<p><img src="https://origin.picgo.net/2025/08/05/45d0f5351e610e51b.png" alt="4.png"></p>
<p><img src="https://origin.picgo.net/2025/08/05/5892fcfd4e6028088.png" alt="5.png"></p>
<p>从示意图中，我们可以清晰的看到，这棵树引用的children类型是名称为<code>demo-student.entity.category_2c7d642ee581efa300341e343180fbb0ecdc785d</code>的动态Entity的数组，从而形成一种递归的引用关系。</p>
<h2>7. 封装DTO</h2>
<p>虽然我们已经实现了预期的目标，但是Vona ORM提供的能力还没有结束。我们可以创建一个新的DTO，将前面的代码<code>$Dto.get(() =&gt; ModelCategory, { columns: ['id', 'name'] })</code>封装起来，从而用于其他地方：</p>
<p>在VSCode中，可以通过右键菜单<code>Vona Create/Dto</code>创建DTO的代码骨架：</p>
<pre class="prettyprint language-typescript"><code>@Dto()
export class DtoCategoryTree {}
</code></pre><p>然后我们通过继承机制来封装DTO：</p>
<pre class="prettyprint language-diff"><code>@Dto()
export class DtoCategoryTree 
+ extends $Dto.get(() =&gt; ModelCategory, { columns: [&#x27;id&#x27;, &#x27;name&#x27;] }) {}
</code></pre><p>现在，我们再使用新创建的DTO来改造前面的API代码：</p>
<pre class="prettyprint language-diff"><code>export class ControllerCategory extends BeanBase {
  [@Web](&#x2F;user&#x2F;Web).get(&#x27;getCategoryTree&#x27;)
+ [@Api](&#x2F;user&#x2F;Api).body(v.array(v.object(DtoCategoryTree)))
+ async getCategoryTree(): Promise&lt;DtoCategoryTree[]&gt;{
    const tree = await this.scope.model.category.select({
      columns: [&#x27;id&#x27;, &#x27;name&#x27;],
    });
    return tree;
  }
}
</code></pre><ul>
<li>行3: 直接传入<code>DtoCategoryTree</code></li>
<li>行4: 返回类型为<code>Promise&lt;DtoCategoryTree[]&gt;</code></li>
</ul>
<h2>结语</h2>
<p>Vonajs已开源：<a href="https://github.com/vonajs/vona">https://github.com/vonajs/vona</a>。</p>
<p>Vonajs作者正在B站直播撰写技术文档，工作日每晚8:30，欢迎围观：<a href="https://space.bilibili.com/454737998">濮水代码直播间</a></p>
</div>

Prisma不能优雅的支持DTO，试试Vona ORM吧

<div class="markdown-text"><p>网站地址: <a href="https://webfem.com/">webfem</a></p>
<p><img src="//static.cnodejs.org/FttFk0RvTAYZwIckkURu8KXrYVJZ" alt="WX20250307-192036@2x.png"></p>
<p>网站采用 express mongodb redis markedjs，实现文章的存储与渲染</p>
<p>后台采用 vue3 + vite + arco 搭建的管理系统</p>
<p><img src="//static.cnodejs.org/FvNLlyFtGs7Prg9LfVc-O6fSTHCL" alt="WX20250311-102536@2x.png"></p>
<p>边学习全站内容，边分享前端相关文章。</p>
<p>欢迎访问，一起学习。 <a href="https://webfem.com/">webfem</a> <a href="http://iamququ.com/">曲曲工具</a></p>
</div>

分享一个自己使用 nodejs + express 搭建的技术博客

<div class="markdown-text"><h2>背景</h2>
<p>我们在使用Vite进行打包时，经常会遇到这个问题：随着业务的展开，版本迭代，页面越来越多，第三方依赖也越来越多，打出来的包也越来越大。如果把页面都进行动态导入，那么凡是几个页面共用的文件都会进行独立拆包，从而导致大量chunk碎片的产生。许多chunk碎片体积都很小，比如：1k，2k，3k，从而显著增加了浏览器的资源请求。</p>
<p>虽然可以通过<code>rollupOptions.output.manualChunks</code>定制分包策略，但是文件之间的依赖关系错综复杂，分包配置稍有不慎，要么导致初始包体积过大，要么导致出现循环依赖错误，因此心智负担很重。那么有没有自动化的分包机制来彻底解决打包碎片化的问题呢？</p>
<h2>拆包合并的两种隐患</h2>
<p>前面提到使用<code>rollupOptions.output.manualChunks</code>定制分包策略有两种隐患，这里展开说明一下：</p>
<h3>1. 导致初始包体积过大</h3>
<p><img src="//static.cnodejs.org/FqXXUgoqBaqLEQCMoDVTp8go3tK9" alt="拆包弊端1.png"></p>
<p>如图所示，文件A本来只依赖文件C，但是按照图中所示分包配置，导致在使用文件A之前必须先下载Chunk1和Chunk2。在稍微大一点的项目中，由于文件之间的依赖关系非常复杂，这种依赖关系会随着大量小文件的合并而快速蔓延，导致初始包体积过大。</p>
<h3>2. 导致出现循环依赖错误</h3>
<p><img src="//static.cnodejs.org/FmBZp91U6R41kcjIKRZQiBU2L8HS" alt="拆包弊端2.png"></p>
<p>如图所示，由于文件之间的相互依赖，导致打包后的Chunk1和Chunk2出现循环依赖的错误。那么在复杂的项目中，业务之间相互依赖的情况就更加常见。</p>
<h2>解决之道：模块化体系</h2>
<p>由于分包配置会导致以上两个隐患，所以往往步履维艰，很难有一个可以遵循的简便易用的配置规则。因为分包配置与业务的当前状态密切相关。一旦业务有所变更，分包配置也需要做相应的改变。</p>
<p>为了解决这个难题，我在项目中引入了模块化体系。也就是将项目的代码依据业务特点进行拆分，形成若干个模块的组合。每一个模块都可以包含页面、组件、配置、语言、工具等等资源。然后一个模块就是一个天然的拆包边界，在 build构建时，自动打包成一个独立的异步chunk，告别Vite配置的烦恼，同时可以有效避免构建产物的碎片化。特别是在大型业务系统中，这种优势尤其明显。当然，采用模块化体系也有利于代码解耦，便于分工协作。</p>
<p>由于一个模块就是一个拆包边界，我们可以通过控制模块的内容和数量来控制产物chunk的大小和数量。而模块划分的依据是业务特点，具有现实的业务意义，相较于<code>rollupOptions.output.manualChunks</code>定制，显然心智负担很低。</p>
<h2>文件结构</h2>
<p>随着项目不断迭代演进，创建的业务模块也会随之膨胀。对于某些业务场景，往往需要多个模块的配合实现。因此，我还在项目中引入了套件的概念，一个套件就是一组业务模块的组合。这样，一个项目就是由若干套件和若干模块组合而成的。下面是一个项目的文件结构：</p>
<pre class="prettyprint language-txt"><code>project
├── src
│  ├── module
│  ├── module-vendor
│  ├── suite
│  │  ├── a-demo
│  │  └── a-home
│  │    ├── modules
│  │    │  ├── home-base
│  │    │  ├── home-icon
│  │    │  ├── home-index
│  │    │  └── home-layout
│  └── suite-vendor
</code></pre><table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>src/module</td>
<td>独立模块（不属于套件）</td>
</tr>
<tr>
<td>src/module-vendor</td>
<td>独立模块（来自第三方）</td>
</tr>
<tr>
<td>src/suite</td>
<td>套件</td>
</tr>
<tr>
<td>src/suite-vendor</td>
<td>套件（来自第三方）</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>a-demo</td>
<td>测试套件：将测试代码放入一个套件中，从而方便随时禁用</td>
</tr>
<tr>
<td>a-home</td>
<td>业务套件：包含4个业务模块</td>
</tr>
</tbody>
</table>
<h2>打包效果</h2>
<p>下面就来看一下实际的打包效果：</p>
<p>以模块<strong>home-base</strong>为例，图左显示的就是该模块的代码，图右显示的就是该模块打包后的文件体积12K，压缩后是3K。要达到这种分包效果，不需要做任何配置。</p>
<p><img src="//static.cnodejs.org/FqdCDXAhzBdfFhZed6ZAjt2TUGyF" alt="chunk-home-base.png"></p>
<p>再比如，我们还可以把布局组件集中放入模块<strong>home-layout</strong>进行管理。该模块打包成独立的Chunk，体积为29K，压缩后是6K。</p>
<p><img src="//static.cnodejs.org/FtfIWRnP-Z43GXqXrEFEAlRZghPg" alt="chunk-home-layout.png"></p>
<h2>源码分析</h2>
<h3>1. 动态导入模块</h3>
<p>由于项目的模块目录结构都是有规律的，我们可以在项目启动之前提取所有的模块清单，然后生成一个js文件，集中实现模块的动态导入：</p>
<pre class="prettyprint language-typescript"><code>const modules = {};
...
modules[&#x27;home-base&#x27;] = { resource: () =&gt; import(&#x27;home-base&#x27;)};
modules[&#x27;home-layout&#x27;] = { resource: () =&gt; import(&#x27;home-layout&#x27;)};
...
export const modulesMeta = { modules };
</code></pre><p>由于所有模块都是通过import方法动态导入的，那么在进行Vite打包时就会自动拆分为独立的chunk。</p>
<h3>2. 拆包配置</h3>
<p>我们还需要通过<code>rollupOptions.output.manualChunks</code>定制拆包配置，从而确保模块内部的代码统一打包到一起，避免出现碎片化文件。</p>
<pre class="prettyprint language-typescript"><code>const __ModuleLibs = [
  &#x2F;src\&#x2F;module\&#x2F;([^\&#x2F;]*?)\&#x2F;&#x2F;,
  &#x2F;src\&#x2F;module-vendor\&#x2F;([^\&#x2F;]*?)\&#x2F;&#x2F;,
  &#x2F;src\&#x2F;suite\&#x2F;.*\&#x2F;modules\&#x2F;([^\&#x2F;]*?)\&#x2F;&#x2F;,
  &#x2F;src\&#x2F;suite-vendor\&#x2F;.*\&#x2F;modules\&#x2F;([^\&#x2F;]*?)\&#x2F;&#x2F;,
];

const build = {
  rollupOptions: {
    output: {
      manualChunks: id =&gt; {
        return customManualChunk(id);
      },
    },
  },
};

function customManualChunk(id: string) {
  for (const moduleLib of __ModuleLibs) {
    const matched = id.match(moduleLib);
    if (matched) return matched[1];
  }
  return null;
}
</code></pre><p>通过正则表达式匹配每一个文件路径，如果匹配成功就使用相应的模块名称作为chunk name。</p>
<h2>两种隐患的解决之道</h2>
<p>如果模块之间相互依赖，那么也有可能存在前面所言的两种隐患，如图所示：</p>
<p><img src="//static.cnodejs.org/FmdDgkbNmpqsCYPeH1VvKu2sofnu" alt="拆包弊端3.png"></p>
<p>为了防止两种隐患情况的发生，我们可以实现一种更精细的动态加载和资源定位的机制。简而言之，当我们在<strong>模块1</strong>中访问<strong>模块2</strong>的资源时，首先要动态加载模块2，然后找到模块2的资源，返回给使用方。</p>
<p>比如，在模块2中有一个Vue组件<code>Card</code>，模块1中有一个页面组件<code>FirstPage</code>，我们需要在页面组件<code>FirstPage</code>中使用<code>Card</code>组件。那么，我们需要这样来做：</p>
<pre class="prettyprint language-typescript"><code>&#x2F;&#x2F; 动态加载模块
export async function loadModule(moduleName: string) {
  const moduleRepo = modulesMeta.modules[moduleName];
  return await moduleRepo.resource();
};

&#x2F;&#x2F; 生成异步组件
export function createDynamicComponent(moduleName: string, name: string) {
  return defineAsyncComponent(() =&gt; {
    return new Promise(resolve =&gt; {
      &#x2F;&#x2F; 动态加载模块
      loadModule(moduleName).then(moduleResource =&gt; {
        &#x2F;&#x2F; 返回模块中的组件
        resolve(moduleResource.components[name]);
      });
    });
  });
}
</code></pre><pre class="prettyprint language-typescript"><code>const ZCard = createDynamicComponent(&#x27;模块2&#x27;, &#x27;Card&#x27;);

export class RenderFirstPage {
  render() {
    return (
      &lt;div&gt;
        &lt;ZCard&#x2F;&gt;
      &lt;&#x2F;div&gt;
    );
  }
}
</code></pre><h2>高级导入机制</h2>
<p>虽然使用<code>createDynamicComponent</code>可以达到预期的目的，但是，代码不够简洁，无法充分利用Typescript提供的自动导入机制。我们希望仍然像常规的方式一样使用组件：</p>
<pre class="prettyprint language-typescript"><code>import { ZCard } from &#x27;模块2&#x27;;

export class RenderFirstPage {
  render() {
    return (
      &lt;div&gt;
        &lt;ZCard&#x2F;&gt;
      &lt;&#x2F;div&gt;
    );
  }
}
</code></pre><p>这样的代码，就是静态导入的形式，就会导致<strong>模块1</strong>和<strong>模块2</strong>强相互依赖。那么，有没有两全其美的方式呢？有的。我们可以开发一个Babel插件，对AST语法树进行解析，自动将ZCard的导入改为动态导入形式。这样的话，我们的代码不仅简洁直观，而且还可以实现动态导入，规避分包时两种隐患的发生。为了避免主题分散，Babel插件如何开发不在这里展开，如果感兴趣，可以直接参考源代码：<a href="https://github.com/cabloy/zova/blob/a6088acf4f520a65fa206b6864329b1712ae0921/zova-dev/packages-utils/babel-plugin-zova-component/src/index.ts">babel-plugin-zova-component</a></p>
<h2>结语</h2>
<p>本文对Vite打包碎片化的成因进行了分析，并且提出了模块化体系，从而简化分包配置，同时又采用动态加载机制，完美规避了分包时两种隐患的发生。</p>
<p>当然，实现一个完整的模块化系统，需要考虑的细节还有很多，如果想体验开箱即用的效果，可以访问我开源的Zova.js框架：<a href="https://github.com/cabloy/zova">https://github.com/cabloy/zova</a>。可添加我的微信，入群交流：yangjian2025</p>
</div>

Vite打包碎片化，如何化解？

<div class="markdown-text"><p>1、工具变化
从npm到pnpm
从nrm，nvm到volta，warp
从vscode到cursor</p>
<p>2、语法和api的变化
比如ts和async的普及
内置test、sql框架
Async上下文追踪
opentelemetry等</p>
<p>3、web框架
从express、koa到egg、midway
到hono，fastify，next和nest
甚至vercel都避不开。
社区里东西变化还是蛮大的</p>
<p>platformatic大型应用</p>
<p>4、周边</p>
<p>wasi、rust addon
astro</p>
<p>5、各种ai sdk</p>
<p>各种agent应用</p>
<p>以上，随手想的。</p>
<p>欢迎留言，一起讨论</p>
</div>

重新写一下最新版的Node.js教程，大概感兴趣吗？

<div class="markdown-text"><p>我最近开发了一个叫 <a href="https://www.mcp.bar">MCPBar</a> 的开源项目，这是一个专为 Model Context Protocol（MCP）服务器设计的包管理工具，灵感来源于 npm，主要是为了解决目前 AI 工具生态圈里安装和管理太麻烦的痛点问题。</p>
<hr>
<h2>项目介绍</h2>
<ul>
<li><strong>MCPBar</strong> 是个命令行工具，让你能一键搜索安装 MCP 服务器（就是让 AI 模型能调用各种工具和 API 的那种）</li>
<li>采用了类似 package.json 的标准化 <code>mcp.json</code> 配置文件格式</li>
<li>支持各种主流 MCP 客户端（Claude、Cursor、Windsurf 等都能用）</li>
<li>自带开放注册中心，已经收录了 1500+ 个 MCP 服务器，支持关键词搜索，一键安装省心省力</li>
</ul>
<hr>
<h2>为啥要做这个？</h2>
<p>AI 生态发展太快了，MCP 作为连接模型和工具的协议，现在已经有很多实现了。但问题是每家客户端都各搞各的，服务器发现和安装方式五花八门，配起来特别麻烦，对开发体验特别不友好。MCPBar 就是想通过标准化和开放注册中心，把门槛降下来，让 AI 工具像装 npm 包一样简单方便。</p>
<hr>
<h2>技术特点</h2>
<ul>
<li>去中心化注册中心设计，支持多种安装方式（URL/本地文件/别名都可以）</li>
<li>标准化配置文件，包含了元数据、安装说明、配置参数等必要信息</li>
<li>全平台支持（Mac/Windows/Linux 都能用）</li>
<li>上手超简单：<code>mcpbar install github/github-mcp-server</code> 一行命令就搞定</li>
</ul>
<hr>
<h2>快速上手</h2>
<pre class="prettyprint language-bash"><code>npm install -g mcpbar
mcpbar search github    # 搜搜有哪些 GitHub 相关的 MCP 服务器
mcpbar install github   # 一键装好 GitHub MCP 服务器
</code></pre><hr>
<h2>相关链接</h2>
<ul>
<li><a href="https://github.com/in-fun/mcpbar">GitHub 仓库</a></li>
<li><a href="https://www.mcp.bar">项目官网</a></li>
<li><a href="https://www.mcp.bar/blog/introducing-mcpbar">详细介绍（含原理和实现细节）</a></li>
</ul>
<hr>
<p>欢迎各位大佬试用、提意见或者来一起贡献代码！</p>
</div>

MCPBar：一款国产开源的 MCP 服务包管理器与开放注册中心

<div class="markdown-text"><p><img src="//static.cnodejs.org/FsSMCl8OyWMYXUxFbAF6fyUJ12X9" alt="heap.png"></p>
<p>rss特别高但是js堆的内存都不高，通过–inspect我也拿不到这部分堆外内容的内存快照。
我拿到的内存快照都只有50m左右大小，完全和rss不匹配
有什么有效的排查思路/方法吗？</p>
<p>// 补充
图不知道为什么裂了。。。
补充：
rss - 1648.1mb
extrenal - 2.26mb
usedHeap - 49.97mb
totalHeap - 59.35mb</p>
</div>

【求助】内存泄漏排查

<div class="markdown-text"><h1>docx-handlebars</h1>
<p><a href="https://crates.io/crates/docx-handlebars"><img src="https://img.shields.io/crates/v/docx-handlebars.svg" alt="Crates.io"></a>
<a href="https://docs.rs/docx-handlebars"><img src="https://docs.rs/docx-handlebars/badge.svg" alt="Documentation"></a>
<a href="https://github.com/sail-sail/docx-handlebars#license"><img src="https://img.shields.io/crates/l/docx-handlebars.svg" alt="License"></a></p>
<p>中文文档 | <a href>English</a></p>
<p>一个用于处理 DOCX 文件 Handlebars 模板的 Rust 库，支持多平台使用：</p>
<ul>
<li>🦀 Rust 原生</li>
<li>🌐 WebAssembly (WASM)</li>
<li>📦 npm 包</li>
<li>🟢 Node.js</li>
<li>🦕 Deno</li>
<li>🌍 浏览器端</li>
<li>📋 JSR (JavaScript Registry)</li>
</ul>
<h2>功能特性</h2>
<ul>
<li>✅ <strong>智能合并</strong>：自动处理被 XML 标签分割的 Handlebars 语法</li>
<li>✅ <strong>DOCX 验证</strong>：内置文件格式验证，确保输入文件有效</li>
<li>✅ <strong>Handlebars 支持</strong>：完整的模板引擎，支持变量、条件、循环、Helper 函数</li>
<li>✅ <strong>跨平台</strong>：Rust 原生 + WASM 支持多种运行时</li>
<li>✅ <strong>TypeScript</strong>：完整的类型定义和智能提示</li>
<li>✅ <strong>零依赖</strong>：WASM 二进制文件，无外部依赖</li>
<li>✅ <strong>错误处理</strong>：详细的错误信息和类型安全的错误处理</li>
</ul>
<h2>安装</h2>
<h3>Rust</h3>
<pre class="prettyprint language-bash"><code>cargo add docx-handlebars
</code></pre><h3>npm</h3>
<pre class="prettyprint language-bash"><code>npm install docx-handlebars
</code></pre><h3>Deno</h3>
<pre class="prettyprint language-typescript"><code>import { render, init } from &quot;jsr:@sail&#x2F;docx-handlebars&quot;;
</code></pre><h2>使用示例</h2>
<h3>Rust</h3>
<pre class="prettyprint language-rust"><code>use docx_handlebars::render_handlebars;
use serde_json::json;

fn main() -&gt; Result&lt;(), Box&lt;dyn std::error::Error&gt;&gt; {
    &#x2F;&#x2F; 读取 DOCX 模板文件
    let template_bytes = std::fs::read(&quot;template.docx&quot;)?;
    
    &#x2F;&#x2F; 准备数据
    let data = json!({
        &quot;name&quot;: &quot;张三&quot;,
        &quot;company&quot;: &quot;ABC科技有限公司&quot;,
        &quot;position&quot;: &quot;软件工程师&quot;,
        &quot;projects&quot;: [
            {&quot;name&quot;: &quot;项目A&quot;, &quot;status&quot;: &quot;已完成&quot;},
            {&quot;name&quot;: &quot;项目B&quot;, &quot;status&quot;: &quot;进行中&quot;}
        ],
        &quot;has_bonus&quot;: true,
        &quot;bonus_amount&quot;: 5000
    });
    
    &#x2F;&#x2F; 渲染模板
    let result = render_handlebars(template_bytes, &amp;data)?;
    
    &#x2F;&#x2F; 保存结果
    std::fs::write(&quot;output.docx&quot;, result)?;
    
    Ok(())
}
</code></pre><h3>JavaScript/TypeScript (Node.js)</h3>
<pre class="prettyprint language-javascript"><code>import { render, init } from &#x27;docx-handlebars&#x27;;
import fs from &#x27;fs&#x27;;

async function processTemplate() {
    &#x2F;&#x2F; 初始化 WASM 模块
    await init();
    
    &#x2F;&#x2F; 读取模板文件
    const templateBytes = fs.readFileSync(&#x27;template.docx&#x27;);
    
    &#x2F;&#x2F; 准备数据
    const data = {
        name: &quot;李明&quot;,
        company: &quot;XYZ技术有限公司&quot;,
        position: &quot;高级开发工程师&quot;,
        projects: [
            { name: &quot;E-commerce平台&quot;, status: &quot;已完成&quot; },
            { name: &quot;移动端APP&quot;, status: &quot;开发中&quot; }
        ],
        has_bonus: true,
        bonus_amount: 8000
    };
    
    &#x2F;&#x2F; 渲染模板
    const result = render(templateBytes, JSON.stringify(data));
    
    &#x2F;&#x2F; 保存结果
    fs.writeFileSync(&#x27;output.docx&#x27;, new Uint8Array(result));
}

processTemplate().catch(console.error);
</code></pre><h3>Deno</h3>
<pre class="prettyprint language-typescript"><code>import { render, init } from &quot;https:&#x2F;&#x2F;deno.land&#x2F;x&#x2F;docx_handlebars&#x2F;mod.ts&quot;;

async function processTemplate() {
    &#x2F;&#x2F; 初始化 WASM 模块
    await init();
    
    &#x2F;&#x2F; 读取模板文件
    const templateBytes = await Deno.readFile(&quot;template.docx&quot;);
    
    &#x2F;&#x2F; 准备数据
    const data = {
        name: &quot;王小明&quot;,
        department: &quot;研发部&quot;,
        projects: [
            { name: &quot;智能客服系统&quot;, status: &quot;已上线&quot; },
            { name: &quot;数据可视化平台&quot;, status: &quot;开发中&quot; }
        ]
    };
    
    &#x2F;&#x2F; 渲染模板
    const result = render(templateBytes, JSON.stringify(data));
    
    &#x2F;&#x2F; 保存结果
    await Deno.writeFile(&quot;output.docx&quot;, new Uint8Array(result));
}

if (import.meta.main) {
    await processTemplate();
}
</code></pre><h3>浏览器端</h3>
<pre class="prettyprint language-html"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;DOCX Handlebars 示例&lt;&#x2F;title&gt;
&lt;&#x2F;head&gt;
&lt;body&gt;
    &lt;input type=&quot;file&quot; id=&quot;fileInput&quot; accept=&quot;.docx&quot;&gt;
    &lt;button onclick=&quot;processFile()&quot;&gt;处理模板&lt;&#x2F;button&gt;
    
    &lt;script type=&quot;module&quot;&gt;
        import { render, init } from &#x27;.&#x2F;pkg&#x2F;docx_handlebars.js&#x27;;
        
        &#x2F;&#x2F; 初始化 WASM
        await init();
        
        window.processFile = async function() {
            const fileInput = document.getElementById(&#x27;fileInput&#x27;);
            const file = fileInput.files[0];
            
            if (!file) return;
            
            const arrayBuffer = await file.arrayBuffer();
            const templateBytes = new Uint8Array(arrayBuffer);
            
            const data = {
                name: &quot;张三&quot;,
                company: &quot;示例公司&quot;
            };
            
            try {
                const result = render(templateBytes, JSON.stringify(data));
                
                &#x2F;&#x2F; 下载结果
                const blob = new Blob([new Uint8Array(result)], {
                    type: &#x27;application&#x2F;vnd.openxmlformats-officedocument.wordprocessingml.document&#x27;
                });
                const url = URL.createObjectURL(blob);
                const a = document.createElement(&#x27;a&#x27;);
                a.href = url;
                a.download = &#x27;processed.docx&#x27;;
                a.click();
            } catch (error) {
                console.error(&#x27;处理失败:&#x27;, error);
            }
        };
    &lt;&#x2F;script&gt;
&lt;&#x2F;body&gt;
&lt;&#x2F;html&gt;
</code></pre><h2>模板语法</h2>
<h3>基础变量替换</h3>
<pre class="prettyprint language-handlebars"><code>员工姓名: {{name}}
公司: {{company}}
职位: {{position}}
</code></pre><h3>条件渲染</h3>
<pre class="prettyprint language-handlebars"><code>{{#if has_bonus}}
奖金: ¥{{bonus_amount}}
{{else}}
无奖金
{{&#x2F;if}}

{{#unless is_intern}}
正式员工
{{&#x2F;unless}}
</code></pre><h3>循环渲染</h3>
<pre class="prettyprint language-handlebars"><code>项目经历:
{{#each projects}}
- {{name}}: {{description}} ({{status}})
{{&#x2F;each}}

技能列表:
{{#each skills}}
{{@index}}. {{this}}
{{&#x2F;each}}
</code></pre><h3>Helper 函数</h3>
<p>内置的 Helper 函数：</p>
<pre class="prettyprint language-handlebars"><code>{{upper name}}           &lt;!-- 转大写 --&gt;
{{lower company}}        &lt;!-- 转小写 --&gt;
{{len projects}}         &lt;!-- 数组长度 --&gt;
{{#if (eq status &quot;completed&quot;)}}已完成{{&#x2F;if}}    &lt;!-- 相等比较 --&gt;
{{#if (gt score 90)}}优秀{{&#x2F;if}}               &lt;!-- 大于比较 --&gt;
{{#if (lt age 30)}}年轻{{&#x2F;if}}                 &lt;!-- 小于比较 --&gt;
</code></pre><h3>复杂示例</h3>
<pre class="prettyprint language-handlebars"><code>=== 员工报告 ===

基本信息:
姓名: {{employee.name}}
部门: {{employee.department}}
职位: {{employee.position}}
入职时间: {{employee.hire_date}}

{{#if employee.has_bonus}}
💰 奖金: ¥{{employee.bonus_amount}}
{{&#x2F;if}}

项目经历 (共{{len projects}}个):
{{#each projects}}
{{@index}}. {{name}}
   描述: {{description}}
   状态: {{status}}
   团队规模: {{team_size}}人
   
{{&#x2F;each}}

技能评估:
{{#each skills}}
- {{name}}: {{level}}&#x2F;10 ({{years}}年经验)
{{&#x2F;each}}

在表格中若需要删除一整行, 只需要在任意单元格上添加:
{{removeTableRow}}


{{#if (gt performance.score 90)}}
🎉 绩效评级: 优秀
{{else if (gt performance.score 80)}}
👍 绩效评级: 良好
{{else}}
📈 绩效评级: 需改进
{{&#x2F;if}}

图片:
{{img base64_image_data [width] [height]}}
  只传 height：{{img base64 &quot;&quot; 200}}
  只传 width：{{img base64 300}}
  都不传：{{img base64}}
  都传：{{img base64 300 200}}
</code></pre><h2>错误处理</h2>
<p>库提供了详细的错误类型和消息：</p>
<h3>Rust</h3>
<pre class="prettyprint language-rust"><code>use docx_handlebars::{render_handlebars, DocxError};

match render_handlebars(template_bytes, &amp;data) {
    Ok(result) =&gt; {
        println!(&quot;处理成功！&quot;);
        std::fs::write(&quot;output.docx&quot;, result)?;
    }
    Err(e) =&gt; match e.downcast_ref::&lt;DocxError&gt;() {
        Some(DocxError::InvalidZipFormat) =&gt; {
            eprintln!(&quot;错误: 无效的 DOCX 文件格式&quot;);
        }
        _ =&gt; {
            eprintln!(&quot;其他错误: {}&quot;, e);
        }
    }
}
</code></pre><h3>JavaScript/TypeScript</h3>
<pre class="prettyprint language-javascript"><code>try {
    const result = render(templateBytes, JSON.stringify(data));
    console.log(&#x27;处理成功！&#x27;);
} catch (error) {
    console.error(&#x27;处理失败:&#x27;, error);
}
</code></pre><h2>构建和开发</h2>
<h3>构建 WASM 包</h3>
<pre class="prettyprint language-bash"><code># 构建所有目标
npm run build

# 或分别构建
npm run build:web    # 浏览器版本
npm run build:npm    # Node.js 版本 
npm run build:jsr    # Deno 版本
</code></pre><h3>运行示例</h3>
<pre class="prettyprint language-bash"><code># Rust 示例
cargo run --example rust_example

# Node.js 示例
node examples&#x2F;node_example.js

# Deno 示例  
deno run --allow-read --allow-write examples&#x2F;deno_example.ts

# 浏览器示例
cd tests&#x2F;npm_test
node serve.js
# 然后在浏览器中打开 http:&#x2F;&#x2F;localhost:8080
# 选择 examples&#x2F;template.docx 文件测试
</code></pre><h2>技术特性</h2>
<h3>智能合并算法</h3>
<p>该库的核心创新是智能合并被 XML 标签分割的 Handlebars 语法。在 DOCX 文件中，当用户输入模板语法时，Word 可能会将其拆分成多个 XML 标签</p>
<h3>文件验证</h3>
<p>内置的 DOCX 文件验证确保输入文件的完整性：</p>
<ol>
<li><strong>ZIP 格式验证</strong>：检查文件签名和结构</li>
<li><strong>DOCX 结构验证</strong>：确保包含必要的文件
<ul>
<li><code>[Content_Types].xml</code></li>
<li><code>_rels/.rels</code></li>
<li><code>word/document.xml</code></li>
</ul>
</li>
<li><strong>MIME 类型验证</strong>：验证内容类型正确性</li>
</ol>
<h2>性能和兼容性</h2>
<ul>
<li><strong>零拷贝</strong>: Rust 和 WASM 之间高效的内存管理</li>
<li><strong>流式处理</strong>: 适合处理大型 DOCX 文件</li>
<li><strong>跨平台</strong>: 支持 Windows、macOS、Linux、Web</li>
<li><strong>现代浏览器</strong>: 支持所有支持 WASM 的现代浏览器</li>
</ul>
<h2>许可证</h2>
<p>本项目采用 MIT 许可证 - 详见 <a href>LICENSE-MIT</a> 文件。</p>
<h2>支持</h2>
<ul>
<li>📚 <a href="https://docs.rs/docx-handlebars">文档</a></li>
<li>🐛 <a href="https://github.com/sail-sail/docx-handlebars/issues">问题反馈</a></li>
<li>💬 <a href="https://github.com/sail-sail/docx-handlebars/discussions">讨论</a></li>
</ul>
<hr>
</div>

一个用于处理 DOCX 文件 Handlebars 模板的 Rust 库，支持多平台使用

<div class="markdown-text"><p>『好有链接』是我们第一个独立开发的正式作品。欢迎大家尝试，也欢迎大家提出意见帮助我们完善它～
『好有链接』拥有数字名片该有的一切基础功能：整理并整合你的社交账号、内容链接、联系方式，让别人快速了解你是谁，不用一遍遍自我介绍。</p>
<p><img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_22.png" alt="Slide 16_9 - 22.png"></p>
<p>但我们想让它和诸如 Linkree 之类的数字名片工具有些差异，可以更加贴合国内的环境。</p>
<p>于是，</p>
<h1>1. 多身份名片</h1>
<p>我们每个人或多或少都有多个身份，并且会随时切换它们：</p>
<ul>
<li>用飞书开会，企微回复客户，Linkedin 更新工作成果的职场打工人👩💻</li>
<li>用 notion 撰写博客，知乎分享经验， 在 behance 上发布作品的设计博主👨🎨</li>
<li>用微博晒狗，小红书种草宠物玩具，微信群寻找遛狗搭子的铲屎官🐕</li>
</ul>
<p><img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_14.png" alt="好有链接 数字名片-2.png"></p>
<p>当我们面对不同人的时候，为了匹配不同的关系场景，我们往往会刻意的展示我们其中一面。那么你有没有想过，<strong>这一次，我应该如何介绍和分享自己？</strong></p>
<p>为了解决这个问题，为了快速且准确地展示那个 “正确的我”。
我们在『好有链接』中增加了多身份名片这个功能：你可以为不同的关系场景，创建专属的『身份名片』。</p>
<p><img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_15.png" alt="好有链接 数字名片-3.png"></p>
<p>每张『身份名片』都是你的一种侧面。你可以为它们设置不同的头像与简介，组合出专属于这一面的人设信息：</p>
<ul>
<li>添加社交卡片，绑定你的平台账号（微信、微博、小红书、B 站等），让别人更快找到你。</li>
<li>添加笔记卡片，展示你的爱好特长、知识经验、观点和作品，让别人更快了解你。</li>
</ul>
<p><img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_23.png" alt="好有链接 数字名片-4.png"></p>
<p>这些名片彼此独立。你不需要把所有账号塞进一个页面中，这样也不会担心 “我是不是不该分享这个微信” 或是 “我发一大段自我介绍 Ta 会看吗？”。
只需根据场合，挑选并分享那个恰当的自己。</p>
<p><strong>『好有链接』就是这样一本属于你的自我使用说明书，每一页都写给不同的人看。</strong></p>
<h1>2. 中文口令</h1>
<p>出现中文口令的原因是因为我们觉得在社交平台上分享自己的链接和二维码太麻烦了。每次都要绞尽脑汁和平台斗争。</p>
<p><img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_6.png" alt="未命名-13.png"></p>
<p>于是，在『好有链接』中，每一张卡片都可以被赋予一个自定义的中文口令。他人只需在小程序中输入口令就能直达你想展示的内容。
用中文口令可以替代冗长的链接，可以更加自然地嵌入评论、对话甚至图片中，不容易被屏蔽或误删。</p>
<p><img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_19.png" alt="好有链接 数字名片-6.png"></p>
<p>但我们觉得既然有了这个功能，那就让它更加有趣一些吧。
我们觉得分享不仅是把一段信息传递出去，这个行为也可以是一种轻巧、有趣的表达。</p>
<p>于是就有了这些玩法：</p>
<h2>1. 个性表达</h2>
<p>口令可以不只是链接的媒介。它可以是一句玩笑、一个暗号，也可以是一种情绪。它是你和被分享者之间的沟通方式。
它可以让每次分享，都成为一次有趣的互动，这也会让别人更容易记住你。
<img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_20.png" alt="好有链接 数字名片-8.png">
发挥你的想象力，试着给你的卡片绑定一个独特的中文口令吧！</p>
<h2>2. 互动游戏</h2>
<p>既然有了口令。那么是不是可以把这次分享互动变得更加有趣？
我们为此给卡片增加了隐私功能，你可以设置卡片仅可以通过口令发现。
<img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_16.png" alt="好有链接 数字名片-9.png">
那么此时，口令分享就成了一场寻宝游戏：将这张卡片的谜底，制作成下一张卡片的口令。用口令将不同的卡片关联起来，引导对方逐步探索，在一场轻量的互动游戏中更好的了解你。</p>
<h1>浏览器插件（即将上线）</h1>
<p>为了方便你更方便的获取分享的内容，我们为『好有链接』开发了浏览器插件。
在插件的搜索框中输入你获得的口令，对应的卡片就会被展示出来，并且可以快速访问其中的内容和链接。
<img src="https://links.haoyou.tech/Drawing_bed/Vivaldi.gif" alt="gif"></p>
<h1>使用方法</h1>
<p>目前，『好有链接』只上线了微信小程序版本。
如果你想体验它，可以在小程序中搜索『好有链接 数字名片』，或者扫描下方的小程序码。
<img src="https://links.haoyou.tech/Drawing_bed/Slide_16_9_-_25.png" alt="好有链接 数字名片-11.png"></p>
<h1>我们的计划</h1>
<p>『好有链接 数字名片』是我们第一个正式的产品，我们还在慢慢的打磨并优化它。
接下来我们会：</p>
<ol>
<li>完善合集功能</li>
<li>上线『好有链接 数字名片』的网页版</li>
<li>可以自定义属于你的短链 / 二维码</li>
</ol>
<p><strong>如果你想要帮助我们完善它</strong>
点击这里，可以给『好有链接 数字名片』提意见。
点击这里，可以关注我们的最新进度。
点击这里，访问我们的官网。
如果你想加入我们的用户群，可以在『好有链接 数字名片』中输入口令『好多用户』。</p>
<p>————————————————
原文作者：q_jin
转自链接：<a href="https://learnku.com/laravel/t/90417">https://learnku.com/laravel/t/90417</a>
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请保留以上作者信息和原文链接。</p>
</div>

好有链接 | 我们做了一款支持中文口令分享的多数字名片小程序

<div class="markdown-text"><p>🌍  <a href="https://fwfw.app">https://fwfw.app</a></p>
<p>📖 ​​项目简介​​
​​<a href="https://fwfw.app">FWFW</a> (Find Websites From World)​​ 是一个全球网站和工具发现平台，帮助用户探索来自世界各地的优秀网站、应用程序和数字工具。我们的使命是通过地理位置分类，让全球优质资源的发现变得更加简单和有趣。</p>
<p>✨ ​​核心特色​​</p>
<p>​​🗺️ 按地区智能导航​​
• 洲际分类：按亚洲、欧洲、美洲等大洲组织内容
• 国家细分：深入到具体国家和地区的本土化工具
• 区域特色：发现不同地区独有的创新解决方案
• 文化多样性：展示全球技术生态的丰富性</p>
<p>​​💰 Pay What You Want 灵活定价​​
• 自由定价：0−10 任意选择支付金额
• 免费发布：$0 免费提交（需人工审核）
• 即时发布：付费内容立即上线，无需等待
• 公平透明：没有隐藏费用，价格完全由您决定</p>
<p>​​🚀 快速产品发布​​
• 一键提交：简化的发布流程，几分钟内完成
• 智能分类：自动匹配最适合的分类和标签
• 即时生效：付费内容实时展示给用户
• SEO 优化：自动生成搜索引擎友好的页面</p>
<p>​​🔍 发现工具生态​​
• 多维搜索：按类别、标签、地区多重筛选
• 精准推荐：基于用户偏好的智能推荐
• 趋势洞察：实时热门工具和网站排行
• 社区驱动：用户评价和推荐系统</p>
<p>🛠️ ​​技术特点​​</p>
<p>​​现代化技术栈​​
• 前端框架：Next.js 14 + React 18
• 内容管理：Sanity CMS 集成
• 样式系统：Tailwind CSS + Radix UI
• 认证系统：NextAuth.js
• 支付集成：Stripe
• 部署优化：Docker + Vercel</p>
<p>​​高性能架构​​
• 服务端渲染：SEO 友好的 SSR/SSG
• 图片优化：Next.js 自动图片优化
• 缓存策略：多层缓存提升访问速度
• 响应式设计：完美适配各种设备</p>
<p>🌟 ​​使用场景​​</p>
<p>​​👨‍💻 开发者​​
• 发现新的开发工具和框架
• 了解不同地区的技术趋势
• 推广自己的开源项目
• 寻找技术合作伙伴</p>
<p>​​🏢 创业者​​
• 发布产品获得早期用户
• 研究全球市场竞争态势
• 寻找灵感和创业机会
• 低成本推广新产品</p>
<p>​​🎨 设计师​​
• 发现优秀的设计工具
• 收集全球设计灵感
• 展示个人作品集
• 了解设计趋势</p>
<p>​​📊 营销专家​​
• 研究全球营销工具
• 分析不同地区用户偏好
• 推广营销服务
• 建立品牌影响力</p>
<p>🚀 ​​快速开始​​</p>
<p>​​用户使用​​</p>
<p>浏览发现：访问 fwfw.app 开始探索
地区筛选：选择感兴趣的洲际或国家
分类浏览：按工具类型筛选内容
详细了解：点击工具查看详细信息
​​发布产品​​</p>
<p>注册账户：创建免费账户
提交信息：填写产品详细信息
选择定价：决定支付金额（0−10）
立即上线：付费内容即时发布
📈 ​​项目愿景​​
我们致力于构建一个真正全球化的工具发现平台，让世界各地的优秀创新不再被地理边界所限制。通过：
• 消除信息壁垒：让全球用户都能发现最好的工具
• 促进文化交流：通过技术工具了解不同文化
• 支持创新创业：为小团队提供低成本推广渠道
• 建设开放生态：打造包容、多元的技术社区</p>
</div>

做了一个全球导航站Find Websites From World

<div class="markdown-text"><p><a href="https://mcp.edgeone.site/share/bhH0oYYFf_MmS3KQ2f20H">使用Cursor技巧+AI+MCP生成的网页</a>
mcp: <a href="https://edgeone.ai/zh/document/173173997276819456?product=edgedeveloperplatform">https://edgeone.ai/zh/document/173173997276819456?product=edgedeveloperplatform</a>
欢迎浏览，期待大家的反馈和建议</p>
</div>

Cursor 使用技巧分享

<div class="markdown-text"><p>Mac App Store: <a href="https://apps.apple.com/us/app/if-gtd-for-professionals/id6460080040?mt=12">https://apps.apple.com/us/app/if-gtd-for-professionals/id6460080040?mt=12</a></p>
<p>我知道很多人不喜欢 Notion 那种 Markdown 非标准实现，只想要一个美的极简的，所见即所得的，高性能的，支持导入导出的，免费的 Markdown 编辑器，所以 IF 的目标很明确，就是满足这些通电，预览：</p>
<p>极简设计：
<img src="https://if.openages.com/_next/image?url=%2Fimages%2Fpreview%2Fnote%2F0_note.png&amp;w=2048&amp;q=100" alt="img_note"></p>
<p>支持所有 Markdown 标准：
<img src="https://if.openages.com/_next/image?url=%2Fimages%2Fpreview%2Fnote%2F1_note_picker.png&amp;w=2048&amp;q=100" alt="img_note"></p>
<p>导入导出：
<img src="https://if.openages.com/_next/image?url=%2Fimages%2Fpreview%2Fnote%2F3_note_options.png&amp;w=2048&amp;q=100" alt="img_note"></p>
<p>选项：
<img src="https://if.openages.com/_next/image?url=%2Fimages%2Fpreview%2Fnote%2F2_note_setting.png&amp;w=2048&amp;q=100" alt="img_note"></p>
<p>我学习了 VSCode 的架构，支持 VSCode 那样的分栏：
<img src="https://if.openages.com/_next/image?url=%2Fimages%2Fpreview%2Ffeatures%2F0_multi_tab.png&amp;w=2048&amp;q=100" alt="img_note"></p>
<p>还支持 Dark Mode：
<img src="https://if.openages.com/_next/image?url=%2Fimages%2Fpreview%2Ffeatures%2F3_dark_mode.png&amp;w=2048&amp;q=100" alt="img_note"></p>
<p>今天刚刚发布，Mac App Store: <a href="https://apps.apple.com/us/app/if-gtd-for-professionals/id6460080040?mt=12">https://apps.apple.com/us/app/if-gtd-for-professionals/id6460080040?mt=12</a> ，或者 Mac App Store 搜索“IF - GTD”也可以。</p>
<p>官网： <a href="https://if.openages.com">https://if.openages.com</a></p>
<p>明天生成几个 infinity plan 的激活码，我的 Vx：Mrhehero ，加我进入 IF 种子用户群，提供”专业人士“证明（程序员工牌就行），即可获得 infinity plan 的激活码，先到先得。</p>
</div>

程序员生涯第五年， Gap 一年，做了个 typora 免费替代的应用，叫做 IF

<div class="markdown-text"><p>在<a href="https://juejin.cn/post/7509709812857110582">前一篇</a>文章中，我们简要介绍了Vonajs的核心功能。在这里，我们再来看看Vonajs提供的<code>Model</code>能力，可以让我们用简洁、优雅的代码全方位操作数据库，比如，动态分表、软删除、多租户、动态数据源、二级缓存，等等</p>
<h2>创建Model</h2>
<p>比如，我们在模块 demo-student 中创建一个 Model: <code>student</code></p>
<h3>1. Cli命令</h3>
<pre class="prettyprint language-bash"><code>$ vona :create:bean model student --module=demo-student
</code></pre><h3>2. 菜单命令</h3>
<p>使用<code>菜单命令</code>可以显著提升开发体验，减少心智负担</p>
<pre class="prettyprint language-bash"><code>右键菜单 - [模块路径]: &#96;Vona Create&#x2F;Model&#96;
</code></pre><p><img src="//static.cnodejs.org/Fs_fg5v7SVAEbz0Fjft58NouEJ76" alt="1.png"></p>
<h2>Model定义</h2>
<pre class="prettyprint language-typescript"><code>import { BeanModelBase, Model } from &#x27;vona-module-a-database&#x27;;
import { EntityStudent } from &#x27;..&#x2F;entity&#x2F;student.ts&#x27;;

@Model({ entity: EntityStudent })
export class ModelStudent extends BeanModelBase&lt;EntityStudent&gt; {}
</code></pre><ul>
<li>继承自 BeanModelBase 基类</li>
<li>使用 Model 装饰器</li>
<li>设置对应的 entity</li>
</ul>
<h2>使用Model</h2>
<p>在 Vona 中使用 Model，支持<code>依赖注入</code>和<code>依赖查找</code>。推荐使用依赖查找，因为依赖查找可以让代码更加简洁、直观</p>
<h3>1. 本模块查找</h3>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    return await this.scope.model.student.select();
  }
}
</code></pre><ul>
<li><code>this.scope</code>：当前模块的scope对象</li>
<li><code>this.scope.model.student</code>：从scope中直接获取student model实例</li>
</ul>
<h3>2. 跨模块查找</h3>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    return await this.$scope.demoStudent.model.student.select();
  }
}
</code></pre><ul>
<li><code>this.$scope.demoStudent</code>：获取指定模块的scope对象</li>
<li><code>this.$scope.demoStudent.model.student</code>：从scope中直接获取student model实例</li>
</ul>
<h2>CRUD</h2>
<p>在这里，我们仅介绍基本的 CRUD 操作</p>
<h3>1. Create</h3>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async create(student: DtoStudentCreate): Promise&lt;EntityStudent&gt; {
    return await this.scope.model.student.insert(student);
  }
}
</code></pre><h3>2. Read</h3>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    return await this.scope.model.student.select();
  }
  
  async findOne(id: TableIdentity): Promise&lt;EntityStudent | undefined&gt; {
    return await this.scope.model.student.get({ id });
  }
}
</code></pre><ul>
<li>id: 类型为<code>TableIdentity</code>，支持<code>number</code>和<code>bignumber</code>两种字段类型</li>
</ul>
<h3>3. Update</h3>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async update(id: TableIdentity, student: DtoStudentUpdate) {
    return await this.scope.model.student.update({
      ...student,
      id,
    });
  }
}
</code></pre><h3>4. Delete</h3>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async remove(id: TableIdentity) {
    return await this.scope.model.student.delete({ id });
  }
}
</code></pre><h2>Knex Query Builder</h2>
<p>Vona Model 底层使用的是<a href="https://knexjs.org/">knex</a>。因此，也支持 knex 提供的<a href="https://knexjs.org/guide/query-builder.html">Query Builder</a></p>
<h3>1. builder</h3>
<p>调用 model 的 builder 方法获取 knex query builder 的实例</p>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    return await this.scope.model.student.builder().where(&#x27;name&#x27;, &#x27;tom&#x27;).orderBy(&#x27;name&#x27;);
  }
}
</code></pre><h3>2. builderSelect</h3>
<p>builderSelect 方法也是获取 knex query builder 的实例，与 builder 不同的是，builderSelect 支持<code>软删除</code>和<code>多实例/多租户</code></p>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    return await this.scope.model.student.builderSelect().where(&#x27;name&#x27;, &#x27;tom&#x27;).orderBy(&#x27;name&#x27;);
  }
}
</code></pre><h2>Model Options</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>entity</td>
<td>model对应的entity</td>
</tr>
<tr>
<td>table</td>
<td>model对应的表名</td>
</tr>
<tr>
<td>disableDeleted</td>
<td>是否禁用软删除，默认为false</td>
</tr>
<tr>
<td>disableInstance</td>
<td>是否禁用多实例/多租户，默认为false</td>
</tr>
<tr>
<td>clientName</td>
<td>指定数据源名称</td>
</tr>
<tr>
<td>cacheOptions</td>
<td>配置缓存参数，默认启用基于redis的缓存</td>
</tr>
</tbody>
</table>
<ul>
<li><code>table</code>:
<ul>
<li>如果为空，则从 entity 获取表名</li>
<li>可以指定函数，实现动态分表的能力</li>
</ul>
</li>
</ul>
<h2>App config配置</h2>
<p>如果通过<code>@Model</code>装饰器设置的Model options不符合业务需要，我们还可以在 App config 中修改 Model options的配置。比如，设置缓存参数</p>
<p><code>src/backend/config/config/config.dev.ts</code></p>
<pre class="prettyprint language-typescript"><code>&#x2F;&#x2F; onions
config.onions = {
  model: {
    &#x27;demo-student:student&#x27;: {
      disableDeleted: true,   &#x2F;&#x2F; 禁用软删除
      disableInstance: true,  &#x2F;&#x2F; 禁用多实例&#x2F;多租户
      cacheOptions: false,    &#x2F;&#x2F; 禁用缓存
      clientName: &#x27;mysql&#x27;,    &#x2F;&#x2F; 使用数据源：mysql
    },
  },
};
</code></pre><ul>
<li><code>demo-student:student</code>：模块名称+model名称</li>
</ul>
<h2>动态分表</h2>
<p>Model 支持<code>动态分表</code>的能力。比如，我们对 Order 进行分表处理，将每天的订单存入<code>order_YYYYMMDD</code>格式的数据表中</p>
<pre class="prettyprint language-typescript"><code>@Model({ table: (ctx: VonaContext, defaultTable: keyof ITableRecord) =&gt; {
  return &#96;${defaultTable}_${moment().format(&#x27;YYYYMMDD&#x27;)}&#96;;
} })
class ModelOrder {}
</code></pre><ul>
<li><code>ctx</code>: 可以基于当前请求的上下文来动态生成表名</li>
<li><code>defaultTable</code>: 默认的表名，从entity中获取</li>
</ul>
<h2>软删除, 多实例/多租户</h2>
<p>Model 默认自动启用软删除，当删除一条数据时，并不进行物理删除，而是设置字段 deleted 的值为 true</p>
<p>Model 默认支持<code>多实例/多租户</code>。对数据进行 CRUD 操作时，自动从 Request 上下文获取<code>实例Id</code>，并传入 sql 语句中</p>
<p>比如，执行<code>model.student.select()</code>，那么生成的 sql 如下：</p>
<pre class="prettyprint language-bash"><code>select &quot;demoStudent&quot;.&quot;id&quot; from &quot;demoStudent&quot; 
  where &quot;demoStudent&quot;.&quot;iid&quot; = 1 and &quot;demoStudent&quot;.&quot;deleted&quot; = false
</code></pre><ul>
<li><code>iid</code>：实例 Id</li>
<li><code>deleted</code>：软删除</li>
</ul>
<h3>临时禁用软删除</h3>
<p>我们也可以在执行 model 方法时临时指定<code>软删除</code>参数</p>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    return await this.scope.model.student.select({}, { disableDeleted: true });
  }
}
</code></pre><h2>数据源</h2>
<p>Vona 支持<code>多数据库</code>、<code>多数据源</code>。可以针对任何一个数据源调用 Model 的方法</p>
<h3>1. 默认数据源</h3>
<p>在默认情况下，Model 使用的是系统设置的缺省数据源</p>
<p><code>env/.env</code></p>
<pre class="prettyprint language-bash"><code>DATABASE_DEFAULT_CLIENT = &#x27;pg&#x27; # pg&#x2F;mysql
</code></pre><ul>
<li>系统当前默认使用的是<code>pg</code>数据源</li>
</ul>
<h3>2. 静态数据源</h3>
<ul>
<li>在 Model options 中指定数据源</li>
</ul>
<pre class="prettyprint language-typescript{1}"><code>@Model({ clientName: &#x27;mysql&#x27; })
class ModelBook {}
</code></pre><ul>
<li><code>clientName</code>：需要指定的数据源名称</li>
</ul>
<ul>
<li>在 App config 中指定数据源</li>
</ul>
<p><code>src/backend/config/config/config.dev.ts</code></p>
<pre class="prettyprint language-typescript"><code>&#x2F;&#x2F; onions
config.onions = {
  model: {
    &#x27;demo-student:student&#x27;: {
      clientName: &#x27;mysql&#x27;,    &#x2F;&#x2F; 使用数据源：mysql
    },
  },
};
</code></pre><h3>3. 动态数据源</h3>
<p>我们还可以在代码中动态指定数据源</p>
<pre class="prettyprint language-typescript"><code>class ServiceStudent {
  async findAll(): Promise&lt;EntityStudent[]&gt; {
    const modelMysql = this.scope.model.student.newInstance(&#x27;mysql&#x27;);
    return await modelMysql.select();
  }
}
</code></pre><ul>
<li><code>newInstance</code>: 传入数据源名称，既可创建新的model实例</li>
</ul>
<h2>缓存</h2>
<p>Vona Model 默认启用了缓存，从而使系统在默认情况下就具备非常高的性能</p>
<p>Model 支持<code>二级缓存</code>/<code>mem缓存</code>/<code>redis缓存</code>。默认使用的是<code>redis缓存</code>。因为<code>redis缓存</code>可以在分布式场景下保持数据的一致性，而<code>mem缓存</code>在分布式场景下同步数据有延时。如果业务数据变更不频繁，可以使用<code>mem缓存</code>或者<code>二级缓存</code>，从而获得更高性能</p>
<p>如何设置缓存配置：</p>
<h3>1. 禁用缓存</h3>
<pre class="prettyprint language-typescript"><code>@Model({ cacheOptions: false })
class ModelStudent {}
</code></pre><h3>2. 在 Model options 中配置缓存</h3>
<pre class="prettyprint language-typescript"><code>@Model({ cacheOptions: {
  mode: &#x27;all&#x27;, &#x2F;&#x2F; all&#x2F;mem&#x2F;redis
  mem: {
    max: 500,
    ttl: 5 * 1000, &#x2F;&#x2F; 5s
  },
  redis: {
    ttl: 5 * 1000, &#x2F;&#x2F; 5s
  },
} })
class ModelStudent {}
</code></pre><ul>
<li>mode：缓存模式：支持<code>二级缓存</code>/<code>mem缓存</code>/<code>redis缓存</code></li>
<li>mem：<code>mem缓存</code>配置</li>
<li>redis：<code>redis缓存</code>配置</li>
</ul>
<h3>3. 在 App config 中配置缓存</h3>
<p>我们也可以在App config中根据业务需要修改Model的缓存配置</p>
<p><code>src/backend/config/config/config.dev.ts</code></p>
<pre class="prettyprint language-typescript"><code>&#x2F;&#x2F; onions
config.onions = {
  model: {
    &#x27;demo-student:student&#x27;: {
      cacheOptions: {
        mode: &#x27;all&#x27;, &#x2F;&#x2F; all&#x2F;mem&#x2F;redis
        mem: {
          max: 500,
          ttl: 5 * 1000, &#x2F;&#x2F; 5s
        },
        redis: {
          ttl: 5 * 1000, &#x2F;&#x2F; 5s
        },
      }
    },
  },
};
</code></pre><h2>结语</h2>
<p>Vonajs已开源：<a href="https://github.com/vonajs/vona">https://github.com/vonajs/vona</a></p>
<p>Vonajs作者正在B站直播撰写技术文档，工作日每晚8:30，欢迎围观：<a href="https://space.bilibili.com/454737998">濮水代码</a></p>
<p>开发一个功能完备的Nodejs框架固然费时费力，但是撰写技术文档更加费尽心思。写文档的过程同时也是再次梳理思路的过程，即便是围观，也有利于加深对框架设计的理解，探索不一样的架构设计路径。目前已完成<a href="https://vona.js.org">部分文档</a>，更多精彩正在逐步展开，欢迎参与</p>
</div>

使用这个model操作数据库，一爽到底

<div class="markdown-text"><p>使用 websocket + vue2 即可完成一个很有意思的在线游戏作品。
你画我猜，相信大家对这个游戏都很熟悉。<br>
我用Vue2 + mint-ui + nodejs + websocket 实现了你画我猜这个游戏。<br>
建议移动端打开效果更佳(可扫下方二维码)，PC端需要使用谷歌开发者模式，然后使用移动调试工具，才可以正常使用（主要是一些touch事件，pc不支持）。</p>
<p>大家可以拉上一两个人，来开个房间试试看，体验体验效果。<br>
<a href="http://yd.diamondfsd.com">http://yd.diamondfsd.com</a><br>
<img src="https://file.diamondfsd.com/img/ddeea735-598e-4e1e-b262-2d133f813303-" alt="alt"></p>
<p>主要实现了以下这些功能</p>
<h2>大厅功能</h2>
<p><strong>个人信息显示</strong><br>
顶部显示个人昵称，可以修改<br>
暂时不支持上传头像，头像用昵称第一个字母代替<br>
暂时使用 <code>localStorage</code> 储存基本基本个人信息（昵称,token等）<br>
实施更新房间列表，在线人数等信息<br>
<img src="https://file.diamondfsd.com/img/292c2c29-44b1-45fd-b9dc-7a2f69953c78n" alt="alt"></p>
<p><strong>创建游戏房间</strong><br>
房间名称:<br>
房间类型：公开（可以在游戏大厅被看到），私有（可以通过游戏大厅左上角查找房间号进入）</p>
<p><strong>加入房间</strong><br>
公开房间加入： 直接在首页游戏大厅的房间列表里面点击加入即可<br>
私密房间加入： 扫秒二维码或者输入房间号 （二维码由客户端使用js生成，暂未实现）<br>
房间人满后不可加入<br>
房间游戏开始后不可加入<br>
后期可加入观战功能<br>
当游戏人数大于等于2或者以上的时候，可以开始游戏。<br>
房间内可以聊天，默认第一个进入房间的人是房主，房主可以开始游戏。<br>
<img src="https://file.diamondfsd.com/img/042c9bd1-1c7b-49c1-8b46-d3e987869d178" alt="alt"></p>
<h2>游戏主功能</h2>
<p>使用 <code>canvas</code> 做画布，通过<code>websocket</code>实时发送动作，全图数据来实现动态笔迹，和最终图片一致性。<br>
可以修改画笔颜色，粗细，进行撤销，恢复，清空等操作。<br>
<img src="https://file.diamondfsd.com/img/a425d560-e7de-4c20-ab1c-9e1f9b868690d" alt="alt"><br>
<img src="https://file.diamondfsd.com/img/5c373f24-32da-4766-b96b-ac0f8a184b37B" alt="alt"><br>
每轮游戏结束后公布答案，预置了一些快捷短语可以恢复。 游戏过程中 作画者 不可以发文字聊天，其他玩家通过发文字猜答案。<br>
第一个猜对的 3 分， 第二个猜对的 2 分。 剩下猜对的1分。 第一个猜完后，游戏时间缩短为 30 秒。每个人猜对后，作画者+1分</p>
<p><img src="https://file.diamondfsd.com/img/39b12c5f-d08a-41f9-a80d-9f32b0b22c6eP" alt="alt"></p>
<h2>项目结构</h2>
<p>这个游戏由两个项目组成，一个是前端，一个是服务端<br>
前端 <a href="https://github.com/k55k32/you-draw-i-guess">github-you-draw-i-guess</a><br>
前端项目由  Vue2 + mint-ui + vuex + vue-router 完成的单页面app。  使用 <code>websocket</code> 和服务端进行通讯，所有的接口都由 <code>websocket</code> 完成</p>
<p>WebSocket 服务端  <a href="https://github.com/k55k32/ydig-websocket">github-ydig-websocket</a><br>
服务端主要就是用了 <code>ws</code> 这个库，和 <code>babel</code> 来支持一些 es6 的语法来完成的。<br>
服务端承载了所有的游戏相关逻辑和一些数据。 但是因为没有经过足够的测试，肯定还是有不少bug的。</p>
<p>另外，没有做数据储存，所有的数据都储存在当次运行的服务内存里，所以服务重启后，所有的数据就清空了，哈哈，主要是我懒，就没做数据储存了。</p>
<p>这个也就简单介绍一下这个项目，以及开放出源代码供大家参考研究。那个服务器承载量不大，卡卡的也不要见怪。另外有什么bug 大家可以在 github 上提 issue。 还有就是，欢迎大家贡献代码，虽然真个项目也是我乱写的，还是希望有人能看得懂呀。  :)</p>
<h2>项目源码</h2>
<p>前端: <a href="https://github.com/k55k32/you-draw-i-guess">github-you-draw-i-guess</a><br>
WebSocket 服务端:  <a href="https://github.com/k55k32/ydig-websocket">github-ydig-websocket</a><br>
在线演示地址: <a href="http://yd.diamondfsd.com">http://yd.diamondfsd.com</a><br>
在线演示二维码: <img src="https://file.diamondfsd.com/img/ddeea735-598e-4e1e-b262-2d133f813303-" alt="alt"></p>
<p>个人博客: <a href="https://diamondfsd.com">https://diamondfsd.com</a></p>
<h2>总结</h2>
<p>从整个项目来说，前端，后端，UI，业务逻辑，都是我苦思冥想做出来的。刚开始是想做微信版的，使用微信登录来储存用户数据，可是后来发现必须要企业服务号才能申请到相关接口。然后项目就停了一段时间。<br>
这段时间比较空闲了，就想了一个简单的办法，既然是一个开放式的游戏，就根本不需要登录呀。所以变成了人人进入就可以玩的一个项目。 可以从微信打开，qq打开，微博打开，只要支持h5的浏览器都可以打开。
欢迎大家对项目的各方面做出的评价。</p>
</div>

Vue2 + Nodejs  + WebSocket 完成你画我猜多人在线游戏

<div class="markdown-text"><p>最近用 Claude 写了一个游戏站点，有40款好玩的游戏，每个都很有特色</p>
<p><a href="https://puzzles-game.com">40款游戏在线免费玩</a></p>
<p>有好多好玩的，比如
<a href="https://puzzles-game.com/zh/game/map">在线用4种颜色染色地图</a></p>
<p><img src="//static.cnodejs.org/FqsArL4Dy7-lFC3V1bze1TpBa2O8" alt="Xnip2025-06-22_11-27-05.png"></p>
</div>

用 nextjs 和 claude 重写了一个益智游戏站点

<div class="markdown-text"><p>大家好，我是一名独立开发者，给大家分享一下我的一些独立产品：</p>
<ul>
<li>
<p><a href="https://tempmail365.com">Temp Mail</a>
访问地址：<a href="https://tempmail365.com">https://tempmail365.com</a></p>
</li>
<li>
<p><a href="https://twitter-video-downloader.com">Twitter Video Downloader</a>
访问地址：<a href="https://twitter-video-downloader.com">https://twitter-video-downloader.com</a></p>
</li>
<li>
<p><a href="https://base64.best">base64 decode</a>
访问地址：<a href="https://base64.best">https://base64.best</a></p>
</li>
</ul>
</div>

个人独立产品分享

<div class="markdown-text"><p>今天看到一篇赞美 Postgres 的文章：<a href="https://dev.to/shayy/postgres-is-too-good-and-why-thats-actually-a-problem-4imc">Postgres is Too Good (And Why That’s Actually a Problem)</a> ，显然是非常吸引眼球的，作者用 PG 实现了需要用到的所有微服务。</p>
<p>做 AFFiNE 我们是用 Redis 的 pub/sub 实现的 Job Queue，所以想参考一下用 Postgres 实现对比看看。</p>
<h2>直接问 ChatGPT 怎样实现</h2>
<blockquote>
<p>基于 Postgres 的 LISTEN/NOTIFY 实现任务队列服务</p>
</blockquote>
<p><a href="https://chatgpt.com/share/685527b8-724c-8010-9e5a-1aac521a7acc">https://chatgpt.com/share/685527b8-724c-8010-9e5a-1aac521a7acc</a></p>
<h2>表结构</h2>
<p><code>init.sql</code></p>
<pre class="prettyprint language-sql"><code>CREATE TABLE tasks (
  &quot;id&quot; SERIAL PRIMARY KEY,
  &quot;type&quot; TEXT NOT NULL,
  &quot;payload&quot; JSONB,
  &quot;status&quot; TEXT NOT NULL DEFAULT &#x27;pending&#x27;,
  &quot;created_at&quot; TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  &quot;updated_at&quot; TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  &quot;processed_at&quot; TIMESTAMPTZ(3)
);
</code></pre><h2>Job Queue 基本操作</h2>
<h3>添加任务并广播通知</h3>
<pre class="prettyprint language-sql"><code>INSERT INTO tasks (type, payload) VALUES (&#x27;send_email&#x27;, &#x27;{&quot;to&quot;: &quot;test@example.com&quot;}&#x27;);

NOTIFY task_queue, &#x27;new_task&#x27;;
</code></pre><h3>监听任务消息并拉取任务</h3>
<p>监听任务消息</p>
<pre class="prettyprint language-ts"><code>await jobListener.query(&#x27;LISTEN task_queue&#x27;);

jobListener.on(&#x27;notification&#x27;, async (msg) =&gt; {
  if (msg.channel === &#x27;task_queue&#x27;) {
    &#x2F;&#x2F; 在这里拉取任务
  }
});
</code></pre><p>拉取任务 SQL</p>
<pre class="prettyprint language-sql"><code>UPDATE tasks
SET status = &#x27;processing&#x27;, processed_at = NOW(), updated_at = NOW()
WHERE id = (
  SELECT id FROM tasks WHERE status = &#x27;pending&#x27;
  ORDER BY created_at ASC LIMIT 1
  FOR UPDATE SKIP LOCKED
)
RETURNING *;
</code></pre><h2>可运行的代码</h2>
<p>先启动一个 Postgres 测试服务</p>
<pre class="prettyprint language-bash"><code>docker run --name pg-container-job-queue-demo \
  -e POSTGRES_USER=postgres \
  -e POSTGRES_PASSWORD=test123123 \
  -e POSTGRES_DB=mydb \
  -v $(pwd)&#x2F;init.sql:&#x2F;docker-entrypoint-initdb.d&#x2F;init.sql \
  -p 5432:5432 \
  -d postgres:16
</code></pre><p>启动 <code>demo.ts</code> 代码，每 5 秒触发一个任务，并打印结果</p>
<pre class="prettyprint language-bash"><code>node demo.ts
</code></pre><h2>完整代码</h2>
<p>请移步 <a href="https://github.com/fengmk2/fengmk2.github.com/tree/master/blog/2025/job-queue-on-postgres">https://github.com/fengmk2/fengmk2.github.com/tree/master/blog/2025/job-queue-on-postgres</a></p>
<h2>有爱</h2>
<p>希望本文对你有用 ^_^</p>
</div>

基于 Postgres 实现一个 Job Queue

<div class="markdown-text"><h2>预览效果</h2>
<p><img src="https://github.com/OXOYO/Flying-Bird-Wallpaper/raw/main/docs/fbw_search.png" alt></p>
<h2>Github</h2>
<p><a href="https://github.com/OXOYO/Flying-Bird-Wallpaper">飞鸟壁纸</a>，欢迎大佬们 star、fork、PR</p>
<h2>核心功能</h2>
<ol>
<li>
<p><strong>多源壁纸</strong> - 集成NASA、Unsplash、Pixabay等多个优质壁纸源，支持自定义壁纸源插件，同时支持本地目录图片。</p>
</li>
<li>
<p><strong>智能搜索</strong> - 支持关键词搜索与智能分类，快速定位心仪壁纸。</p>
</li>
<li>
<p><strong>一键管理</strong> - 一键设置壁纸、收藏图片、本地保存，操作简便高效。</p>
</li>
<li>
<p><strong>桌面悬浮球</strong> - 快速切换壁纸功能，无需打开主界面。</p>
</li>
<li>
<p><strong>H5端</strong> - 支持手机端访问，随时随地浏览壁纸。</p>
</li>
<li>
<p><strong>多语言支持</strong> - 内置多语言界面，满足国际化需求。</p>
</li>
<li>
<p><strong>自动更新</strong> - 自动检测更新，保持应用最新状态。</p>
</li>
<li>
<p><strong>跨平台兼容</strong> - 完美支持Windows和macOS系统。</p>
</li>
<li>
<p><strong>定时任务</strong> - 支持设置定时更换壁纸、刷新目录、下载资源，自动切换桌面背景。</p>
</li>
<li>
<p><strong>词库功能</strong> - 通过分词自动生成词库，方便用户快速搜索关键词。</p>
</li>
<li>
<p><strong>历史记录</strong> - 记录使用过的壁纸，方便回顾和重复使用。</p>
</li>
<li>
<p><strong>收藏功能</strong> - 收藏喜爱的壁纸，建立个人壁纸库。</p>
</li>
<li>
<p><strong>隐私空间</strong> - 提供隐私保护的壁纸存储空间，确保个人隐私。</p>
</li>
<li>
<p><strong>图片预览</strong> - 支持壁纸预览功能，查看壁纸细节和效果。</p>
</li>
</ol>
<h2>实验室功能</h2>
<ol>
<li><strong>动态壁纸</strong> - 支持动态壁纸，为桌面增添生动效果。</li>
<li><strong>网页壁纸</strong> - 支持将网页设置为壁纸，创意无限。</li>
</ol>
<h2>技术栈</h2>
<ul>
<li><strong>Electron框架</strong> - 确保跨平台兼容性</li>
<li><strong>Vue 3前端</strong> - 构建现代化用户界面</li>
<li><strong>模块化设计</strong> - 提高应用稳定性</li>
<li><strong>插件系统</strong> - 支持扩展新壁纸源</li>
<li><strong>SQLite数据库</strong> - 本地存储用户数据</li>
<li><strong>WebSocket通信</strong> - 实现前后端实时交互</li>
</ul>
<h2>系统要求</h2>
<ul>
<li>Windows 10及以上版本</li>
<li>macOS 10.13及以上版本</li>
</ul>
</div>

学习Electron顺便写了一个免费的壁纸软件

<div class="markdown-text"><h1>Demo练习场</h1>
<p>Vonajs 提供了一个 Demo 练习场的功能，允许我们非常方便、快捷的对代码做测试，对想法做验证</p>
<h2>步骤</h2>
<p>简而言之，Demo练习场的使用只需两步：第一步写代码，第二步执行终端命令。具体说明如下：</p>
<h3>1. 新建demo文件</h3>
<p>我们需要在项目中新建源码文件：<code>src/backend/demo/index.ts</code>。当前，我们并不需要手工创建此文件，而是执行以下命令，自动创建该文件：</p>
<pre class="prettyprint language- bash"><code>$ npm run demo
</code></pre><h3>2. 编写测试代码</h3>
<p>在文件<code>demo/index.ts</code>中，我们写入测试代码：</p>
<pre class="prettyprint language- diff"><code>export async function main(app: VonaApplication, _argv: IArgv) {
+  console.log(&#x27;server listen: &#x27;, app.config.server.listen);
}
</code></pre><h3>3. 执行demo文件</h3>
<p>由于demo文件已经存在，再次执行同样的终端命令，就会自动加载此demo文件，并运行</p>
<pre class="prettyprint language- bash"><code>$ npm run demo
</code></pre><h2>更多例子</h2>
<h3>1. 模拟请求的上下文环境ctx</h3>
<pre class="prettyprint language- diff"><code>export async function main(app: VonaApplication, _argv: IArgv) {
+  await app.bean.executor.mockCtx(async () =&gt; {
+    &#x2F;&#x2F; do something in ctx
+  });
}
</code></pre><ul>
<li>app.bean: 全局ioc容器</li>
<li>app.bean.executor: 从ioc容器获取全局bean实例<code>executor</code>。executor提供一组工具方法，其中，mockCtx用于创建一个模拟的上下文环境ctx</li>
</ul>
<h3>2. 访问Api</h3>
<p>比如我们访问首页 Api：</p>
<pre class="prettyprint language- diff"><code>export async function main(app: VonaApplication, _argv: IArgv) {
  await app.bean.executor.mockCtx(async () =&gt; {
+    const homeBody = await app.bean.executor.performAction(&#x27;get&#x27;, &#x27;&#x2F;&#x2F;&#x27;);
+    console.log(homeBody); &#x2F;&#x2F; Hello Vona!
  });
}
</code></pre><ul>
<li>performAction用于直接访问Api，method参数和path参数都支持类型提示</li>
</ul>
<p>我们也可以模拟中文的 ctx，然后访问首页 Api：</p>
<pre class="prettyprint language- diff"><code>export async function main(app: VonaApplication, _argv: IArgv) {
  await app.bean.executor.mockCtx(async () =&gt; {
+    const homeBody = await app.bean.executor.performAction(&#x27;get&#x27;, &#x27;&#x2F;&#x2F;&#x27;);
+    console.log(homeBody); &#x2F;&#x2F; 您好, Vona!
+  }, { locale: &#x27;zh-cn&#x27; });
}
</code></pre><h3>3. 模拟登录和退出登录</h3>
<p>我们也可以模拟登录，然后执行业务逻辑，最后再退出登录</p>
<pre class="prettyprint language- diff"><code>export async function main(app: VonaApplication, _argv: IArgv) {
  await app.bean.executor.mockCtx(async () =&gt; {
+    &#x2F;&#x2F; signin as user: admin
+    await app.bean.passport.signinMock();
+    &#x2F;&#x2F; do something
+    &#x2F;&#x2F; signout
+    await app.bean.passport.signout();
  });
}
</code></pre><h2>结语</h2>
<p>Vonajs已开源：<a href="https://github.com/vonajs/vona">https://github.com/vonajs/vona</a></p>
<p>Vonajs作者正在B站直播撰写技术文档，工作日每晚8:30，欢迎围观：<a href="https://space.bilibili.com/454737998">濮水代码</a></p>
<p>开发一个功能完备的Nodejs框架固然费时费力，但是撰写技术文档更加费尽心思。写文档的过程同时也是再次梳理思路的过程，即便是围观，也有利于加深对框架设计的理解，探索不一样的架构设计路径。目前已完成部分文档，更多精彩正在逐步展开，欢迎参与</p>
</div>

快来玩玩便捷、高效的Demo练习场

<div class="markdown-text"><p>用的ejs模板引擎，但是在view下没找到layout.ejs，直接加了一个然后指定 layout: ‘layout’ 也没生效，这个要怎么处理呢？</p>
</div>

ejs里面怎么使用layout呢？

<div class="markdown-text"><p>如何排查是什么原因呢，内存碎片？ 碎的也太离谱了吧，，申请内存的库也改成了jemalloc。
难道和nodejs有关？ 本身就碎片化严重？</p>
</div>

咨询个nodejs内存占用问题， 2c4g上的一个node服务，堆内存基本97m左右，extenal 基本是3m左右，然而rss占用竟然达到了350m

⚡ MCP协议进化论：HTTP Streamable凭什么让Anthropic果断抛弃SSE？

<div class="markdown-text"><p>旨在帮助开发者快速掌握 <code>Ethers.js</code> 的使用方法。</p>
<p>你不一定要学习 <code>Ethers.js</code>，你也可以了解 <code>WEB3</code> 和 <code>如何与以太坊进行交互</code>。</p>
<p>在线阅读教程可以直接运行与<code>以太坊</code>进行交互，方便你 <code>零</code> 代码编写学习。</p>
<p><a href="https://github.com/xjh22222228/ethers-tutorial">GitHub Ethers.js文档教程</a></p>
</div>

🔥🔥🔥 最详细的 Ethers.js web3 入门教程 🔥🔥🔥

<div class="markdown-text"><p><img src="//static.cnodejs.org/Ft7SzCgvPwQOasW7rO_XII5Nb0Bj" alt="devtrice-org.jpg"></p>
<p>网站： <a href="https://qr-x.devtrice.dev/">https://qr-x.devtrice.dev</a>
这个 npm 库是一个用于生成二维码的开源库 (open source library)，其主要功能包括：</p>
<p>☑️ 可以集成到当前端 流行的前端库/框架中。目前支持ReactJS、VueJS、SolidJS 以及VanillaJS。</p>
<p>☑️ 可以自定义二维码的形状，设计自己喜欢的样式。</p>
<p>☑️ 支持二维码的颜色，可以是纯色或者渐变色，并且支持线性和径向两种渐变风格。</p>
<p>☑️ 可以在二维码的背景中添加图片，以适应你的品牌需求。</p>
<p>我们的 Github
<a href="https://github.com/devtrice/qr-x">https://github.com/devtrice/qr-x</a>
所以如果大家 需要 QR code 相关的 npm  库的话，这个可能会给大家 巨大的帮助。
<a href="https://qr-x.devtrice.dev/">https://qr-x.devtrice.dev</a></p>
</div>

测试Next SSR渲染