import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import cssInjectedByJdPlugin from 'vite-plugin-css-injected-by-js';
import { buildPlugin } from 'vite-plugin-build';
import externalGlobals from 'rollup-plugin-external-globals';

const cardList = [
  {
    input: './src/views/card-one.vue',
    output: 'card-one.js',
    name: 'card-one'
  },
  {
    input: './src/views/card-two.vue',
    output: 'card-two.js',
    name: 'card-two'
  }
];

const multipleEntryBuild = (buildOptions) => {
  const options = buildOptions.map((item) => {
    return {
      lib: {
        entry: resolve(__dirname, item.input),
        name: '_',
        formats: ['es'],
        fileName: () => item.output
      },
      rollupOptions: {
        input: {
          [item.name]: resolve(__dirname, item.input)
        },
        // 匹配需要排除在bundle外部的模块
        externam: ['vue'],
        plugins: [
          externalGlobals({
            vue: 'Vue'
          })
        ]
      }
    };
  });
  return buildPlugin({
    fileBuild: false,
    libBuild: {
      buildOptions: options
    }
  });
};

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  console.log(env);
  return {
    plugins: [vue(), cssInjectedByJdPlugin(), multipleEntryBuild(cardList)]
  };
});

/**
 * 添加了rollupOptions.external,
 * 在页面使用远端组件js的时候，会报错：
 * Uncaught typeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
 * 报错原因就是打吧后的js，在开头import 相关模块时，无法识别到模块
 */