React

Custom renderer

https://www.thisdot.co/blog/how-to-create-a-custom-react-renderer
https://juejin.cn/post/6923738103970529288
用 React 的 DSL（jsx+hook）编写除 dom 外的其他 UI。
汇总： https://github.com/chentsulin/awesome-react-renderer
React 的语法及运行机制，天然适合去书写 UI 类逻辑，基本的 React 底层默认是渲染 Dom 的，所以为了适配其他场景，React 开放了 renderer 的定制方式，也就是开放了 react 与 Dom 交流的中间途径，这样开发者就可以将这个交流对象换成别的渲染层级元素的场景，如 canvas，file，terminal 等等。
image.png
这样就相当于用着 react 的语法和调度方式，开发别的内容了，同理如果需要跨平台渲染，也可以做到了。
https://www.npmjs.com/package/react-pdf // pdf
https://www.npmjs.com/package/react-canvas // canvas
https://www.npmjs.com/package/ink // cli
所以基于 React 的小程序也是同样的方式：
https://www.npmjs.com/package/remax // remax，taro同理
介绍：https://zhuanlan.zhihu.com/p/101909025
目前由于 vue 也开放了类似的拓展接口，所以，也能用 vue 尝试去进行一些非 dom 的渲染了：
https://github.com/justjavac/vue-cli-renderer // cli
#renderer #dsl_expand

Eslint

webpack exports & eslint-import

https://github.com/import-js/eslint-plugin-import/issues/1953
webpack 的 exports （package.json）,会对社区的包读取机制造成 breakchange，类似的引入类问题可以查看相似的解决方案：

  1. 使用非 exports 导出的包；
  2. 读取 webpack 的 resolve，或配置 alias；
  3. 寻找社区的插件兼容方案；

nanoid：
image.png
另外，此场景与当前 eslint 解析暂无关系，考虑是否别的问题导致

name in package.json

https://github.com/import-js/eslint-plugin-import/issues/2120image.png
image.png
考虑是 获取 module 名称失败
nanoid/no-secure package.json
image.png
确实没有 name 字段
手动设置 name 字段，问题解决了：
image.png
image.png
该bug已修复
https://github.com/import-js/eslint-plugin-import/issues/2120
image.png
https://github.com/import-js/eslint-plugin-import/pull/2121
通过更新 eslint-plugin-import 可以解决。
所以问题的根本原因是 npm 包的不规范？一个 npm 包中，包含了另一个 npm 包，且这个 npm 包还没有 name 字段，这时候只能让工具库去适配这种情况，通过获取父级 package 的 name 再与 文件夹拼接，来自行生成 name。
另外也有其他包会发布类似结构的：
image.png
仅包含 main/typings/module/sideEffects，常用于实现 treeShaking，目前暂不知社区支持情况。