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

2018-11-09 admin

前言

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

项目地址

使用

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 configeslint 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

原文链接:https://segmentfault.com/a/1190000016952820

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44911.html

文章标题: 有个功能丰富的 react 脚手架,了解下?

相关文章
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
Facebook发布React Native!
React.js Conf 2015会议上,Facebook发布了React Native。 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 React中,把一切东西都看成组件,而且所有组件...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;css&#x2F;bootstrap.min.css&quot; type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
回到顶部