PNPM Monorepo 项目中的 Autopimport

Question

描述错误

项目：https://github.com/toimc/autoimport-monorepo-demo

我在 PNPM 中编写了一个非常基本的 Monorepo 示例。

.
├── package.json
├── packages
│   ├── components
│   │   ├── README.md
│   │   ├── dist
│   │   │   ├── favicon.ico
│   │   │   ├── style.css
│   │   │   ├── vue-components.d.ts
│   │   │   ├── vue-components.es.js
│   │   │   ├── vue-components.es.js.map
│   │   │   ├── vue-components.umd.js
│   │   │   └── vue-components.umd.js.map
│   │   ├── env.d.ts
│   │   ├── package.json
│   │   ├── pnpm-lock.yaml
│   │   ├── public
│   │   │   └── favicon.ico
│   │   ├── src
│   │   │   ├── components
│   │   │   │   └── HelloWorld.vue
│   │   │   ├── main.ts
│   │   │   └── vite.ts
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.app.tsbuildinfo
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   ├── tsconfig.vitest.json
│   │   ├── vite.config.ts
│   │   └── vitest.config.ts
│   └── vue-template
│       ├── README.md
│       ├── auto-imports.d.ts
│       ├── index.html
│       ├── package.json
│       ├── public
│       │   └── vite.svg
│       ├── src
│       │   ├── App.vue
│       │   ├── assets
│       │   │   └── vue.svg
│       │   ├── components
│       │   │   └── HelloWorld.vue
│       │   ├── main.ts
│       │   ├── style.css
│       │   └── vite-env.d.ts
│       ├── tsconfig.json
│       ├── tsconfig.node.json
│       └── vite.config.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── yarn.lock

Vue template 是一个基础的 vite+Vue 项目，而 Components 是一个组件库，导出了 Vue 组件和

getSum

函数方法，带有 vite config：

    AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      ignore: ['h'],
      imports: [
        'vue',
        {
          'vue-components': ['getSum'],
        },
      ],
      vueTemplate: true,
    }),

我想使用autoimport来自动导入getSum方法。我按照官方文档配置了，但是使用pnpm monorepo时可能会出现如下错误：

[plugin:vite:import-analysis] Failed to resolve import "vue-components" from "../components/dist/vue-components.es.js". Does the file exist?
/Users/toimc/Downloads/temp-mono/packages/components/dist/vue-components.es.js:3:25
1  |  import { defineComponent as l, openBlock as a, createElementBlock as p, createElementVNode as t, toDisplayString as _, pushScopeId as d, popScopeId as u, createTextVNode as r } from "vue";
2  |  
3  |  import { getSum } from 'vue-components';
   |                          ^
4  |  const i = (e) => (d("data-v-7ebc02a5"), e = e(), u(), e), h = { class: "greetings" }, g = { class: "green" }, m = /* @__PURE__ */ i(() => /* @__PURE__ */ t("h3", null, [
5  |    /* @__PURE__ */ r(" You’ve successfully created a project with "),

但是我正确导出了这个文件，因为我尝试直接导出node_modules中的目录，没有使用pnpm软链方式，而是直接新建一个文件夹，用vite调试命令可以正常启动，不会报上述错误.

同样的代码，只修改为Yarn来管理Mono的工作区，没有问题，直接运行。

代码：https://github.com/toimc/autoimport-monorepo-demo/blob/yarn/packages/vue-template/package.json

复制

https://github.com/toimc/autoimport-monorepo-demo

系统信息

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.29 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.12.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.199
    Edge: 120.0.2210.121
    Safari: 17.2.1

使用的包管理器

pnpm

Answer 1

经过大量实践，发现只需要在根目录下安装相应的依赖即可，使用

pnpm add xxxx -w

，代表当前monorepo中需要相互引用的包