umi [Bug] MFSU 支持环依赖

brc7rcf0  于 4个月前  发布在  其他
关注(0)|答案(8)|浏览(60)

What happens?

在 webpack 中,我可以设置这样的 alias:

// filename: webpack.config.js
{
   resolve: {
        alias: {
            'lodash-es': 'lodash-es/cloneDeep'
        },
    },
}

接着在文件中如下使用:

import cloneDeep from 'lodash-es'
console.log(cloneDeep({ message: 'Hello World' }));

控制台可以正常的打印出结果:

Hello World

但是如果接入了 MFSU,编译将会报错,报错内容的关键信息如下,完整报错信息在 How To Reproduce 部分:

endless loop detected in checkMatch, please check your alias config.

我阅读了一下 MFSU 这部分的代码,发现测试用例中专门设置了不允许此类行为:alias with endless loop

但是这个情况是不是不属于「无限循环」,它并没有一直修改引用资源路径的内容,资源路径一直是 lodash-es/cloneDeep 的循环。请问可以允许放开这种情况吗?如果允许的话,我可以尝试着提一个 PR

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现 ,并上传到你的 GitHub 仓库

提供了一个 在线示例

How To Reproduce

Steps to reproduce the behavior:

  1. 首先展示正常的情况,在命令行运行: npm run dev:webpack ,可以看到页面正常展示。
  2. 接下来展示错误的情况,在命令行运行: npm run dev:mfsu ,此时编译报错了。

Expected behavior

  1. 期望能有和webpack 一样的表现

Context

  • Umi Mfsu Version: 4.0.30(没有使用 Umi,只单独使用了 umi/mfsu)
  • Node Version: v16.14.2
  • Platform: macOS 13.0
ndasle7k

ndasle7k1#

import cloneDeep from 'lodash-es'
console.log(cloneDeep({ message: 'Hello World' }));

实际项目类似使用的目的是啥啊?

hgc7kmma

hgc7kmma2#

实际项目类似使用的目的是啥啊?

我们之前有一个弹窗组件叫做 modal,使用原生编写,导出一个组件如下所示:

import Modal from 'modal'

由于业务重构,在 modal 同一个仓库里使用 React 又迭代了第二版,导出如下所示:

import Modal from 'modal/react'

为了完成替换并且不改动页面代码,我们使用了 alias 的方式:

{
   resolve: {
        alias: {
            'modal': 'modal/react'
        },
    },
}

我疑惑的点是:如果书写了 import 'foo' ,其中 foo -> foo/barfoo -> foo 这种形式是不是不作为 endless loop 比较好一点呢?

gzszwxb4

gzszwxb43#


这样用还是合理的~ 我想想如何解下~

axzmvihb

axzmvihb4#

嗯 这样用还是合理的~ 我想想如何解下~

我昨天有研究了一下,不知可否帮到您:这个是 webpack 的测试用例。

发现改动这两点可以解决我的问题:

  1. 第一点,改动 getAliasedPath

  1. 改动 checkMatch

不过这样没有考虑类似于 import modal/foo.js 这样的场景。如果也考虑了这种场景,好像环依赖就可以不用抛错了。

okxuctiv

okxuctiv5#

楼主的这个需求应该改下自己的 alias 也可以吧,加个 $ { 'modal$': 'modal/react'} ,不过 webpack 中没有做 alias 的依赖环检测,而 mfsu 中有就导致了两者没有对齐,难免还会有此 issue 的类似情形出现

{
   resolve: {
        alias: {
            'modal$': 'modal/react'
        },
    },
}

看这里是支持 $ 的 getAliasedPath

vyu0f0g1

vyu0f0g16#

@mysteryven 试试楼上的方法吧~ 感觉可行~ 不过 umi 的 alias 配置可以尝试和 webpack 对齐

mtb9vblg

mtb9vblg7#

@mysteryven 试试楼上的方法吧~ 感觉可行~ 不过 umi 的 alias 配置可以尝试和 webpack 对齐

在当前的场景下,确实可行 ~

vhipe2zx

vhipe2zx8#

同步一下,在 #10258 这个 PR 有一个 parseCircleAlias 方法可以解析环依赖到最终结果。

相关问题