Skip to content

skyFi/create-react-web

Repository files navigation

create-react-web

搭建网站前端的一个很好用的脚手架,集合了很多强大的功能,方便使用。

视图层使用React @16.x,数据使用Redux管理(拥抱chunk),路由使用React Router @4.x控制,页面脚本使用webpack按需打包加载,自动化任务(静态资源自动化管理,svg图标自动化组件,postcss,代码压缩等等)采用Gulp,使用standard-version等自管理项目日志,HOC + decorator助攻服务器渲染(SSR),Helmet独立管理分页TDK(title, description, keywords)metalink等。

使用最新语法开发,async/await随便用,两端(服务端、前端)同构,babel解析,飞一般的开发速度。

For web site developer who wants to use React.

Run Env.

node version >= 8.x

Todolist

  • React 16.x & React-Router 4.x
  • Server Side Render (SSR)
  • Code Splitting (use React-Router 4.X)
  • smart title,keywords,description (TDK) for SEO
  • auto asset manager
  • auto svg icon
  • auto changelog
  • fetch data (ajax)
  • ajax, connect, etc. HOC
  • gulp tasks & webpack code
  • webpack bundles analyzer
  • mock server
  • use less for css
  • postcss & autoprefixer
  • cache init state (redis)
  • eslint (server & frontend)
  • async await

Install

  • (writing)

Usage

  • (writing)

Server:

  • express
  • ejs

Frontend

  • React 16.x
  • React-Router 4.x
  • Redux
  • Less

CLI

  • (developing)

路由规则

一般命名参数(:foo)

path = '/:foo/:bar'
url = '/test/route'
// => params = { foo: 'test', bar: 'route' }
  • 需要注意的是,一般命名参数必须是字母或者数字和下划线 ([A-Za-z0-9_])
path = '/(apple-)?icon-:res(\\d+).png'
url = '/icon-76.png'
// => params = { res: 76 }

参数修饰符(?)

path = '/:foo/:bar?'
url = '/test'
// => params = { foo: 'test' }

url = '/test/route'
// => params = { foo: 'test', bar: 'route' }
  • 如果只有一个参数,那么写在前面的?也有同样的作用

通配符(*)

path = '/:foo*'
url = '/'
// => params = { foo: undefined }

url = '/bar/baz'
// => params = { foo: 'bar/baz' }

匹配符(+)

path = '/:foo+'
url = '/'
// => null 不匹配

url = '/bar/baz'
// => params = { foo: 'bar/baz' }

自定义匹配规则(正则规则,但是([^\/]+)需要转义)

path = '/:foo(\\d+)'
url = '/123'
// => params = { foo: 123 }

url = '/abc'
// => null 不匹配

匿名参数((.*))

path = '/:foo/(.*)'
url = '/test/route'
// => params = { foo: 'test' }

内部使用了path-to-regexp,如果想查看更加详细的文档可以点击查看。

Eslint Version

├─┬ babel-eslint@8.0.3
├─┬ eslint@3.18.0
├─┬ eslint-config-airbnb@14.0.0
│ └── eslint-config-airbnb-base@11.0.1
├── eslint-plugin-babel@4.1.2
├─┬ eslint-plugin-import@2.2.0
│ ├─┬ eslint-import-resolver-node@0.2.3
│ ├─┬ eslint-module-utils@2.0.0
├─┬ eslint-plugin-jsx-a11y@3.0.2
├─┬ eslint-plugin-react@6.10.3

Changelog & Commit Message

Install

npm run commit-release:install

Usage

// 脚本辅助提交代码,书写提交信息,也可以使用自己喜欢的提交方式,但是需要注意提交文档的格式
npm run git:commit

// 推送服务器
npm run git:push

// `release`需要在`master`分支上操作
// 预查看发布信息
npm run release -- --dry-run

// 确认无误后发布
npm run release

为了方便使用,有以下脚本糖可以使用:

使用脚本糖

// 一键提交代码,并推送到服务端
npm run fly

// 切换`master`分支并更新,发布新版本,推送服务端,一键搞定
npm run fly:release

提交信息的编写

git提交信息需遵循Angular.js提出的规范(AngularJS Git Commit Message Conventions

下面简单说明一下:

提交信息应由如下部分组成:

<type>(<scope>): <subject>

<body>

<footer>
  • type - 必填,描述本次提交做了什么类型的变更,有如下几种类型:
    • feat (feature): 提交新的功能
    • fix (bug fix): 提交错误修复
    • docs (documentation): 仅修改文档
    • style (code style): 纠正代码风格
    • refactor: 重构,既不是新功能或错误修复,也不是纠正代码风格
    • test: 添加测试代码
    • chore (maintain): 修改项目运作方式(构建流程、辅助开发工具等)
  • scope - 选填,描述本次提交修改的地方(比如:service, funcs, models等)
  • subject - 必填,简短描述本次的变更
    • 应当使用现在时的祈使句,例如:“增加分组课程列表”,而不是“增加了分组课程列表接口”或“分组课程列表接口”
    • 不需要首字母大写
    • 不需要在最后加句号
  • body - 选填,描述变更的动机、变更前后对比等。
    • 前面必须有一个空行隔开
    • subject一样,使用祈使句
  • footer - 选填,一些额外信息,如“BREAKING CHANGE”、“Close #XXX”等信息,这块请详细阅读文档。
    • 前面必须有一个空行隔开

一些OK的例子:

chore: add git commit hook - commitlint
feat(service): add api - grouped course list

Close #88
refactor: change generator functions to async functions

Because Node.js v8.9 is released as LTS version, async function is already steady to use.

CHANGELOG