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)，meta，link等。
使用最新语法开发，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.3Changelog & Commit Message
Install
npm run commit-release:installUsage
// 脚本辅助提交代码，书写提交信息，也可以使用自己喜欢的提交方式，但是需要注意提交文档的格式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.