@a1ukard

Сборка umd библиотеки vite, почему не экспортируюстя зависимости?

Добрый день, пытаюсь использовать компонент для сборки в umd библиотеку , но встречаюсь с ошибкой
defineStore undefined , хотя сама pinia вроде бы как есть .
Tools.ts:5 Uncaught TypeError: Cannot read properties of undefined (reading 'defineStore')

at Tools.ts:5:36

at vueCompLib.exportToolsComponent.umd.js:1:188

at vueCompLib.exportToolsComponent.umd.js:1:203

__

прилагаю конфиги самого vite.

import vue from '@vitejs/plugin-vue';
import path from 'path';
import {defineConfig, loadEnv} from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers';
import ElementPlus from 'unplugin-element-plus/vite';
import {fileURLToPath} from 'url';
import rootPath from 'app-root-path';
import IconsResolver from 'unplugin-icons/resolver';
import {buildListCreate} from './frontend/helpers/build/buildHelper.js';
import Icons from 'unplugin-icons/vite';
import Inspect from 'vite-plugin-inspect';

export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd(), '');
  console.log('Proxy server:' + env.VITE_API_PROXY);
  // eslint-disable-next-line no-underscore-dangle
  const __filename = fileURLToPath(import.meta.url);
// eslint-disable-next-line no-underscore-dangle
  const __dirname = path.dirname(__filename);
  const srcRoot = path.resolve(rootPath.toString(), 'frontend');
  const exportLibPath = path.resolve(srcRoot, 'exportComponentLib');
  const libPrefixName = env.VITE_LIBS_PREFIX;
  const listBuild = buildListCreate();
  return {

    optimizeDeps: {
      force: true,
      esbuildOptions: {
        resolveExtensions:['.js','.ts','.tsx','.jsx']
      },
    },
    define: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    },
    build: {
      target: 'esnext',
      emptyOutDir: false,
      sourcemap: true,
      outDir: 'templates/Tools/Modules/UserManager/',
      lib:{
        formats:['umd'],
        name:`[name]`
      },
      rollupOptions: {
        input: listBuild.map(libName => path.resolve(exportLibPath, `${libName}.ts`)),
        external: ['pinia'],
        output: {
          entryFileNames: () => `${libPrefixName}.[name].[format].js`,
          globals: {
            'vue': 'Vue',
          },
        },
      },

    },
    resolve: {
      alias: {
       '@': path.resolve(__dirname, 'frontend'),
    },
      extensions: ['.cjs','.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
      preserveSymlinks: true,
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/scss/assets.scss" as *;`,
        },
      },
    },
    plugins: [
      ElementPlus({useSource: true, defaultLocale: 'ru'}),
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/, /\.vue\?vue/, // .vue
          /\.md$/, // .md
        ],
        imports: ['vue',{
          pinia:[
              'defineStore',
            ['defineStore', 'definePiniaStore'],
          ]
        }],
        resolvers: [
          ElementPlusResolver({importStyle: 'css'}),
          IconsResolver(),
        ],
        dts: path.resolve('.', 'auto-imports.d.ts'),
      }),
      Components({
        resolvers: [
          IconsResolver(),
          ElementPlusResolver({importStyle: 'css'}),
        ],
        dirs: ['frontend'],
        deep: true,
        directives: true,
        dts: path.resolve('.', 'components.d.ts'),
        include: [/\.vue$/, /\.vue  \?vue/, /\.md$/],
      }),
      Icons({
        autoInstall: true,
      }),
      Inspect({
        build: true,
        outputDir: '.vite-inspect',
      }),
      vue({
        template: {
          compilerOptions: {
            // treat all tags with a dash as custom elements
            isCustomElement: (tag) => tag.includes('vue-'),
          },
        },
      }),
    ],
  };
});
  • Вопрос задан
  • 212 просмотров
Решения вопроса 1
@a1ukard Автор вопроса
получит ответ в сообществе дискорд - если коротко , то цитирую -
]linusborg: You are externalizing pinia in roll-up options. That means it's not included in your build result.
[2:48]linusborg: The consuming website would need to include it.
[2:49]linusborg: Which is likely tricky if you build an esm file, it would require an importmap, which is not a standard browser feature yet

если еще короче, нужно делать импортмапы
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 15:52
3000 руб./за проект
25 нояб. 2024, в 15:43
1500 руб./за проект