想冲刺的Q4

转眼间，已经迎来 12 月了，马上 2021 年也将过完。
回顾这一年，技术上面带来的深入并没有很多，更多的可能是一些思路上的深入吧……
或许这是给自己技术上没有深入的一个借口，同样日语的学习也停滞不动，好难提起精神来苦读一番……

这个月仍然是负责内部的低代码平台开发工作，因为平台组件开发需要编写额外的代码，所以平台的构建产物需要把这块内容去掉的，那么编写了一个基于 unplugin 的插件工具，用于清洗组件内平台运行层的代码。

从学习 unplugin 相关插件中学习到使用 Yarn2 可以带来的 Workspaces 工作模式，因为开发环境导致无法在内网实践这个 Yarn2 的特性，也有可能是因为自己的姿势不对所导致，不过没关系，我来简单的回顾一下这个特性。

比如需要发布的工具内含示例，那么示例又引用到了外层的发布内容，按照以往的方式，我们会选用相对路径、或者按照已在线上发布的版本、或者 Lerna 来进行管理，但是我发现 Yarn2 的工作区模式实在是方便（虽然我没有实践）

{
  "dependencies": {
    "star": "workspace:*",
    "caret": "workspace:^",
    "tilde": "workspace:~",
    "range": "workspace:^1.2.3",
    "path": "workspace:path/to/baz"
  }
}

只需要这样配置即可转换成你想要的版本形式，转换结果如下：

{
  "dependencies": {
    "star": "1.5.0",
    "caret": "^1.5.0",
    "tilde": "~1.5.0",
    "range": "^1.2.3",
    "path": "1.5.0"
  }
}

因为没有实践，官方的文档链接请点击 Workspaces

同样还学习到 Node.js 12.7 的 Exports Field 语法，此语法可算是谁用谁知道，谁用谁舒服呀！

比如说有这样一段 package.json 配置项

{
  "name": "my-awesome-lib",
  …
  "exports": {
    ".": {
      "browser": {
        "default": "./lib/whole-lib.browser.js"
      }
    },
    "module-a": {
      "import": "./lib/public-module-a.mjs",
      "require": "./lib/public-module-a.cjs"
    },
    "module-b": {
      "import": "./lib/public-module-b.mjs",
      "require": "./lib/public-module-b.cjs"
    }
  }
}

当你使用时就会非常的方便

import whole from 'my-awesome-lib'
import publicModuleA from 'my-awesome-lib/module-a'
import publicModuleB from 'my-awesome-lib/module-b'

懂吧！就很舒服！

自己编写插件的过程中也学习大佬们写的代码，结合产出自己的清洗插件，总的来说使用到了 es-module-lexer 进行 import 检查，替换入口位置、使用 Babel 进行 AST 解析，进行源码的参数和调用改写、最后使用 magic-string 进行替换。

并且增加新的特性，支持删除特定注释块，比如你代码中有这样一段代码

// @lowcode-ignore-start
const handleRemove = () => {
  // ...
}
// @lowcode-ignore-end

经过清洗插件后，这段代码会被删除，当前此功能是我自己实现的，不过大佬和我说 terser 就可以完成此操作，还没去了解。后面可以去把这块功能由 terser 替换掉。

同样也发现代码有包含 npm -C ... 这样的脚本命令，我也查阅了些资料，找到了 Yarn 的命令 yarn -cwd，提到这个我就想是不是时候要转 pnpm 了，说个题外话，最近前端工程话使用 Rust 的复刻工具都在疯狂爆出来，感觉提效的另一种方式就是让工程化更快吧。

也遇到了坑，比如在 tsconfig.json 的 include 属性中加入了一些快捷的 d.ts 工具类型，但是构建后的 d.ts 并不会对这些工具类型解析，以至于使用包的时候会有报错提示，因为找不到这些工具类型，后面采用手动导入导出的形式解决了这个问题。

还有其他比如 postcss 未完全编译导致的使用时解析错误的问题，VuePress2 尝鲜写了一个开发者文档，支持组件渲染，TypeScript 引用使用相对路径可以避免文件构建结果内容缺失的问题等等

就前两天，发生了一个比较严重的事故算是，本来是想升级 Hexo 的插件 hexo-renderer-ejs 的，但是因为我操作的失误导致未提交的文件被我使用 git reset --hard ... 强制干掉了……

我当时人都傻了，好几个文件白写了，查阅了各种资料都没办法恢复，还好狗屎运，这是 Hexo ，在项目的根目录有一个 db.json 文件……，靠着他我把那些被我误删的文件恢复回来了……

然后我在 VSCode 中安装了一个 Local History 的插件，要是在别的场景下，我可能真的凉凉了……

说起这次升级，因为本来的主题文件语法有被废弃，这次我使用正则表达式进行一键替换，方便又快捷，可算是。搜索 <% include (\S+).ejs %> 替换 <%- include('$1') %> 即可。

任务进度

「日本語学習計画」：语法及词汇 第1页
「计算机图形学」：材质与外观
「锻炼身体」：步行、上楼梯、Just Dance 待加强
「ECMA-262」：6.2.4 The Reference Specification Type