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

senntyou 發布于2019-08-23 12:56 / 2711人閱讀

摘要：前言想要快速開始多頁面應用項目結構如何更合理想要快速上手想要快速使用想要一鍵使用并能快速自定義主題樣式可以的這里，受和的啟發，我做了這樣一個的腳手架，讓你一鍵搭建項目，快速開始。

前言

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

項目git 使用

handy create 

cd 

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

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(
  double 12,
  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";
+

自定義 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: "",
    pathRewrite:{
      "api":""
    },
    changeOrigin: true
  },
  "/foo": {
    target: ""
  }
 }

see more proxy options

最后

歡迎試用，提 BUG

云服務器 GPU云服務器 python功能了解豐富的存儲類型深度學習的了解對大數據的了解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99099.html

引言下面是一個使用腳手架來初始化項目的典型例子。 showImg(https://segmentfault.com/img/remote/1460000019219651?w=1312&h=533); 隨著前端工程化的理念不斷深入，越來越多的人選擇使用腳手架來從零到一搭建自己的項目。其中大家最熟悉的就是create-react-app和vue-cli，它們可以幫助我們初始化配置、生成項目結構、自...

AnthonyHan 2019-08-26 13:49 評論0 收藏0
如何快速開發一個自己的項目腳手架？

摘要：開發一個自己的腳手架了解了一些腳手架的工作方式與的基本概念，咱們就可以來創建一個屬于自己的腳手架。引言下面是一個使用腳手架來初始化項目的典型例子。 ? showImg(https://user-gold-cdn.xitu.io/2019/5/16/16ac081750971790); ? ? 隨著前端工程化的理念不斷深入，越來越多的人選擇使用腳手架來從零到一...

alighters 2019-05-22 14:45 評論0 收藏0
【React 實戰教程】從0到1 構建 github star管理工具

摘要：公司的前端技術棧是，而筆者之前使用的是，因此正好想利用的自己構建個的管理項目來加深的使用。會出現不在尾部的問題。前言在日常使用github中，除了利用git進行項目版本控制之外，最多的用處就是游覽各式的項目，在看到一些有趣或者有用的項目之后，我們通常就會順手star，目的是日后再看。但是當我們star了許多項目之后，回過頭想找一個的項目就會發現，很難在短時間內找到它，官方也并沒有提...

Charlie_Jade 2019-08-23 11:58 評論0 收藏0
一個基于React整套技術棧+Node.js的前端頁面制作工具

摘要：是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發簡單的前端頁面，從而可以解放前端同學的工作量。支持恢復現場功能關閉頁面配置不丟失支持操作。提供了一個方法，用于的拆分。就是發出的通知，表示應該要發生變化了。 pagemaker是一個前端頁面制作工具，方便產品，運營和視覺的同學迅速開發簡單的前端頁面，從而可以解放前端同學的工作量。此項目創意來自網易樂得內部項目nfop中的page...

ermaoL 2019-08-26 11:46 評論0 收藏0
前端架構師親述：前端工程師成長之路的 N 問及回答

摘要：問題回答者黃軼，目前就職于公司擔任前端架構師，曾就職于滴滴和百度，畢業于北京科技大學。最后附上鏈接問題我目前是一名后端工程師，工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 問題回答者：黃軼，目前就職于 Zoom 公司擔任前端架構師，曾就職于滴滴和百度，畢業于北京科技大學。 1. 前端開發問題大...

crossoverJie 2019-08-23 18:14 評論0 收藏0