有个功能丰富的 react 脚手架,了解下？

senntyou 发布于2019-08-23 12:56 / 2659人阅读

摘要：前言想要快速开始多页面应用项目结构如何更合理想要快速上手想要快速使用想要一键使用并能快速自定义主题样式可以的这里，受和的启发，我做了这样一个的脚手架，让你一键搭建项目，快速开始。

前言

想要快速开始 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功能了解丰富的存储类型深度学习的了解对大数据的了解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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