Umi & Bigfish 想法征集 04

[sorrycc]

Why this issue? 计划在 Umi Contributor 群增加一条规则。每人每周贡献 2 个改进 Umi 或 Bigfish 的想法（辟起、辟殊、云谦），外包同学减半（1 个），外部 Contributor 随意，我每周三会在群里发个 issue 做收集。

直接回复即可。（含内部敏感信息的可以私发我）

[sorrycc]

1、doctor new rule: phantomDependency for mock
2、doctor 新规则，校验是否有锁定 bigfish 版本
3、Next Route Visualizer，路由可视化，Umi UI 可以参考下

[stormslowly]

1. MFSU 是否需要 or 如果需要，应该如何处理项目源码目录以外的代码： 已知问题: 项目 A link 到项目平行目录项目B 的源码文件，B项目中的依赖和 A 有同名的但是版本不兼容的依赖。
2. 使用 https://github.com/lyrasearch/lyra 和 https://www.npmjs.com/package/@node-rs/jieba https://www.npmjs.com/package/@node-rs/jieba 探索 plugin-docs 中文文档站点内全文搜索 (副产品是学习下 napi-rs ）
3. 使用 napi-rs + swc parese 解原来用 esbuild+es-module-lexer 的 import specifier 提取问题。

[txp1035]

2 如果是为了全文搜索，为啥不直接用 dumi…

dumi其实是目前成本最低的支持全文搜索的方案，我的monoRepo在dumi1的时候我也用的umi插件来做的官网，dumi2就迁移过去了

[fz6m]

3 可能会带来比较大的包体积，因为 swc 本来就比较大了，现在 swc 也是按需的，如果打算彻底集成 swc 可以考虑。

顺便把 umijs/swc-plugin-auto-css-modules 也集成进来一起。

[fz6m]

1 的话感觉现在 link 调试包，为了热更新（非 monorepoRedirect 场景下）都要加到 mfsu.exclude 里，否则没法热更 js 文件，这样 mfsu 就不会处理了吧。

[sorrycc]

3 可能会带来比较大的包体积，因为 swc 本来就比较大了，现在 swc 也是按需的，如果打算彻底集成 swc 可以考虑。

顺便把 umijs/swc-plugin-auto-css-modules 也集成进来一起。

基于 swc 底层库自己编译的话，可能没那么大？（我没验证）

[sorrycc]

2 如果是为了全文搜索，为啥不直接用 dumi…

用 dumi 之前可能需要先考虑两个点。1）样式迁移成本，2）mdx 的支持，后续要做交互式的文档和教程也会需要这个能力（或者有其他的支持方式）。感觉新的合作伙伴进来之后可以先做样式迁移这件事。

[hanzebang]

• Doctor 规则 +
  • 新增 CONFIG_PLUGIN_CONF_VALIDATE
    • 检查自定义配置对应自定义插件是否开启
    • 报错示例：Invalid config keys: subApp
  • 新增 CODE_NO_SINGULAR
    • 检查单数目录，比如src/model，model 功能会异常
  • 新增 CONFIG_MFSU_VALIDATE
    • 检查 mfsu 相关配置是否正确，比如 mfsu 与 dynamicImport 是否配置冲突
  • 新增 CODE_MOCK_NO_EMPTY
    • 检查 mock 中是否有对/进行 mock
• 随着 es6+ 包的普及，umi 3 应用会持续收到 Module parse failed: Unexpected token 的错误，可能需要添加一下拦截提示如何处理；同理也可能 esbuild 失败的情况；
• 类似的还有像 @react-spring/xxx 的更新，umi 3 会收到 Can't import the named export 'xxx' from non EcmaScript module (only default export is available) 的错误，需要添加以下配置处理：

  chainWebpack(memo) {
    memo.module
      .rule('mjs')
      .test(/\.mjs$/)
      .type("javascript/auto");
  },

• 如果方便文档最好可以添加几个 demo 示例，或者单独开个 examples 导航，给小白提供“拷贝就能用”的demo
  • 比如：如何兼容 IE 11、ios 9
  • 比如：如何控制 layout 的 logo
  • 比如：添加 extraBabelIncludes 时，用户不能从 ./node_modules/_@[email protected]@@react-spring/types/dist/esm/index.js 中准确的识别包名
  • 等等

[stormslowly]

如果方便文档最好可以添加几个 demo 示例

搞啊 ！

[sorrycc]

1 我就不记了，你记在 doctor 的 TODO 里吧
2 出现 Module parse failed: Unexpected token 的场景是啥？梳理下？
3 这个问题在 umi 4 会出现吗？
4 @stormslowly 的文档优化方案里综合考虑下吧

[hanzebang]

2 出现 Module parse failed: Unexpected token 的场景是啥？梳理下？

就是 umi3 的应用的某个依赖原本是 es5 的，某一天发包改成 es6 的代码了，然后 umi3 的应用就会报这个错误，需要添加 extraBabelIncludes: ["新变成 es6 的这个包"]

3 这个问题在 umi 4 会出现吗？

目前还没有遇到

[xyuanbuilds]

最佳实践推荐 use-query-params ，@umi/max 增加配置支持开启 use-query-params
相比 useSearchParams（react-router-dom）的优势：

1. 支持定义参数类型，可以更好地管控项目内的路由参数；
2. 默认只影响当前操作的参数，不会导致其他参数被意外覆盖；
3. 相比 @tanstack/router 侵入性不强，不需要替换所有的 router 相关内容；

doc
eg:

import {
  useQueryParams,
  StringParam,
  NumberParam,
  ArrayParam,
  withDefault,
} from 'use-query-params';

// create a custom parameter with a default value
const MyFiltersParam = withDefault(ArrayParam, [])

const [query, setQuery] = useQueryParams({
    x: NumberParam,
    q: StringParam,
    filters: MyFiltersParam,
  });

[sorrycc]

use-query-params 我了解下

[PeachScript]

1. Bigfish Changelog 优化方案，现在『dep: @umijs/max@xxx』这种对用户来说不可读
2. umi 包是否能和 plugin-utils 一样暴露 bundler-utils（compiled 是个问题）和 core，这样基于 Umi 的框架只需要依赖 umi 一个包
3. @alipay/bigfish/antd 不跟随实际 antd 版本的类型，始终是 v4
4. history v4/v5 对 hashchange 的处理不一致，所以 Umi 3/4 应用在 hash 模式互嵌时会出现 3 不响应 4 的 Link 标签切换的情况，框架层需要做下兼容

[sorrycc]

1 可以作为新手任务
2 可以作为新手任务
3 记录了
4 抽空给个复现步骤吧

[PeachScript]

4 我周会说明下，昨天有用户反馈

[PeachScript]

2 目前的 workaround 可以先解析出来 umi 的包 path ，再基于这个 path 作为起点解析到其他包，这样 compiled 也能拼出来，感觉可以放出来各个包的根目录：

// reference.ts

export const BUNDLER_UTILS = dirname(require.resolve('@umijs/bundler-utils/package.json'))
// ...

这个方案有办法拿到类型么？

[fz6m]

没办法，还是得靠：

  const bundlerUtil: typeof import('@umijs/bundler-utils') = require(BUNDLER_UTILS)

意味着你要在 devDependencies 中安装 @umijs/bundler-utils 才能获得类型，但 dependencies 可以 all in one 。

另一个 workaround 就是导出函数，比如：

export const getUmiPkgs = (): { bundlerUtils: typeof import('@umijs/bundler-utils') }

然后用 getUmiPkgs() 取。

[PeachScript]

我试试看 ❤️

[txp1035]

关于黑盒问题：
应该有个地方可以看umi开启了哪儿些插件，插件作用是什么，还能使用的官方插件有哪儿些。
这个地方可以是命令行执行输出（第一阶段），也可以是umi ui展示（第二阶段）
关于插件：
目前umi比较像京东自营模式，方案都是官方出，这种模式好处是用户用起来舒服，缺点是随着功能增加人力需要增加。我觉得是不是可以考虑小米模式（小米专注做手机、路由器、电视，其他交给认证供应商），obsidian也是这种模式。

[sorrycc]

感觉没那么多愿意写插件的用户，所以做不起来小米模式