158 lines
5.2 KiB
Markdown
158 lines
5.2 KiB
Markdown
|
---
|
|||
|
|
name: jjb-code-optimization
|
|||
|
|
description: 定义 JJB 项目代码优化工具使用规范。在使用 jjb-cmd opti、@cqjjb/react-code-optimization、代码格式化或导入排序时使用。支持导入排序、JSX 属性排序、批量处理。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 应用配置与开发环境
|
|||
|
|
|
|||
|
|
## React 代码优化工具
|
|||
|
|
|
|||
|
|
- **工具说明**：
|
|||
|
|
|
|||
|
|
- **工具名称**：`@cqjjb/react-code-optimization`
|
|||
|
|
|
|||
|
|
- **技术实现**：本工具基于 Babel + Prettier 实现，用于对前端 React 项目中的代码进行自动化优化和格式化
|
|||
|
|
|
|||
|
|
- **内置工具**：`@cqsjjb/scripts` 已内置代码优化工具（`code-optimization.js`），该工具基于 `@cqjjb/react-code-optimization` 实现，无需额外安装
|
|||
|
|
|
|||
|
|
- **主要能力**：
|
|||
|
|
|
|||
|
|
- **导入语句排序**：
|
|||
|
|
|
|||
|
|
- 按模块来源（`node_modules` / `~` / 相对路径等）进行分组
|
|||
|
|
|
|||
|
|
- 按导入类型（默认导入 / 命名导入 / sideEffect 等）进行排序
|
|||
|
|
|
|||
|
|
- 保证代码结构清晰，提升可读性
|
|||
|
|
|
|||
|
|
- **JSX 属性排序**：
|
|||
|
|
|
|||
|
|
- 对组件的属性进行规范化排序
|
|||
|
|
|
|||
|
|
- 按照布尔属性、普通属性、事件属性等类型进行分组
|
|||
|
|
|
|||
|
|
- 保持代码一致性，提升可维护性
|
|||
|
|
|
|||
|
|
- **批量处理**：
|
|||
|
|
|
|||
|
|
- 支持递归扫描目录
|
|||
|
|
|
|||
|
|
- 对所有 `.js`、`.jsx`、`.mjs`、`.ejs`、`.less`、`.css` 文件进行优化
|
|||
|
|
|
|||
|
|
- 自动处理整个项目的代码文件
|
|||
|
|
|
|||
|
|
- **使用方式**：
|
|||
|
|
|
|||
|
|
- **方式一：使用命令行工具**
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 进入目标目录，执行命令
|
|||
|
|
jjb-cmd opti
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **前置条件**：请确保已全局安装 `jjb-cmd`（参考 [`20-jjb-cmd`](../../20-jjb-cmd/01-全局安装.md)）
|
|||
|
|
|
|||
|
|
- **实现原理**：`jjb-cmd opti` 命令**直接调用** `@cqjjb/react-code-optimization` 包进行代码优化，不经过 `@cqsjjb/scripts` 的 `code-optimization.js` 脚本
|
|||
|
|
|
|||
|
|
- **使用场景**：适用于快速优化当前目录下的代码
|
|||
|
|
|
|||
|
|
- **详细说明**：关于 `jjb-cmd opti` 命令的详细使用方法和支持的文件类型，请参考 [`20-jjb-cmd`](../../20-jjb-cmd/02-命令列表.md)
|
|||
|
|
|
|||
|
|
- **方式二：运行 package.json 中的脚本**（推荐）
|
|||
|
|
|
|||
|
|
- **配置步骤**：在项目根目录的 `package.json` 文件的 `scripts` 中配置代码优化命令
|
|||
|
|
|
|||
|
|
- **配置示例**：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
// package.json
|
|||
|
|
{
|
|||
|
|
"scripts": {
|
|||
|
|
"code-optimization": "node node_modules/@cqsjjb/scripts/code-optimization.js"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **执行命令**：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 执行代码优化
|
|||
|
|
npm run code-optimization
|
|||
|
|
# 或
|
|||
|
|
yarn code-optimization
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **实现原理**：`npm run code-optimization` 通过调用 `@cqsjjb/scripts/code-optimization.js` 脚本，该脚本内部使用 `@cqjjb/react-code-optimization` 进行代码优化
|
|||
|
|
|
|||
|
|
- **注意事项**：
|
|||
|
|
|
|||
|
|
1. 请确保已安装最新的 `@cqsjjb/scripts` 依赖包
|
|||
|
|
|
|||
|
|
2. 执行命令将会优化应用所有代码
|
|||
|
|
|
|||
|
|
- **与方式一的区别**：
|
|||
|
|
- `jjb-cmd opti`：直接调用 `@cqjjb/react-code-optimization`（全局命令）
|
|||
|
|
- `npm run code-optimization`：通过 `@cqsjjb/scripts/code-optimization.js` 调用（项目本地脚本）
|
|||
|
|
- 两者底层都使用 `@cqjjb/react-code-optimization`，但调用路径不同
|
|||
|
|
|
|||
|
|
- **方式三：使用 VSCode 插件**
|
|||
|
|
|
|||
|
|
- **插件名称**：`cqjjb-react-code-optimization`
|
|||
|
|
|
|||
|
|
- **工具基础**：该插件基于 `@cqjjb/react-code-optimization` 实现
|
|||
|
|
|
|||
|
|
- **插件下载**：https://test-dragon-yf-pub.oss-cn-hangzhou.aliyuncs.com/jjb/2025/9/10/3bb86ae95aa94079bdbb4b5c8a6910e2.rar
|
|||
|
|
|
|||
|
|
- **使用方式**：
|
|||
|
|
|
|||
|
|
1. 安装插件后，在代码文件上右键菜单
|
|||
|
|
|
|||
|
|
2. 选择 `Code Optimization` 选项
|
|||
|
|
|
|||
|
|
3. 插件会自动优化当前文件
|
|||
|
|
|
|||
|
|
- **使用场景**：适用于单个文件的快速优化
|
|||
|
|
|
|||
|
|
- **方式四：手动优化代码（API 调用）**
|
|||
|
|
|
|||
|
|
- **适用场景**：在自定义的构建流程、脚本或工具链中灵活使用
|
|||
|
|
|
|||
|
|
- **使用示例**：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const { optimization, formation } = require('@cqjjb/react-code-optimization');
|
|||
|
|
|
|||
|
|
const rawCode = `
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Button } from 'antd';
|
|||
|
|
const App = (props) => <Button {...props} disabled type="primary" />;
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 优化代码
|
|||
|
|
const optimizedCode = optimization(rawCode);
|
|||
|
|
|
|||
|
|
// 格式化代码
|
|||
|
|
formation(optimizedCode, formattedCode => {
|
|||
|
|
console.log('最终优化结果：\n', formattedCode);
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **API 说明**：
|
|||
|
|
|
|||
|
|
| 函数 | 说明 |
|
|||
|
|
| :--- | :--- |
|
|||
|
|
| `optimization(code)` | 优化代码，返回优化后的代码字符串 |
|
|||
|
|
| `formation(code, callback)` | 格式化代码，通过回调函数返回格式化后的代码 |
|
|||
|
|
|
|||
|
|
- **注意事项**：
|
|||
|
|
|
|||
|
|
- **版本控制**：执行代码优化前，建议先提交代码到版本控制系统，以便回退
|
|||
|
|
|
|||
|
|
- **代码检查**：优化工具会修改代码文件，建议在优化后检查代码变更，确保符合预期
|
|||
|
|
|
|||
|
|
- **执行时间**：优化工具需要扫描整个 `src` 目录，大型项目可能需要较长时间
|
|||
|
|
|
|||
|
|
- **文件类型**：工具会自动处理 `.js`、`.jsx`、`.mjs`、`.ejs`、`.less`、`.css` 文件，其他文件类型不会被处理
|
|||
|
|
|
|||
|
|
- **备份建议**：对于重要项目，建议在执行批量优化前先备份代码
|