介绍

Luban 是一个基于 React.js (opens new window) 的快速创建 React 应用的完整系统。其主要解决三个核心问题：

• 🧲 收敛技术栈、屏蔽底层差异、降低开发和维护成本
• 📏 遵循约定优于配置，提供⼀套规范化的开发模式
• 🔩 基于 webpack (opens new window) 进⾏封装解决⼯程配置问题

同时提供了以下特性：

• 🐒 工程：开箱即用的工程方案，支持 ES6 (opens new window)+、TypeScript (opens new window)、样式方案（Styled-Component (opens new window)/Less (opens new window)/CSS Modules (opens new window)）等
• 🦊 路由：默认使用配置式路由(Luban-Router (opens new window))，同时提供权限和导航菜单的解决方案
• 🐯 状态管理：内置集成 rematch (opens new window), 基于redux (opens new window) 的数据流方案，对 TypeScript (opens new window) 友好
• 🐦 环境变量管理：通过 dotenv (opens new window)，支持多环境变量的配置和注入
• 🦁 工程配置：零配置，同时提供强大的和可扩展的应用程序配置
• 🐴 Hooks：内置常用工具 hooks, 快速开发组件逻辑
• 🐘 TypeScript：默认使用 TypeScript (opens new window)
• 🦁 Linter: 默认使用 ESLint (opens new window) 和 StyleLint (opens new window) 来找出和修复代码中潜在的问题
• 🐅 Unit Test: 使用 Jest (opens new window) 和 Enzyme (opens new window) 编写单元测试用例和测试组件

该系统的构成

Luban 包括了几个独立的部分。在源代码 (opens new window)仓库中同时管理了多个单独发布的包。

CLI

CLI (@luban-cli/cli) 是一个全局安装的 npm 包，提供了终端里的 luban 命令。可以通过 luban init 快速创建一个新项目。

CLI 服务

CLI 服务 (@luban/cli-plugin-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @luban-cli/cli 创建的项目中。

CLI 服务是对 webpack (opens new window) 和 webpack-dev-server (opens new window) 的上层封装。提供了：

• 加载其它 CLI 插件的核心服务
• 一份合理的针对不同环境的 webpack 配置
• 项目内部的 luban-cli-service 命令，方便本地开发、调试和构建

详细的使用说明查阅 CLI 服务

CLI 插件

整个系统采用插件式架构开发。一个插件是一个可以向项目中提供可选特性的包，例如 TypeScript、ESLint 以及单元测试等。

当使用 luban init 命令创建项目时，插件会根据配置写入模板文件、增加配置文件以及扩展 package.json 等。在本地开发和构建时，插件同时会去修改 webpack 配置和其他工具的配置。