卢西恩
特性
- 快速上手，只要会React、Redux、Webpack、React-Router，快速搭建中后台管理平台。
- 路由匹配，包含url输入、js跳转、菜单切换。
- Action，不需要重复定义action，比如等待Action、成功Actoin、失败Action。写更少的行动，完成更多的事。
- 自定义中间件，帮助Action完成异步操作。
- immutable，更简洁，持久化数据结构。
- 简单实现combineReducers，监听当前正在触发的action。
- 完全自定义的cli，内置redux、webpack、react-router、classnames、dayjs、eslint等。
例子
是否可用于生产环境？
当然！公司内用于生产环境的项目估计已经有 3+ 。
是否支持 IE8 ？
不支持。
快速上手
创建新应用
$ git clone https://github.com/Cherry-Team/lucian.git $ cd lucian $ npm install $ npm start
几秒之后，你将会看到以下输出
使用 antd
import React, { Component } from 'react'; import { Button } from 'antd'; class Index extends Component { constructor(props) { super(props); } render() { return ( <Button>Button</Button> ); } } export default Index;
定义路由
我们要写个应用来显示列表，首先是创建路由。
新建 ，内容如下：route component pages/List.js
import React from 'react'; const List= (props) => ( <h2>List</h2> ); export default List;
添加路由信息到路由表，编辑 routeConfig.js
const List = lazy(() => import(/* webpackChunkName: "List"*/'./pages/List/index')); const routes = [ { path: '/list', component: List } ];
编写 UI Component
随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，根目录下新建components/LayoutHeader/index.jsx
import React, { Component } from 'react'; import { Avatar, Dropdown, Menu } from 'antd'; const menu = ( <Menu> <Menu.Item> <a target="_blank" rel="noopener noreferrer" href={false}> 退出 </a> </Menu.Item> </Menu> ); class Index extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <section> <div> 订单系统 </div> <div> <span>消息</span> <Dropdown overlay={menu}> <div> <Avatar size={28} icon="user" /> <span >Faker</span> </div> </Dropdown> </div> </section> ); } } export default Index;
使用 Redux 完成计数器
新建pages/Counter/index.jsx
import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as action from '../../actions/counter'; import './index.less'; const mapStateToProps = state => { const { counter } = state; return { counter: counter.toJS() }; }; const mapDispatchToProps = (dispatch) => ({ add: (...args) => dispatch(action.add(...args)), reduce: (...args) => dispatch(action.reduce(...args)) }); class Index extends Component { constructor(props) { super(props); } render() { return ( <section className="counter"> <button onClick={() => this.props.add(this.props.counter.count)}>+</button> <span>count is: {this.props.counter.count}</span> <button onClick={() => this.props.reduce(this.props.counter.count)}>-</button> </section> ); } } export default connect(mapStateToProps, mapDispatchToProps)(Index);
创建actions/counter.js
export const ADD = 'add'; export function add(params) { return { type: ADD, params }; } export const REDUCE = 'reduce'; export function reduce(params) { return { type: REDUCE, params }; }
然后新建reducers/counter.js
import { fromJS } from 'immutable'; import { createReducer } from 'redux-immutablejs'; import { ADD, REDUCE } from './../actions/counter'; const initialState = fromJS({ count: 0 }); export default createReducer(initialState, { [ADD]: (state, { params }) => { return state.set('count', params + 1); }, [REDUCE]: (state, { params }) => { return state.set('count', params - 1); } });
然后在中引入reducers/rootReducers.js
// reducers配置文件 import { routerReducer } from 'react-router-redux'; import orderList from './orderList'; import counter from './counter'; // 保存当前正在执行的action type const combineReducers = (reducers) => { return (state = {}, action) => { return Object.keys(reducers).reduce((nextState, key) => { nextState[key] = reducers[key](state[key], action); return nextState; }, { actionType: action.type }); }; }; const rootReducers = combineReducers({ counter, orderList, router: routerReducer }); export default rootReducers;
构建应用
完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令：
$ npm run build
几秒后，输出以下内容：
build 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 目录下找到这些文件。dist/
源码
未来
- jsx升级TypeScript
- webpack 5.0.0
- React 17.0.0
