使用Webpack波浪形别名时,通过Vim中的'gf'解析JavaScript模块

Question

我是Vue.js项目的新成员,~在模块导入中使用了tilde()表示法,如

import WhateverApi from '~/api/whatever';

项目存储库包含所有类型的文件:Vagrant机器,Laravel后端应用程序,配置文件和Vue.js SPA.后者位于嵌套文件夹结构(resources/assets/js/)中,因此应该将其解释为项目根目录~.

使用Vim,我习惯于通过跳转到链接文件gf.当我在上面显示的路径上执行此操作时,Vim会抱怨该文件不存在,因为它可能会将波形符(有些正确)解释为用户的主文件夹.

谷歌搜索没有产生任何结果,主要是因为我不知道究竟要搜索什么.这似乎是一些神奇的Webpack正在做的事情.由于其他团队成员使用WebStorm/PHPStorm,他们没有这个问题.

如何让Vim在项目范围内正确解析路径？

通过示例更新:

Webpack具有别名设置,允许将任何路径定义为在源代码文件中使用的别名.它看起来像这样:

resolve: {
    alias: {
        vue$: 'vue/dist/vue.esm.js',
        '~': path.resolve(__dirname, 'resources/assets/js'),
        sass: path.resolve(__dirname, 'resources/assets/sass'),
    },
    extensions: ['*', '.js', '.vue', '.json'],
},

忽略$vue密钥,它特定于Webpack的Vue.js.~并且sass很有趣.第一个基本上是一个替换过滤器,它~在每个路径中交换resources/assets/js.同样适用sass于它的相应路径.但是,进口报表各不相同.这是一个Vue单文件组件的示例,以两个import语句为例:

<template>
    <div>
        <p>Some content.</p>
    </div>
</template>

<script>
    import WhateverApi from '~/api/whatever';

    export default {};
</script>

<style lang="scss" scoped>
    @import '~sass/variables/all';
</style>

现在,在使用时gf,如果能够根据以下规则解决这些(奇怪的)组合,那将是非常棒的:

• 开始的路径~/应该更换~到resources/assets/js,并尝试通过安装扩展查找文件.js,.vue和.json.
• 以...开头的路径~sass应该替换~为resources/assets/sass并尝试通过附加扩展名来查找文件.scss.

我知道这涉及 - 并且在我加入团队之前就已经发生了.有一个有趣的项目试图简化这个(https://github.com/davidosomething/vim-enhanced-resolver),但不幸的是它似乎被打破了,因为它会在尝试解析现有路径时抛出错误.

任何帮助是极大的赞赏.

Answer 1

谷歌搜索没有产生任何结果,主要是因为我不知道究竟要搜索什么.

对于Vim帮助,首先尝试Vim帮助.例如,您使用的是哪个命令？如果是gf,请检查帮助gf 以查看其工作原理:

:h gf

[count]gf       Edit the file whose name is under or after the cursor.
                Mnemonic: "goto file".
                Uses the 'isfname' option to find out which characters
                are supposed to be in a file name.  Trailing
                punctuation characters ".,:;!" are ignored. Escaped
                spaces "\ " are reduced to a single space.
                Uses the 'path' option as a list of directory names to
                look for the file.  See the 'path' option for details
                about relative directories and wildcards.
                Uses the 'suffixesadd' option to check for file names
                with a suffix added.
                If the file can't be found, 'includeexpr' is used to
                modify the name and another attempt is done.

你也可以检查一下:h 'includeexpr'.例如,这会将初始扩展~为resources/assets/js:

set inex=substitute(v:fname,'^\\~','resources/assets/js','')

Answer 2

在 sidyll 为我指明了正确的方向之后，经过一番修修补补和阅读帮助页面后，我成功地让它发挥作用。秘密是递归调用substitute()、正则表达式捕获组和suffixesadd：

set includeexpr=substitute(substitute(v:fname,'^\\~\/','resources/assets/js/',''),'^\\~sass/\\(.*\\)/\\(.*\\)$','resources/assets/sass/\\1/_\\2','')
set suffixesadd=.js,.vue,.scss

这相当丑陋，但这就是适合您的 Vimscript。