Vite+Vue -通过npm链接引用的包不能解析vite.resolve.alias

Question

我正在开发一个软件包来帮助我们公司的其他开发人员。

我知道我可以创建别名来使代码更加清晰，并帮助代码的可读性。

所以：

包装工程

vite.config.js

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    
  resolve:{
        preserveSymlinks: false,
        alias:{
            '@' : path.resolve(__dirname, 'src'),

  },
// ....
})

假设我有以下文件夹结构

• commonHelper.js

• • helpers

- index.js

src/index.js

import {merge} from '@/helpers/commonHelper.js'
export {merge}

引用包项目的项目

vite.config.js

它也有一个vite.config.js，它的@别名指向它

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    
  resolve:{
        preserveSymlinks: false,
        alias:{
            '@' : path.resolve(__dirname, 'src'),

  },
// ....
})

anyfile.js

让我们假设我的包项目名为foo，现在使用npm链接进行测试时引用它，在完成包后将使用npm安装引用它。

import {merge} from 'foo'

merge({},{});

当我试图运行我的项目时，我得到了以下错误

  [vite] Internal server error: Failed to resolve import "@/helpers/commonHelper.js" from 
  "..\..\npmPackages\foo\src\index.js". Does the file exist?       
  Plugin: vite:import-analysis
  File: E:/_Development/foo/src/index.js
  3  |  import {merge} from '@/helpers/commonHelper.js'
     |                       ^
  4  |  export {merge}
      at formatError (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40853:46)
      at TransformContext.error (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40849:19)
      at normalizeUrl (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37586:33)
      at async TransformContext.transform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37719:47)
      at async Object.transform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:41102:30)
      at async loadAndTransform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37364:29)

据我所知，问题正在发生，因为@指向引用foo包的项目。

我能做什么?

Answer 1

我假设您正在使用Vite构建库。

在这种情况下，使用"npm链接“或发布过程，您应该将使用字段”模块“的包的package.json指向生成的ESM库文件，而不是实际的源代码。

然后，您可以在其他项目中使用包，就像安装在某个包注册表中一样。

Answer 2

请不要使用'/src'，而是使用'@/‘