yui-image-editor 1.0.0

package/tsconfig.node.json

@@ -0,0 +1,28 @@
+// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    // Most tools use transpilation instead of Node.js's native type-stripping.
+    // Bundler mode provides a smoother developer experience.
+    "module": "preserve",
+    "moduleResolution": "bundler",
+
+    // Include Node.js types and avoid accidentally including other `@types/*` packages.
+    "types": ["node"],
+
+    // Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
+    "noEmit": true,
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  }
+}

package/tsconfig.vitest.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.app.json",
+
+  // Override to include only test files and clear exclusions.
+  // Application code imported in tests is automatically included via module resolution.
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+
+  "compilerOptions": {
+    // Vitest runs in a different environment than the application code.
+    // Adjust lib and types accordingly.
+    "lib": [],
+    "types": ["node", "jsdom"],
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo"
+  }
+}

package/vite.config.ts

@@ -0,0 +1,124 @@
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { resolve } from 'node:path';
+import { fileURLToPath, URL } from 'node:url';
+import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import vueDevTools from 'vite-plugin-vue-devtools';
+// 新增：体积分析插件、样式抽离无需额外插件（vite内置）
+// import { visualizer } from 'rollup-plugin-visualizer/es';
+
+// 基础配置（不变，抽离公共逻辑）
+const baseConfig: UserConfig = {
+  plugins: [vue(), vueJsx(), vueDevTools()],
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  build: { target: 'es2020', sourcemap: false },
+  // 新增：css预处理器配置（若用scss/less，统一配置）
+  css: {
+    preprocessorOptions: {
+      scss: { additionalData: '@import "@/assets/variable.scss";' }, // 全局样式变量
+      less: { globalVars: { primary: '#165DFF' } },
+    },
+    devSourcemap: true, // 开发环境css sourcemap
+  },
+};
+
+// 库模式配置（核心优化）
+const libraryConfig: UserConfig = {
+  ...baseConfig,
+  plugins: [
+    ...(baseConfig.plugins || []),
+    // 类型声明优化：精准生成，排除测试文件，自动生成types入口
+    dts({
+      tsconfigPath: './tsconfig.json',
+      outDir: 'dist/types',
+      include: ['src/**/*.ts', 'src/**/*.vue', 'src/index.ts'], // 仅包含源码
+      exclude: ['src/**/__tests__/**', 'src/**/*.test.ts', 'src/main.ts'], // 排除测试/应用入口
+      staticImport: true,
+      insertTypesEntry: true, // 生成index.d.ts入口，方便用户类型引入
+      cleanVueFileName: true, // 移除vue文件的.d.ts后缀中的.vue
+      copyDtsFiles: true, // 复制外部d.ts文件到dist
+    }),
+    // 新增：包体积分析（执行build时生成stats.html，查看体积占比）
+    // visualizer({
+    //   filename: 'dist/stats.html',
+    //   open: false,
+    //   gzipSize: true,
+    //   brotliSize: true,
+    // }),
+  ],
+  build: {
+    ...baseConfig.build,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'), // 包入口（必须导出所有公共组件/方法）
+      name: 'YuiImageEditor', // 改为你的包名（大驼峰，全局变量名）
+      fileName: (format) => {
+        // 规范包文件名：支持es/cjs/umd，适配不同打包工具
+        if (format === 'es') return 'yui-image-editor.esm.js';
+        if (format === 'cjs') return 'yui-image-editor.cjs.js';
+        return 'yui-image-editor.umd.js';
+      },
+      formats: ['es', 'umd', 'cjs'], // 保留主流格式，删除不必要的
+    },
+    rollupOptions: {
+      // 优化外部依赖：除了vue，若有vue-router/element-plus等，也加入（避免打包进库）
+      external: ['vue', 'vue-router'],
+      output: {
+        globals: { vue: 'Vue', 'vue-router': 'VueRouter' }, // 对应外部依赖的全局变量
+        exports: 'named', // 命名导出，支持import { xxx } from '包名'
+        // 新增：库模式样式单独抽离（关键！避免用户使用时样式丢失）
+        assetFileNames: 'yui-image-editor.css', // 统一样式文件名，方便用户引入
+      },
+    },
+    outDir: 'yui-image-editor/dist',
+    emptyOutDir: true,
+    minify: 'terser',
+    // sourcemap: true, // 库模式生成sourcemap，方便用户调试
+    // // 新增：关闭css代码分割，合并为单个css文件
+    cssCodeSplit: false,
+  },
+  // 新增：库模式关闭devtools，避免打包冗余代码
+  define: { __VUE_DEVTOOLS_GLOBAL_HOOK__: 'undefined' },
+};
+
+// 应用模式配置（现有逻辑微调，保持本地开发体验）
+const appConfig: UserConfig = {
+  ...baseConfig,
+  base: './',
+  server: { port: 3000, open: true, host: true },
+  build: {
+    ...baseConfig.build,
+    outDir: 'dist-app',
+    assetsDir: 'assets',
+    emptyOutDir: true,
+    minify: 'terser',
+    terserOptions: { compress: { drop_console: true, drop_debugger: true } },
+    rollupOptions: {
+      input: { main: resolve(__dirname, 'index.html') },
+      output: {
+        assetFileNames: (assetInfo) => {
+          const extType = assetInfo.name?.split('.')[1];
+          let assetType = 'others';
+          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType || '')) assetType = 'images';
+          else if (/woff2?|eot|ttf|otf/i.test(extType || '')) assetType = 'fonts';
+          else if (/css/i.test(extType || '')) assetType = 'css';
+          return `assets/${assetType}/[name]-[hash][extname]`;
+        },
+        chunkFileNames: 'assets/js/[name]-[hash].js',
+        entryFileNames: 'assets/js/[name]-[hash].js',
+      },
+    },
+  },
+};
+
+// 环境判断（不变，保持双模式切换）
+export default defineConfig((configEnv: ConfigEnv) => {
+  const { mode } = configEnv;
+  const env = loadEnv(mode, process.cwd(), '');
+  const isLib = env.BUILD_TARGET === 'lib' || mode === 'lib';
+  console.log(`🚀 Building in ${isLib ? 'library' : 'application'} mode`);
+  console.log(`📁 Environment: ${mode}`);
+  return isLib ? libraryConfig : appConfig;
+});

package/vitest.config.ts

@@ -0,0 +1,27 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+// export default mergeConfig(
+//   viteConfig,
+//   defineConfig({
+//     test: {
+//       environment: 'jsdom',
+//       exclude: [...configDefaults.exclude, 'e2e/**'],
+//       root: fileURLToPath(new URL('./', import.meta.url)),
+//     },
+//   }),
+// )
+// 如果 vite.config.ts 导出的是函数
+export default defineConfig(async (configEnv) => {
+  const viteConfigObj = typeof viteConfig === 'function'
+    ? await viteConfig(configEnv)
+    : viteConfig;
+  return mergeConfig(viteConfigObj, {
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  });
+});