fe-stack

一个包含 Vite、Tailwind、Biome、Prettier 和 TypeScript 配置的共享包，可以在多个项目中复用。

安装方法

在项目中安装：

pnpm add -D fe-stack

使用方法

1. Biome 配置

在项目中创建 biome.json 继承：

{
  "extends": ["fe-stack/biome.json"]
}

2. Prettier 配置

在项目根目录创建 .prettierrc.json：

"fe-stack/prettier.json"

或者：

{
  "extends": "fe-stack/prettier.json"
}

3. Tailwind 配置

在项目中创建 tailwind.config.js：

import baseConfig from 'fe-stack/tailwind.config.js';

export default {
  ...baseConfig,
  // 项目特定的覆盖配置
  theme: {
    extend: {
      ...baseConfig.theme?.extend,
      // 你的自定义主题
    },
  },
};

4. TypeScript 配置

tsconfig.json（Vue 应用）：

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.app.json：

{
  "extends": "fe-stack/tsconfig.app.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

tsconfig.node.json：

{
  "extends": "fe-stack/tsconfig.node.json",
  "include": ["vite.config.*"]
}

5. Vite 配置

Vue 应用模式

import { createBaseConfig } from 'fe-stack/vite.config.base';

export default createBaseConfig(import.meta.dirname, {
  viteConfig: {
    server: {
      port: 5173,
      proxy: {
        '/api': {
          target: 'http://your-api-server',
          changeOrigin: true,
        }
      }
    }
  }
});

Lib 打包模式

import { createBaseConfig } from 'fe-stack/vite.config.base';

export default createBaseConfig(import.meta.dirname, {
  mode: 'lib',
  dtsConfig: {
    // 自定义 vite-plugin-dts 配置
    exclude: ['**/*.test.ts', '**/*.spec.ts'],
    insertTypesEntry: true,
  },
  viteConfig: {
    build: {
      lib: {
        entry: './src/index.ts',
        name: 'MyLib',
        fileName: 'index',
      },
    },
  },
});

特性：

• ✅ 完整的 TypeScript 类型支持
• ✅ 使用 mergeConfig 优雅合并配置
• ✅ dtsConfig 直接配置 dts 插件选项
• ✅ lib 模式自动配置 vite-plugin-dts
• ✅ 默认打包为 ESM 格式