V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
mokevip
V2EX  ›  问与答

有没有老哥比较熟悉 vite 插件的,有偿请教

  •  
  •   mokevip · 2023-05-11 15:35:15 +08:00 · 479 次点击
    这是一个创建于 561 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前情况是,写了一个 vite 文件替换插件,可以将 home.tsx 替换成 home.params.tsx 的内容

    但是现在出现一个问题,home.params.tsx 需要引入 home.tsx 的内容,但是 home.tsx 的内容已经被替换了,造成了循环引用

    这个计算机入门题我当然会,将 home.tsx 文件找个地方存起来就好了。

    但是问题出现了:

    1. 如何辨别什么时候是需要引入源文件、什么时候引入替换后的文件
    2. (接上条),在 vite 里我好像只能根据目录来,我在文件路径后面添加了 ?no-rewrite 标识,完成了所有的功能,但是 ts-check 不认,单行频闭报错下面的引入也会报错,不行就只能关掉整个 ts 检查
    3. 探索了其他方式,比如配置别名,但是在 vite load 的时候只会返回绝对路径,无从判断

    纠结了几天了,站内有没有了解这块的大神,有偿请大家帮忙一下

    base: bW9rZXZpcDg=

    muunala10221
        1
    muunala10221  
       2023-05-11 16:45:50 +08:00
    这确实是一个有趣的问题。解决此类问题的关键是确保在需要的时候能正确地访问到源文件,同时防止循环引用。这里提供一种可能的解决方案:

    源文件和替换文件的分离:你可以创建一个新的文件(例如,home.original.tsx ),在替换 home.tsx 前,先将原始的 home.tsx 内容拷贝到 home.original.tsx 中。然后,home.params.tsx 可以安全地引用 home.original.tsx ,而不会引发循环引用。

    使用特定的标记:在需要引用原始文件的地方,你可以使用一种特殊的注释或标记。例如,你可以在 home.params.tsx 中使用如下的引用:

    tsx
    Copy code
    // @original
    import Home from './home.tsx';
    然后,你的插件可以搜索这些标记,并在发现它们时替换为指向原始文件的引用:

    tsx
    Copy code
    import Home from './home.original.tsx';
    处理 TypeScript 错误:关于 TypeScript 的问题,你可以尝试在项目的 tsconfig.json 文件中使用 "paths" 选项来映射你的特殊标记到正确的文件。例如:

    json
    Copy code
    {
    "compilerOptions": {
    "paths": {
    "*?no-rewrite": ["*"]
    }
    }
    }
    这是一个复杂的问题,可能没有通用的解决方案。你可能需要根据项目的具体需求和限制来调整这个解决方案。希望这个建议能够对你有所帮助!





    帮你问了 gpt4
    mokevip
        2
    mokevip  
    OP
       2023-05-11 19:30:37 +08:00
    @muunala10221 "paths": {
    "*?no-rewrite": ["*"]
    } 我试过,不知道是因为什么,解析不到对应的文件,报错找不到该文件

    源文件和替换文件的分离:你可以创建一个新的文件(例如,home.original.tsx )
    想过这个方案,刚刚又试了一下 报错 Sourcemap for "..." points to missing source files

    因为是新建的文件,sourcemap 中没有对应文件,无法加载。正在寻找解决方法
    mokevip
        3
    mokevip  
    OP
       2023-05-11 22:19:19 +08:00
    @muunala10221 解决了,结合了两种想法,通过修改 @no-rewrite/index.tsx 变为 @/index.tsx?no-rewrite , 来避免引入报错问题,并标识需要源文件。 然后通过暂存,来存储源文件,在处理的地方 识别 ?no-rewrite 返回源文件


    思路一一直很清晰,就是受限于各种写法限制,vite 传入的参数,ts 对引用路径的处理 等等

    总结 chatgpt 还是有用的,虽然解决不了问题,但是能够提供思路
    muunala10221
        4
    muunala10221  
       2023-05-12 08:39:10 +08:00
    @mokevip 👍 比较主观的问题要一步步对话引导他
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1752 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:32 · PVG 00:32 · LAX 08:32 · JFK 11:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.