有個功能豐富的 react 腳手架,瞭解下？

摘要： 想要快速開始 react 多頁面應用？ 專案結構如何更合理？ 想要快速上手 Mobx? 想要快速使用 TypeScript? 想要一鍵使用 Ant-Design 並能快速自定義主題樣式？ 可以的！！！ 這裡，受 Vue-cli 和 create-react-app 的...

想要快速開始 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 install handy-cli -g

yarn add handy-cli -g
複製程式碼

ofollow,noindex">專案地址

使用

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