fix: use esm import as the default import way for fix use in Remix

[yutingzhao1991]

• ESM 现在应该是更主流更新更流行的打包方式了，main 字段默认改为 esm 的，对应 type 也修改为 module，这样在大部分框架中得以更好的默认支持。在 NextJS 和 Remix 中都是如此。可以 close remix use ant-design-web3 Error #519
• 默认添加 .js 的后缀，不然在 NexJS 和 Remix 这样可能在 NodeJS 环境运行 esm 的框架中会报找不到模块。

[changeset-bot]

🦋 Changeset detected

Latest commit: 46df349

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@ant-design/web3-assets	Patch
@ant-design/web3-common	Patch
@ant-design/web3-icons	Patch
@ant-design/web3-wagmi	Patch
@ant-design/web3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ant-design-web3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 22, 2024 4:39am

[github-actions]

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (eca5578) 99.63% compared to head (46df349) 99.63%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #520   +/-   ##
=======================================
  Coverage   99.63%   99.63%           
=======================================
  Files          96       96           
  Lines        4338     4338           
  Branches      447      447           
=======================================
  Hits         4322     4322           
  Misses         15       15           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jeasonstudio]

在别的项目中尝试过使用 unbuild 代替 father，效果好而且对 ESM 的支持比较完整，目前 father 编译的 esm 结果其实并不太纯粹（比如 .js 后缀就没有）；
如果对整体项目文档（dumi 底层也是 umi/father）的影响不大，可以尝试下 unbuild.

[yutingzhao1991]

在别的项目中尝试过使用 unbuild 代替 father，效果好而且对 ESM 的支持比较完整，目前 father 编译的 esm 结果其实并不太纯粹（比如 .js 后缀就没有）； 如果对整体项目文档（dumi 底层也是 umi/father）的影响不大，可以尝试下 unbuild.

不知道还有没有其它问题，如果只是 .js 后缀的话目前加 babel-plugin-add-import-extension 这个插件已经可以很好的解决了。

[yutingzhao1991]

import { merge } from 'lodash'; 也会导致在 remix 上面没法直接跑起来，lodash 也是 cjs 的包，这样 import 会报错。改为使用 lodash.merge 了。

同理，antd @ant-design/icons 也会有类似的问题：ant-design/ant-design-icons#605

[jeasonstudio]

在别的项目中尝试过使用 unbuild 代替 father，效果好而且对 ESM 的支持比较完整，目前 father 编译的 esm 结果其实并不太纯粹（比如 .js 后缀就没有）； 如果对整体项目文档（dumi 底层也是 umi/father）的影响不大，可以尝试下 unbuild.

不知道还有没有其它问题，如果只是 .js 后缀的话目前加 babel-plugin-add-import-extension 这个插件已经可以很好的解决了。

father 通过 babel 插件的方式可以实现，还有一些可以考虑的点：

1. package.json 中通过 exports 字段拆分导出，并且配置 "type": "module"（最外层虚拟包的也应该配置这个）
2. dist 中同时提供 esm 和 cjs 产物（为了兼容性考虑），esm 产物以 .js 后缀，commonjs 产物以 .cjs 后缀，两者共用 d.ts
3. 编译产物中的 js 文件应该 import "xxx.js"，cjs 文件应该 require("xxx.cjs")
4. 项目中所有 js 文件都应该重新声明为 .cjs，比如 .eslintrc.js

[yutingzhao1991]

在别的项目中尝试过使用 unbuild 代替 father，效果好而且对 ESM 的支持比较完整，目前 father 编译的 esm 结果其实并不太纯粹（比如 .js 后缀就没有）； 如果对整体项目文档（dumi 底层也是 umi/father）的影响不大，可以尝试下 unbuild.

不知道还有没有其它问题，如果只是 .js 后缀的话目前加 babel-plugin-add-import-extension 这个插件已经可以很好的解决了。

father 通过 babel 插件的方式可以实现，还有一些可以考虑的点：

1. package.json 中通过 exports 字段拆分导出，并且配置 "type": "module"（最外层虚拟包的也应该配置这个）
2. dist 中同时提供 esm 和 cjs 产物（为了兼容性考虑），esm 产物以 .js 后缀，commonjs 产物以 .cjs 后缀，两者共用 d.ts
3. 编译产物中的 js 文件应该 import "xxx.js"，cjs 文件应该 require("xxx.cjs")
4. 项目中所有 js 文件都应该重新声明为 .cjs，比如 .eslintrc.js

@PeachScript Peach 可以看看这个 PR，antd antd-icons 也会有类似的问题，目前 NextJS、Remix 这些框架在 ESM 的支持方式上都走得比较激进了，感觉 antd 下面一些列的库看看是不是可以跟进，不然现在这些框架默认跑 antd 跑不起来。

[jeasonstudio]

import { merge } from 'lodash'; 也会导致在 remix 上面没法直接跑起来，lodash 也是 cjs 的包，这样 import 会报错。改为使用 lodash.merge 了。

同理，antd @ant-design/icons 也会有类似的问题：ant-design/ant-design-icons#605

或许可以考虑改用 lodash-es，es 包对 esm 支持更好，而且可以有助于项目的 tree-shaking，单独引入某个子功能，比如 lodash.merge 可能会让未来业务项目中打包入多份 merge 代码；

[yutingzhao1991]

import { merge } from 'lodash'; 也会导致在 remix 上面没法直接跑起来，lodash 也是 cjs 的包，这样 import 会报错。改为使用 lodash.merge 了。
同理，antd @ant-design/icons 也会有类似的问题：ant-design/ant-design-icons#605

或许可以考虑改用 lodash-es，es 包对 esm 支持更好，而且可以有助于项目的 tree-shaking，单独引入某个子功能，比如 lodash.merge 可能会让未来业务项目中打包入多份 merge 代码；

这个改了。换 unbuild 先不换吧，更重要的其实是要推动 antd 和 antd-icons 的改动，不然 antd-web3 还是默认跑不起来，需要配置 antd 相关内容。

[PeachScript]

@PeachScript Peach 可以看看这个 PR，antd antd-icons 也会有类似的问题，目前 NextJS、Remix 这些框架在 ESM 的支持方式上都走得比较激进了，感觉 antd 下面一些列的库看看是不是可以跟进，不然现在这些框架默认跑 antd 跑不起来。

我尝试用 remix 复现了原 issue 中的问题，排查下来和 NPM 包是否是 pure esm 无关，原因有两个：

1. remix 默认 SSR，似乎 server 产物会使用 require 去获取 @ant-design/web3，这就命中了 package.json 中的 exports.require 规则拿到了 cjs 产物，解法是在 package.json 里去掉 exports 配置项即可，但解完这个还会碰到混用的报错
2. @ant-design/web3 的产物出现了混用，比如 lib 目录下的产物仍然引用了 antd/es/xxx（unpkg.com），这也会导致 server 产物执行报错，解法是尽量不用子路径引入，如果不可避免，可以在 father 的 cjs 构建配置内覆盖 alias: { 'antd/es': 'antd/lib' } 转一下，同样 esm 产物下也有混用 lib 的情况（unpkg.com）

只要上面两个问题解了，remix 是可以正常编译的，另外 antd 我试了下 remix 也是可以正常编译的；pure esm 还是属于 breaking change，通常 major 版本才会做此改动，所以建议是把这个 PR 的改动还原回去解上面两个问题，具体你们可以再评估下 @yutingzhao1991 @jeasonstudio @thinkasany @kiner-tang

---

father 4 是有计划支持 pure esm 的，但一直没时间跟进，目前也没遇到特别刚需的场景，关联 issue：umijs/father#609 也许今年会搞 👀

[yutingzhao1991]

@PeachScript Peach 可以看看这个 PR，antd antd-icons 也会有类似的问题，目前 NextJS、Remix 这些框架在 ESM 的支持方式上都走得比较激进了，感觉 antd 下面一些列的库看看是不是可以跟进，不然现在这些框架默认跑 antd 跑不起来。

我尝试用 remix 复现了原 issue 中的问题，排查下来和 NPM 包是否是 pure esm 无关，原因有两个：

1. remix 默认 SSR，似乎 server 产物会使用 require 去获取 @ant-design/web3，这就命中了 package.json 中的 exports.require 规则拿到了 cjs 产物，解法是在 package.json 里去掉 exports 配置项即可，但解完这个还会碰到混用的报错
2. @ant-design/web3 的产物出现了混用，比如 lib 目录下的产物仍然引用了 antd/es/xxx（unpkg.com），这也会导致 server 产物执行报错，解法是尽量不用子路径引入，如果不可避免，可以在 father 的 cjs 构建配置内覆盖 alias: { 'antd/es': 'antd/lib' } 转一下，同样 esm 产物下也有混用 lib 的情况（unpkg.com）

只要上面两个问题解了，remix 是可以正常编译的，另外 antd 我试了下 remix 也是可以正常编译的；pure esm 还是属于 breaking change，通常 major 版本才会做此改动，所以建议是把这个 PR 的改动还原回去解上面两个问题，具体你们可以再评估下 @yutingzhao1991 @jeasonstudio @thinkasany @kiner-tang

father 4 是有计划支持 pure esm 的，但一直没时间跟进，目前也没遇到特别刚需的场景，关联 issue：umijs/father#609 也许今年会搞 👀

混用的问题我解一下， #522 这个 PR 会处理。
另一个问题我再研究研究。但是我现在用 remix 跑 antd，最简单的例子也跑不起来，提了个 issue ant-design/ant-design#47095