rollup 打包按需引入

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser'; // 一款基於 UglifyJS 的 JavaScript 壓縮工具
import vue from 'rollup-plugin-vue';
import postcss from 'rollup-plugin-postcss';

const plugins = [
  vue({
    css: true, // 將 CSS 提取爲單獨的文件進行輸出
    template: { isProduction: true } // 設置模板選項，以便在生產環境中移除註釋和空格
  }),
  postcss({
    // PostCSS 插件配置，用於處理 CSS
    modules: true
  }),
  resolve(),
  commonjs(),
  babel(),
  terser()
]

export default {
  input: 'src/components/index.js', // 入口文件
  output: {
    dir: 'dist', // 輸出目錄
    format: 'esm', // 輸出格式
    entryFileNames: '[name].mjs', // 入口文件名
    exports: 'named', // 導出類型
    preserveModules: true, // 保留模塊結構
    globals: {
      vue: 'Vue' // 將 Vue 模塊設置爲全局變量 Vue
    },
  },
  plugins,
  external: ['vue', 'style-inject', 'node_moules'],
};