时间戳

首页 > 解决方案 > 使用 Webpack 波浪线别名时通过 Vim 中的“gf”解析 JavaScript 模块

javascript - 使用 Webpack 波浪线别名时通过 Vim 中的“gf”解析 JavaScript 模块

问题描述

我是 Vue.js 项目的新成员，该项目~在模块导入中使用波浪号 ( ) 表示法，如

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与它的相应路径相同。但是，导入语句会有所不同。下面是一个带有两个 import 语句的 Vue 单文件组件示例：

<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，如果它能够根据以下规则解决那些（奇怪的）组合，那就太棒了：

我知道这很重要——而且发生在我加入团队之前。有一个有趣的项目试图简化这个（https://github.com/davidosomething/vim-enhanced-resolver），但不幸的是它似乎被破坏了，因为它在尝试解决现有路径时抛出错误。

任何帮助是极大的赞赏。

标签： javascriptvimwebpackvue.js

解决方案

谷歌搜索没有产生任何结果，主要是因为我不知道到底要搜索什么。

要获得 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','')

推荐阅读