vite 替换导入语句

【问题标题】：vite replace an import statementvite 替换导入语句
【发布时间】：2022-10-22 16:44:55
【问题描述】：

我有一个vue文件

// myComponent.vue
import { something } from 'some-module'
...

我想将此导入语句替换为

import { something } from '@/utils/myModule'

以防万一运行 vitest 命令时。我们是否有一些插件可以用来获得上述结果？

【问题讨论】：

标签： javascript vite

【解决方案1】：

您可以使用 jsconfig.json 文件来实现这一点。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/utils/*": ["componentpath/*"],
    }
  }
}

【讨论】：

【解决方案2】：

好的，它的工作

// vite.config.js
    alias: [
          {
            find: /some-module/,
            replacement: fileURLToPath(new URL('./src/utils/someModuleFake.ts', import.meta.url)),
          },
          {
            find: '@',
            replacement: fileURLToPath(new URL('./src', import.meta.url))
          },
        ],

【讨论】：

【解决方案3】：

vite-plugin-filter-replace 可以解决这个问题。在 vite.config.ts 中添加跟随配置

import filterReplace from 'vite-plugin-filter-replace';
export default {
    plugins: [filterReplace([{
        filter: /.vue$/,
        replace: {
            from: /some-module/g,
            to: '@/utils/myModule'
        },   
    }], {
       enforce: 'pre',
       apply: 'build'
    }
    )],
};

【讨论】：