Rock is a Javascript fullstack generator equipped with following techs: Express, Ejs, Webpack and Gulp. You can choose React, Vue, or jQuery for client frameworks as you wish because webpack configuration has been ready for that.
Rock是一个Express + Webpack 脚手架
。可生成简单,稳定的Node服务。
提供了基础的 Server架构,详尽的 Webpack配置,最佳实践,使用者可自由选择前端框架如 React, Vue。
上手简单,文档详尽,开发者友好。
- Build Systems
- Testing
- Client
- Server
- Development
- Lint: Eslint
- Debugger: Source-map
- Auto-Refresh: Nodemon, Livereload
- Production
- Log: Winston, Morgan
- Optimize: UglifyJsPlugin, cssnano
- Compatibility: Autoprefixer
-
安装
yo
和rock
npm install -g yo generator-rock
-
使用rock生成一个项目
yo rock
-
启动服务
npm run dev
-
访问
http://localhost:8081
-
生成前端组件
yo rock:component
- Configuration vs. Definition
- Directory
- Client Module System
- Webpack Configuration
- Effective Ops
- Tests
- Let's Rock
├── client
│ ├── common
│ │ ├── index.js
│ │ ├── libs
│ │ │ ├── jquery.js
│ │ │ ├── log.js
│ │ │ └── require.js
│ │ └── style.less
│ └── index
│ ├── index.js
│ └── style.less
├── config
│ ├── default.js
│ ├── development.js
│ └── production.js
├── gulpfile.js
├── index.js
├── package.json
├── scripts
│ ├── build
│ │ ├── jenkins.sh
│ │ └── release.sh
│ ├── crontab.sh
│ ├── deploy
│ │ ├── production.sh
│ │ └── test.sh
│ ├── deploy.sh
│ ├── process.production.json
│ └── test
│ ├── coverage.sh
│ └── unit.sh
├── server
│ ├── controllers
│ │ └── index.js
│ ├── server.js
│ └── views
│ ├── index.ejs
│ └── layout.ejs
├── webpack
│ ├── development.config.js
│ ├── production.config.js
│ └── webpack-dev-server.js
└── webpack-assets.json
- express: Fast, unopinionated, minimalist web framework
- ejs-mate: Express 4.x locals for layout, partial.
- morgan: HTTP request logger middleware for node.js
- winston: A multi-transport async logging library for Node.js
- babel: Turn ES6 code into readable vanilla ES5 with source maps
- eslint: An AST-based pattern checker for JavaScript.
- chai: BDD/TDD assertion library for node.js and the browser. Test framework agnostic.
- mocha: simple, flexible, fun test framework
- less: Leaner CSS
- gulp: The streaming build system
- webpack: Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.
- webpack-dev-server: Serves a webpack app. Updates the browser on changes.