react 脚手架 react-liter-cli

在做vue项目的时候感觉到vue-cli目录结构很清晰，更好的支持配置，所有想做一个类似于 vue-cli的react版本，并封装成脚手架，发布到npm上以便于以后使用

1. 脚手架安装

1.全局安装脚手架

$ npm install -g react-liter-cli
或用yarn
$yarn add react-liter-cli

命令行 输入 react-liter-cli 返回help说明安装成功了

2.创建文件

运行下面命令生成项目

$ react-liter-cli create <project-name>

2.脚手架的使用

下载完成之后就可以安装依赖

$ npm install

启动本地测试

$ npm run dev

dev环境默认端口号是3456，浏览器输入 http://localhost:3456

看到这样的页面说明启动成功了

3.脚手架的配置与说明

1.工程化构建目录

|--build
    |--dev-sever.js
    |--webpack.base.config.js
    |--webpack.dev.config.js
    |--webpack.prod.config.js
|--config
    |--index.js

1. webpack.base.config.js, webpack基本配置主要是定义入口，出口， 解析jsx,css等配置
2. webpack.dev.config.js 和 dev-server.js 用来配置 dev 本地环境的服务，代理，热更新，热加载等
3. webpack.prod.config.js 生产环境的打包
4. config index.js 一些dev和prod的变量

2.项目业务代码

|--src
    |--lib
        |--style
        |--util
    |--page
        |--layout
            |--index.jsx
            |--index.less
    |--redux
        |--actions
        |--reducers
        |--store.js
    |--router
    |--index.html
    |--main.js

1. page 所有的业务代码都写在这里
2. lib 公用样式，公用组件，工具都可以放在这里
3. redux react的公共状态管理
4. router react-router路由
5. index.html html模板文件
6. main.js 主入口