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

前言

想要快速開始 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

• Single And Multi Page

• Eject

• Linter

• State Management

• Use Ant Design

• Styles And Modules

• Proxy

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