Wyatex`s blog

用过unplugin-icons的小伙伴应该都对这个插件不陌生，这是一个用来导入svg图标成为各个框架组件的一个插件。

原文： TypeScript 5.5: A Blockbuster Release

我们TypeScript开发人员是一群幸运的人。虽然有些语言（Python，
JavaScript）每年发布一次，甚至每三年发布一次（
C++）甚至更少，但我们每年都能获得四个新版本的TypeScript。。TypeScript 5.5于2024年6月20日发布，它确实是一个重磅更新。让我们一起来看看。

前情提要：前端插件只支持esm模式但是项目不支持esm导致报错？别慌@swc/register来救你！

虽然@swc/register挺好用的，但是安装依赖时还要下载一个十几MB的swc编译器，我觉得挺大的，网速慢的情况下可能要花费挺长时间。

在浏览开源项目的时候发现了一个工具叫jiti，查了一下发现npm下载量远超@swc/register，而且被很多出名项目使用，比如unbuild工具的stub模式就使用了jiti来运行时转译js、ts。

今天晚上在技术交流群看到有小伙伴求助，说是有一个编程题，一看是ast相关的题目。我想之前学了ast都没怎么玩过，这不来个课后作业了吗？然后打开我的ide kuku写了一遍。毕竟是萌新嘛，就借助了AI帮忙写写。

这里依然请出我们的AI编程小助手：DeepSeek-Coder-V2

题目是，给一个对象，生成对应的TS代码：

1
2
3
4
5
6

{
    "Pools": {
        "requestType": "QueryPoolsRequest",
        "responseType": "QueryPoolsResponse"
    }
  }

生成：

1
2
3
4
5
6
7
8
9
10
11
12

export interface UsePoolsQuery<TData> extends ReactQueryParams<QueryPoolsResponse, TData> {
    request?: QueryPoolsRequest;
}
const usePools = <TData = QueryPoolsResponse,>({
    request,
    options
}: UsePoolsQuery<TData>) => {
    return useQuery<QueryPoolsResponse, Error, TData>(["poolsQuery", request], () => {
        if (!queryService) throw new Error("Query Service not initialized");
        return queryService.pools(request);
    }, options);
};

最近在跟着Rust语言圣经学Rust，但是学完之后根本记不住那么多类型，想重新回去记下笔记又发现很多类型分散在各章实在不好找。然后突然想到现在AI都这么强了，何不向AI这个好老师学习一下呢。然后我就掏出我平时常用的DeesSeek，这个是我觉得最强的国产AI了（懒得折腾GPT4捏而且免费又够用）。下面就顺手记下AI老师的教学吧，以供后面回来查阅。

前情提要：前段时间在用taro+unocss写项目，发现unocss更新了，然后满怀期待的更新到最新版本，然后问题就来了（悲）

遇到问题

当你将unocss更新到最新之后启动，你可能会看到如下报错：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

D:\xxx\node_modules\.pnpm\@unocss+config@0.60.2\node_modules\@unocss\config\dist\index.mjs:1
import { resolve, dirname } from 'node:path';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1124:15)
    at Module._compile (node:internal/modules/cjs/loader:1160:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
    at Object.newLoader [as .mjs] (D:\projects\xxx\node_modules\.pnpm\pirates@4.0.6\node_modules\pirates\lib\index.js:121:7)
    at Module.load (node:internal/modules/cjs/loader:1074:32)
    at Function.Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1098:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at Object.<anonymous> (D:\projects\xxx\node_modules\.pnpm\@unocss+webpack@0.60.2_webpack@5.91.0\node_modules\@unocss\webpack\dist\index.cjs:10:16)
D:\projects\xxx:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  xxx@0.0.1 dev:weapp: `npm run build:weapp -- --watch --env production`
Exit status 1

经过查看unocss的源码和commit可以得知，新版本去掉了cjs打包，而我们的taro项目还是用的cjs模式，然后尝试将package.json切换到esm模式，又出现了别的报错！（悲）

在搜索taro的issue列表没发现其他人提到之后，无奈之下只能提交issue到taro的仓库看看有没有解决办法，然后切回旧版本用着。

几天之后，收到一位小伙伴提供的解决方案（应该是taro的维护者），他提到这样去解决：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 在配置文件index.js
import { createSwcRegister, getModuleDefaultExport } from '@tarojs/helper';

const config = {
  mini: {
    webpackChain(chain) {
      createSwcRegister({
        only: [filePath => filePath.includes('@unocss')]
      });
      const UnoCSS = getModuleDefaultExport(require('@unocss/webpack'));
      chain.plugin('unocss').use(UnoCSS());
      );
    }
  },
  h5: {// 同上操作}
}

然后运行，神奇的运行起来了！！！

解决原理

本着打破砂锅问到底的精神，我想去研究一下到底大概是什么原理，我找到了@taro/helper这个包的源码，其中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//https://github.com/NervJS/taro/blob/main/packages/taro-helper/src/swcRegister.ts
export default function createSwcRegister ({ only, plugins }: ICreateSwcRegisterParam) {
  const config: Record<string, any> = {
    only: Array.from(new Set([...only])),
    jsc: {
      parser: {
        syntax: 'typescript',
        decorators: true
      },
      transform: {
        legacyDecorator: true
      }
    },
    module: {
      type: 'commonjs'
    }
  }

  if (plugins) {
    config.jsc.experimental = {
      plugins
    }
  }

  require('@swc/register')(config)
}

// https://github.com/NervJS/taro/blob/main/packages/taro-helper/src/utils.ts
export const getModuleDefaultExport = exports => exports.__esModule ? exports.default : exports

看起来一个函数是创建SwcRegister，另一个是判断是否esm模块再获取匿名导出。

创建SwcRegister函数的主要逻辑只是在接受一下参数和设置一下默认参数，看起来是使用ts解析器将源码转译成cjs代码，然后调用了一下@swc/register，然后我就去npm看了一下这个包是干啥的。

可以看到它的介绍：One of the ways you can use swc is through the require hook. The require hook will bind itself to node’s require and automatically compile files on the fly.使用swc的一种方法是通过require钩子。require钩子将自己绑定到node的require，并自动动态编译文件。

很直白了，就是我们使用require的时候，使用swc将代码转译一下再运行。

再简单耍一下这个工具

为了尝试一下这个工具是不是真的能编译ts成cjs，我们创建个空白文件夹：

1
2

pnpm init
pnpm add @swc/register

创建一个ts文件：

1
2

// lib.ts
export const add = (a: number, b: number) => a + b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const config = {
  only: [() => true], // 简单的设置成全部编译
  jsc: {
    parser: {
      syntax: 'typescript',
      decorators: true,
    },
    transform: {
      legacyDecorator: true,
    },
  },
  module: {
    type: 'commonjs',
  },
}

require('@swc/register')(config)

const { add } = require('./lib')

console.log(add(1, 2))

执行 node main.js ，命令行正常输出 3 ！nice，完美运行！

这下妈妈再也不怕别的包支持cjs啦！

今天晚上看托尼老师的直播提到了这个东西，感觉有点意思，就记录一下吧

原文：Introducing ESLint Config Inspector

这是一个帮助您理解和检查 ESLint 扁平配置文件的可视化工具。

截至 ESLint v9.0.0，新的配置系统已经达到通用可用性，带来了许多好处。配置文件现在更容易管理和更透明地组合。然而，当您的配置复杂或来自多个来源时，了解哪些规则对特定文件启用和禁用仍然可能不简单。这就是为什么我们很高兴地介绍 ESLint 配置检查器，这是一个可视化和交互式工具，帮助您更好地理解和检查您的配置文件。

原文来自JetBrains公众号：使用 Rocket 和 RustRover 编写您的第一个 Rust Web 应用 | 实用教程

如果您像我一样刚刚开始使用 Rust，您的经验可能部分或绝大部分来自于其他生态系统。面对引起热议的 Rust 新技术堆栈，您也许会感觉无从下手。别担心， 我们特别为您准备了一份教程。在这篇博文中，我们将使用 Rocket 库构建一个在 Rust 后端上运行的简单 HTML Web 应用程序。

首先，下载我们专为 Rust 社区设计的最新 IDE RustRover。您也需要使用 RustRover 或社区入门指南安装 Rust。

在本教程结尾，我们将得到一个托管静态文件的 Web 应用程序、一个具有多个端点的应用程序、服务器端模板渲染、闪现消息传递和请求/响应流。我们先来看将使用的库，然后再深入研究构建示例应用程序的细节。

Farm RFC：

1. Farm 核心架构设计
2. Farm 运行时模块管理
3. Farm 部分打包

Farm RFC：

1. Farm 核心架构设计
2. Farm 运行时模块管理
3. Farm 部分打包