edon-service

edon-service

一个开箱即用的前端构建工具，基于Webpack封装，简化了前端项目的开发与构建流程。无论是开发环境的热更新、资源处理，还是生产环境的代码优化、打包部署，都能提供便捷的配置和稳定的性能。

🌟 功能特点

• 多框架支持：支持React、 Vue
• 多UI组件库支持：支持按需加载antd、element-plus，支持独立配置Tailwind CSS
• 开发体验优化：快速热重载、清晰的编译进度提示
• 样式处理：内置支持 CSS、Less、Sass、Stylus，以及 REM 适配
• 支持UI库：内置支持antd等
• 资源管理：自动处理图片、SVG等静态资源，支持按需转base64
• 构建优化：生产环境自动代码分割、压缩混淆、Tree-shaking
• 灵活配置：通过简单配置即可自定义构建行为，无需深入Webpack细节
• 构建分析：支持打包体积分析和构建速度分析，便于优化项目
• 支持自定义webpack：支持通过edonrc.ts来自定义构建打包配置
• 支持环境变量：根目录下创建.env.[x]定义不同环境的全局变量(x:dev、stage、uat、prod)
• 支持环境变量：根目录下创建.env.[x]定义不同环境的全局变量(x:dev、stage、uat、prod)

📦 安装

# 使用 pnpm
pnpm install edon-service --save-dev

# 使用 yarn
yarn add edon-service -D

🚀 命令使用

1. 开发模式（实时监听）

启动开发服务器，实时监听文件变化并自动构建：

# 基础使用
npm edon-service start

# 自定义端口（默认 3030）
npm edon-service start --port 8080

# 指定环境模式（默认 dev，支持 dev|stage|uat|prod）
npm edon-service start --mode stage

# 启动查看构建速度
npm edon-service start --speed

# 启动查看文件分析
npm edon-service start --analyzer

开发模式默认开启 sourcemap 和监听模式，适合本地开发调试。

2. 生产构建

构建用于生产环境的代码：

# 基础使用
npm edon-service build

# 指定环境模式（默认 dev，支持 dev|stage|uat|prod）
npm edon-service build --mode stage

# 启动查看构建速度
npm edon-service build --speed

# 启动查看文件分析
npm edon-service build --analyzer

生产构建默认开启代码压缩，关闭 sourcemap。

⚙️ 配置选项

⚙️ edonrc配置

根目录下创建edonrc.ts文件

import { defineConfig } from 'edon-wbuilder';

export default defineConfig({
  forkTSChecker: true,
  framework: 'react',
  html: {
    template: 'index.html' // 默认文件所在位置：：public/index.html
  }
  rem: {
    enable: true,
    options: {
      rootValue: 10,
      propList: ['*'],
      selectorBlackList: ['ignore-'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 1,
    },
  },
  chainWebpack: async (config, options) => {
    // 支持自定义webpack配置
    return config;
  },
  // ...详细的看参数声明
});

Tailwind CSS 配置

Tailwind CSS v4 采用 CSS-first 配置方式，主题配置直接在 CSS 文件中定义。

📖 查看完整的 Tailwind 主题配置指南 了解更多自定义选项

✅ 无需额外安装：tailwindcss 已作为 edon-service 的依赖，宿主项目无需单独安装

🔗 支持 pnpm link：通过 pnpm link -g 全局链接后，宿主项目可直接使用 Tailwind CSS，无需在宿主项目中安装 tailwindcss 包

1. 简单启用（推荐）

export default defineConfig({
  framework: 'react',
  uiFramework: 'antd', // 可以同时使用 UI 框架
  tailwind: true, // 启用 Tailwind CSS
})

然后在你的 CSS 文件中：

@import 'tailwindcss';

/* 自定义主题 */
@theme {
  --color-primary: #1890ff;
  --color-secondary: #52c41a;
  --font-display: 'Inter', sans-serif;
  --breakpoint-3xl: 1920px;
  --spacing-128: 32rem;
  --radius-4xl: 2rem;
}

2. PostCSS 插件配置

如果需要配置 PostCSS 插件选项（如基础目录、优化等）：

export default defineConfig({
  framework: 'react',
  uiFramework: 'element-plus',
  tailwind: {
    base: './src', // 扫描类名的基础目录
    optimize: {
      minify: true, // 压缩输出
    },
    transformAssetUrls: true, // 启用资源 URL 重写
  },
})

注意：

• Tailwind v4 使用 @theme 指令在 CSS 中定义主题变量
• 不再需要配置 content 数组，Tailwind 会自动检测源文件
• 使用 @source 指令可以手动添加额外的扫描路径

3. 完整示例

项目结构：

src/
  ├── styles/
  │   └── main.css
  ├── App.tsx
  └── index.tsx

src/styles/main.css:

@import 'tailwindcss';

/* 自定义主题变量 */
@theme {
  /* 颜色 */
  --color-brand: #1890ff;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #f5222d;

  /* 字体 */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* 断点 */
  --breakpoint-3xl: 1920px;

  /* 间距 */
  --spacing-18: 4.5rem;

  /* 动画 */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 自定义工具类 */
@utility gradient-brand {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-success) 100%);
}

edonrc.ts:

import { defineConfig } from 'edon-service'

export default defineConfig({
  framework: 'react',
  uiFramework: 'antd',
  tailwind: true, // 启用 Tailwind CSS
})

⚙️ 环境变量配置

根目录可下创建.env.dev、.env.stage、.env.uat、env.prod文件。

• dev: 开发环境
• stage: 测试环境
• uat: 预生产环境
• prod: 生产环境

以.env.stage举个例子：

PORT=8080
MODE=stage

npm run start -m stage 启动的时候会读取.env.[x]的配置，在项目中可通过env进来获取console.log('环境变量', env)

import { defineConfig } from 'edon-wbuilder';

// 以下配置都是选填
export default defineConfig({
  entryPath: 'src/main.tsx', // 入口文件地址，默认: src/index.tsx
  outputPath: 'dist', //  输出地址，默认: dist
  forkTSChecker: true, // 开发环境时开启，可进行TypeScript 类型检查，默认：false
  framework: 'react',
  uiFramework: 'antd', // 'antd' | 'element-plus'
  tailwind: true, // 启用 Tailwind CSS，可与 antd/element-plus 同时使用
  html: {
    template: 'index.html' // 默认文件所在位置：：public/index.html
  }
  rem: {
    enable: true,
    options: {
      rootValue: 10,
      propList: ['*'],
      selectorBlackList: ['ignore-'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 1,
    },
  },
  chainWebpack: async (config, options) => {
    // 支持自定义webpack配置
    return config;
  },
  // ...详细的看参数声明
});

⛓️‍💥 相关生态工具

本工具库可与以下生态工具配合使用，提升开发效率：

• edon-builder：一个基于esbuild的快速TypeScript项目构建工具，支持多格式输出(esm、cjs)、实时开发、代码混淆等功能，简化项目构建流程。点击前往了解>>

• edon-helper：一个功能丰富的实用工具函数库，包含 URL 处理、数据转换、设备检测、时间工具等多种常用功能，帮助开发者快速实现常见功能需求。点击前往了解>>

• edon-config：一个统一代码规范工具集，集成 Prettier、ESLint、Commitlint 预设配置，支持 TypeScript/React 项目，遵循大厂代码规范，减少团队协作中的风格冲突。点击前往了解>>

• edon-wbuilder：一个专为npm库、UI组件库设计的构建工具，基于Vite、Rollup、Esbuild打造，简化了库开发的构建流程，支持 React、Vue等主流框架，自动处理TypeScript类型生成、代码转换和产物优化。点击前往了解>>