search

lisonge / vite-plugin-monkey

A vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat
MIT License
1.33k stars 70 forks source link

自动导入依赖的依赖 #19

Closed WOSHIZHAZHA120 closed 2 years ago

WOSHIZHAZHA120 commented 2 years ago

pinia 依赖 vue-demi 但是当我写在 externalGlobals 里时不会自动导入 估计是没有安装和没引用 但是 pinia 里确实使用到了该包

WOSHIZHAZHA120 commented 2 years ago

我的想法是能不能加一个参数用于手动定义版本并且自动导入

lisonge commented 2 years ago

请问你的 externalGlobals 具体配置代码是什么

lisonge commented 2 years ago

这种是否符合你的需求？

import { defineConfig } from 'vite';
import monkey, { cdn, util } from 'vite-plugin-monkey';

export default defineConfig(async ({ command, mode }) => ({
  plugins: [
    monkey({
      entry: 'src/main.ts',
      userscript: {
        namespace: 'https://github.com/lisonge',
        icon: 'https://vitejs.dev/logo.svg',
        match: 'https://i.songe.li/',
        description: 'default_description',
      },
      build: {
        externalGlobals: {
          vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js'),
          pinia: [
            'Pinia',
            'https://unpkg.com/vue-demi@latest/lib/index.iife.js',
            (version) =>
              `https://unpkg.com/pinia@${version}/dist/pinia.iife.js`,
          ],
          'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),
        },
      },
    }),
  ],
}));
lisonge commented 2 years ago

自动导入依赖的依赖 ，这是做不到的，因为我使用的 pnpm 安装后 node_modules 下是没有 vue-demi 包的

image

lisonge commented 2 years ago

vue 相关库对 vue-demi 的版本是没有要求的，可以直接使用 latest

根据你的情况我做了一个测试用例，它能解决你说的问题

https://github.com/lisonge/vite-plugin-monkey/blob/418ffb85dca2eb91260b3bc22bab110c7202bff7/playground/ex-vue-demi/vite.config.ts#L17-L38

lisonge commented 2 years ago

如果你确实想获取 vue-demi 的版本号，你需要先 pnpm add vue-demi 这样你的 node_modules 目录就存在 vue-demi 然后可以在 vite.config.ts 里通过如下代码获取到

// vite.config.ts
import vueDemiPkg from 'vue-demi/package.json';
console.log(vueDemiPkg.version)