繁体   English   中英

Vite+Vue - 通过 npm 链接引用的 Package 无法解析 vite.resolve.alias

[英]Vite+Vue - Package referenced via npm link can't resolve vite.resolve.alias

我正在开发 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 的项目

我能做些什么?

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

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

然后,您可以在其他项目中使用 package,就像它是从某个 package 注册表安装的一样。

请不要使用 '/src',而是使用 '@/'

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM