Vite+Vue - 通過 npm 鏈接引用的 Package 無法解析 vite.resolve.alias

Question

我正在開發 package 來幫助我們公司的其他開發人員。

我知道我可以創建別名以使代碼更簡潔並提高其可讀性。

所以：

PACKAGE 項目

vite.config.js

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

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

  },
// ....
})

假設我有以下文件夾結構

• 源代碼
  • 幫手
    • commonHelper.js
  • index.js

src/index.js

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

參考PACKAGE項目的項目

vite.config.js

它還有一個 vite.config.js 和一個 @ 別名指向它 self src

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

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

  },
// ....
})

任何文件.js

Lets assume that my package project is called foo and it's referenced using npm link for testing now, after finishing the package it will be referenced using npm install

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 package 的項目

我能做些什么？

Answer 1

我假設您正在使用 Vite 來構建庫。

在這種情況下，使用“npm 鏈接”或發布過程，您應該使用字段“模塊源代碼”而不是生成的實際 ESM 庫文件指向 package 的 package 的 package.json。

然后，您可以在其他項目中使用 package，就像它是從某個 package 注冊表安裝的一樣。

Answer 2

請不要使用 '/src'，而是使用 '@/'