搭建网站前端的一个很好用的脚手架,集合了很多强大的功能,方便使用。
视图层使用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.
node version >= 8.x
- 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
- (writing)
- (writing)
- express
- ejs
- React 16.x
- React-Router 4.x
- Redux
- Less
- (developing)
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
,如果想查看更加详细的文档可以点击查看。
├─┬ 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
npm run commit-release:install
// 脚本辅助提交代码,书写提交信息,也可以使用自己喜欢的提交方式,但是需要注意提交文档的格式
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.