mako 不能 resolve @alipay/connex-rt-serializer

[stormslowly]

问题

fc-functional-center 使用 mako 构建失败

webpack 怎么做的

项目使用 @alipay/knowledge-form， 在 webpack 中解析路径如下

@alipay/knowledge-form (@alipay/knowledge-form/dist/KnowledgeForm/KnowledgePointsEdit/index.js ) 
↘️
  @alipay/connex-rt-editor(./node_modules/@alipay/connex-rt-editor/dist/index.esm.js)
  ↘️
    @alipay/connex-rt-serializer (@alipay/connex-rt-serializer/dist/index.esm.js)

@alipay/knowledge-form 的 package.json 只有 module 定义 (虽然 dist 产物是 cjs 格式的）

在 @alipay/knowledge-form 解析 @alipay/connex-rt-editor 解析到的是 @alipay/connex-rt-editor 的 esm 的产物 那接下来自然的解析 @alipay/connex-rt-serializer 的时候用的就是 connex-rt-serializer 的 esm 产物编译是成功的。

对比 mako

在 @alipay/knowledge-form 中解析 @alipay/connex-rt-editor 时，因为用的是 require 语法，就用了 cjs 的 resolver。 解析到的自然就是 connex-rt-editor 的 cjs 产物， 那再从 connex-rt-editor 解析 connex-rt-serializer 也是解析 main conditon 对应的 cjs 产物。

凑巧的是 connex-rt-serializer 虽然说是支持 cjs 的但是包里面没有 dist/index.js 文件，导致解析失败。

解法

一通分析下来，一个文件在解析他的依赖文件的时候，到底要用 cjs resolver 还是 esm resolver ，不能看（或者说不能只看） 用的是 require 还是 import 语法；而是要参考包对这个文件的是否是 module 的定义。

这个也联系到 tech-ui 中 require('antd') 为啥使用 esm 产物而不是 cjs 的产物了。https://github.com/umijs/mako/issues/487

@ant-design/pro-field/es/components/ColorPicker/index.js 因为这个文件是一个 esm。

[sorrycc]

而是要参考包对这个文件的是否是 module 的定义

好像不成立，我加了个用例 https://github.com/umijs/mako-e2e/tree/master/fixtures/resolve.normal ，用 webpack 跑，cjs 的包 require cjs + esm 的包，也是优先用 esm。