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