前言
想要快速開始 react 多頁面應用？
專案結構如何更合理？
想要快速上手 Mobx?
想要快速使用 TypeScript?
想要一鍵使用 Ant-Design 並能快速自定義主題樣式？
可以的！！！
這裡，受 Vue-cli 和 create-react-app 的啟發，我做了這樣一個 react 的腳手架 handy-cli，讓你一鍵搭建專案，快速開始。
特性
-
簡單易用，零配置
-
豐富的特性可供選擇 (Ant Design,TypeScript,Mobx,EsLint,TsLint)
-
支援匯出 webpack 相關配置到專案目錄下
-
多頁面的支援
-
提供多種狀態管理方式
-
使用 ant-design 後,非常容易定製化 ant-design 主題
-
支援程式碼儲存時和程式碼提交時校驗程式碼風格
安裝
使用npm安裝:
npm install handy-cli -g
使用yarn安裝
yarn global add handy-cli
複製程式碼使用
handy create <new-app>
cd <new-app>
npm run start
複製程式碼預覽
使用手冊
Folder Structure
執行handy create you-app-name(例如選擇了 ant-design、eslint、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 目錄下，有如下子目錄
-
components(公共元件目錄), 多個路由頁面都會用到的公共元件放在這
-
modules(路由頁面目錄),modules 下的每一個子資料夾代表一個單一的路由頁面,比如 Dashboard 頁面,歡迎頁面
-
pages(多頁面資料夾), 每一個子資料夾代表一個單一的SPA 專案,主要存放 SPA 的入口檔案
-
stores(存放 mobx 的 stores)
-
utils
注意
上面說的這些目錄已經配置在config.resolve.alias,所以，在程式碼中不需要指定相對路徑了
in src/modules/mobxGitSearch/index.js
import {shake} from "utils"
複製程式碼not
in src/modules/mobxGitSearch/index.js
import {shake} from "../utils"
複製程式碼Single And Multi Page
使用 handy-cli 初始化專案後，src/pages 下只有一個 index 資料夾，也就是是個單頁應用，要想新增新的獨立的單頁面很簡單
例如，在 src/pages 下新建 doule12 資料夾
src
├── pages
└── index
│ ├── index.js
│ └── routes.js
├── doule12
│── index.js
in src/pages/doule12/index.js.
ReactDOM.render(
<h1>double 12</h1>,
document.getElementById("root"),
);
if (module.hot) {
module.hot.accept(() => {});
}
複製程式碼重啟服務後訪問 localhost:3000/doble12 就可以看到新加的頁面，而 localhost:3000 是預設的單頁面
Eject
如果你想修改一些 webpack 的配置，在專案根目錄，確認程式碼已經 commit 後，可以執行handy eject來匯出 webpack 的相關配置
Linter
支援 Tslint 和 Eslint
如果在建立專案時選擇了使用 Typescript,程式碼校驗就只提供 Tslint,要是沒選 TypeScript,就提供 Eslint 供選擇，Eslint 相關的提供了eslint with airbnb config 和 eslint with prettier config,推薦使用 airbnb config
要想修改一些校驗規則，可以修改專案根目錄下的.eslintrc 或者 tslint.json
檢測時機
可以選擇在程式碼儲存或者提交程式碼的時候校驗,為了程式碼更快的編譯，在提交時校驗比較好。提交程式碼校驗的相關配置在 package.json 中
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"linters": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},
"ignore": [
"**/build/**.js"
]
}
複製程式碼State Management
可供選擇的狀態管理方式
-
Normal(the build in Context API)
-
Mobx
-
Dva(開發中))
Use Ant Design
handy-cli 提供了 ant-design 的按需使用載入,建立專案時選擇了 ant-design 後可以零配置的直接使用
+ import { Pagination } from "antd";
+ <Pagination total={100} />
<Search />
複製程式碼自定義 ant-design 的樣式主題
如果選擇了使用 ant-design，在專案根目錄下會有個 modifyVar.json 檔案，在這裡定義的那些 less 樣式變數,都可以在 modifyVar.json 中賦予新值，儲存後，不用重啟服務,自動會重啟,頁面樣式就變了
Styles And Modules
支援 less,sass,stylus and css modules
注意: 如何想使用 css modules,樣式檔案要以 .module.css 、 .module.less、 .module.sass、.module.styl作為字尾
Proxy
開發時要代理到後端服務，在 package.json 中新增 proxy 欄位，如下
"proxy": "http://localhost:4000",
or
proxy: {
'/api': {
target: '<url>',
pathRewrite:{
'api':''
},
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
複製程式碼see more proxy options
最後
歡迎試用，提 BUG