相关疑难解决方法(0)

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

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

import WhateverApi from '~/api/whatever';
Run Code Online (Sandbox Code Playgroud)

项目存储库包含所有类型的文件: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'],
},
Run Code Online (Sandbox Code Playgroud)

忽略$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>
Run Code Online (Sandbox Code Playgroud)

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

  • 开始的路径~/应该更换~ …

javascript vim webpack vue.js

4
推荐指数
2
解决办法
512
查看次数

标签 统计

javascript ×1

vim ×1

vue.js ×1

webpack ×1