前言

想要快速開始 react 多頁面應用？

項目結構如何更合理？

想要快速上手 Mobx?

想要快速使用 ?

想要一鍵使用 Ant- 并能快速自定義主題樣式？

可以的！！！

這里，受 Vue-cli 和 -react-app 的啟發，我做了這樣一個 react 的腳手架 handy-cli試修改生產者消費者問題代碼，讓你一鍵搭建項目，快速開始。

特性 安裝

使用npm安裝:
npm install handy-cli -g
使用yarn安裝
yarn global add handy-cli

項目git 使用

handy create 
cd 
npm run start

預覽

使用手冊

運行handy you-app-name(例如選擇了 ant-、、mobx),handy-cli 會生成如下項目結構

├── node_modules
├── public
├── modifyVars.json
├── package.json
├── readme.md
├── .eslintrc
├── .gitignore
└── src
    ├── components
    │?? ├── ResultItem
    │?? │?? └── ResultItem.js
    │?? └── Scroll
    │??     └── Scroll.js
    ├── modules
    │?? └── mobxGitSearch
    │??     ├── components
    │??     │?? ├── ResultList
    │??     │?? │?? └── ResultList.js
    │??     │?? └── Search
    │??     │??     └── Search.js
    │??     └── index.js
    ├── pages
    │?? └── index

    │??     ├── index.js
    │??     └── routes.js
    ├── stores
    │?? └── SearchGitStore.js
    └── utils
        └── index.js

在 src 目錄下，有如下子目錄

注意

上面說的這些目錄已經配置在..alias,所以，在代碼中不需要指定相對路徑了

in src/modules/mobxGitSearch/index.js
import {shake} from "utils"

not

in src/modules/mobxGitSearch/index.js
import {shake} from "../utils"

And Multi Page

使用 handy-cli 初始化項目后，src/pages 下只有一個 index 文件夾，也就是是個單頁應用，要想添加新的獨立的單頁面很簡單

例如試修改生產者消費者問題代碼，在 src/pages 下新建 文件夾

src
├── pages
??  └── index
    │   ├── index.js

    │?? └── routes.js
    ├── doule12
        │── index.js
in src/pages/doule12/index.js.
ReactDOM.render(
  
double 12
,
  document.getElementById("root"),
);
if (module.hot) {
  module.hot.accept(() => {});
}

重啟服務后訪問 :3000/ 就可以看到新加的頁面，而 :3000 是默認的單頁面

Eject

如果你想修改一些 的配置，在項目根目錄，確認代碼已經 后，可以執行handy eject來導出 的相關配置

支持 和

如果在創建項目時選擇了使用 ,代碼校驗就只提供 ,要是沒選 ,就提供 供選擇， 相關的提供了 with 和 with ,推薦使用

要想修改一些校驗規則，可以修改項目根目錄下的. 或者 .json

檢測時機

可以選擇在代碼保存或者提交代碼的時候校驗,為了代碼更快的編譯，在提交時校驗比較好。提交代碼校驗的相關配置在 .json 中

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.{js,jsx}": [
        "eslint --fix",
        "git add"
      ]
    },
    "ignore": [
      "**/build/**.js"
    ]
  }

State

可供選擇的狀態管理方式

Use Ant

handy-cli 提供了 ant- 的按需使用加載,創建項目時選擇了 ant- 后可以零配置的直接使用

+ import { Pagination } from "antd";
+ 
  

自定義 ant- 的樣式主題

如果選擇了使用 ant-，在項目根目錄下會有個 .json 文件，在這里定義的那些 less 樣式變量,都可以在 .json 中賦予新值，保存后，不用重啟服務,自動會重啟,頁面樣式就變了

And

支持 less,sass, and css

注意: 如何想使用 css ,樣式文件要以 ..css 、 ..less、 ..sass、..styl作為后綴

Proxy

開發時要代理到后端服務，在 .json 中新增 proxy 字段，如下

 "proxy": "http://localhost:4000",
 or
 proxy: {
  '/api': {
    target: '',
    pathRewrite:{
      'api':''
    },
    changeOrigin: true
  },
  '/foo': {
    target: ''
  }
 }

see more proxy

最后

歡迎試用，提 BUG