edon-service/README.md

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

# edon-service

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

## 🌟 功能特点

- **多框架支持**：支持`React`, `Vue`
- **多UI组件库支持**：支持按需加载`antd`, `element-plus`
- **开发体验优化**：快速热重载、清晰的编译进度提示
- **样式处理**：内置支持 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)`

## 📦 安装

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

# 使用 yarn
yarn add edon-service -D
```

## 🚀 命令使用

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

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

```bash
# 基础使用
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. 生产构建

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

```bash
# 基础使用
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。

## ⚙️ 配置选项

| 选项        | 类型      | 默认值                                  | 适用命令 | 说明                                |
| ----------- | --------- | --------------------------------------- | -------- | ----------------------------------- |
| `--port`    | `number`  | `3030`                                  | `dev`    | 开发服务器端口                      |
| `--mode`    | `string`  | `dev`（dev命令）<br>`prod`（build命令） | 所有     | 环境模式（dev\|stage\|uat\|prod）   |
| `--format`  | `string`  | `cjs,esm`                               | 所有     | 构建格式（逗号分隔，支持 cjs\|esm） |
| `--analyze` | `boolean` | `false`                                 | 所有     | 是否分析 bundle 大小                |
| `--speed`   | `boolean` | `false`                                 | 所有     | 是否分析 bundle 的构建速度          |

## ⚙️ edonrc配置

根目录下创建edonrc.ts文件

```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;
  },
  // ...详细的看参数声明
});
```

## ⚙️ 环境变量配置

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

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

以`.env.stage`举个例子：

```bash
PORT=8080
MODE=stage
```

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

```ts
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'
  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)、实时开发、代码混淆等功能，简化项目构建流程。[点击前往了解>>](https://www.npmjs.com/package/edon-builder)

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

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

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