5.2 KiB

Raw Blame History

name	description
jjb-code-optimization	定义 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 文件进行优化
  - 自动处理整个项目的代码文件
使用方式：
- 方式一：使用命令行工具
```
# 进入目标目录，执行命令
jjb-cmd opti
```
  - 前置条件：请确保已全局安装 jjb-cmd（参考 20-jjb-cmd）
  - 实现原理：jjb-cmd opti 命令直接调用 @cqjjb/react-code-optimization 包进行代码优化，不经过 @cqsjjb/scripts 的 code-optimization.js 脚本
  - 使用场景：适用于快速优化当前目录下的代码
  - 详细说明：关于 jjb-cmd opti 命令的详细使用方法和支持的文件类型，请参考 20-jjb-cmd
- 方式二：运行 package.json 中的脚本（推荐）
  - 配置步骤：在项目根目录的 package.json 文件的 scripts 中配置代码优化命令
  - 配置示例：
```
// package.json
{
  "scripts": {
    "code-optimization": "node node_modules/@cqsjjb/scripts/code-optimization.js"
  }
}
```
  - 执行命令：
```
# 执行代码优化
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 调用）
  - 适用场景：在自定义的构建流程、脚本或工具链中灵活使用
  - 使用示例：
```
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 文件，其他文件类型不会被处理
- 备份建议：对于重要项目，建议在执行批量优化前先备份代码

函数	说明
`optimization(code)`	优化代码，返回优化后的代码字符串
`formation(code, callback)`	格式化代码，通过回调函数返回格式化后的代码

5.2 KiB Raw Blame History Unescape Escape

应用配置与开发环境

React 代码优化工具

5.2 KiB

Raw Blame History