SongChao1123 / rubik-cli

Only one command for web app development with Pure/Vue/React or javascript libraries.

rubik

Only one command for web app development with Pure/Vue/React or javascript libraries.

Features

• Only One structure in pure/vue/react/library development
• Multiple pages app support (html-webpack-plugin)
• Library development support (webpack-author-libraries)
• Hot reload (webpack-dev-server)
• Data Mock (webpack-dev-server)
• Code style lint()
• Auto re-install dependencies after git commit/merge if needed
• More

Init

$ mkdir project
$ cd project
$ npx rubik-cli init

App Structure

├── src
│       │
│       ├── page
│       │       ├── app
│       │       │       ├── index.html
│       │       │       ├── index.js
│       │       │       ├── style.css
│       │       │       └── ...
│       │       ├── home
│       │       
│       ├── static
│       │       └── jquery
│       │
│       │
│       ├── any-other
│
│
├── mock
│       └── index.js
│
│
├── rubik.config.js (optional)
├── webpack.config.js (optional)
├── .eslintrc.js (optional)
│

Mock

mock/index.js

module.exports = function (app) {
  app.get('/data', function (req, res) {
    res.json({
      'data': 'hello rubik'
    })
  })
}

Custom Config

rubik.config.js

{
  "output": "dist",
  "staticName": "static",
  "templateName": "",
  "publicPath": "/",
  "cdnPublicPath": "//",
  "hashLength": 7,
  "includePage": [],
  "vendor": [],
  "host": "0.0.0.0",
  "port": 8081,
  "openStandardJs": true,
  "pageTemplateWithoutHtmlLoader": false,
  "reInstallOnPkgChange": true,
  "notReInstallOnPkgChangeFeatures": []
}

Custom Webpack Config

webpack.config.js

module.exports = {
  resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }
}

Library Structure

├── demo
│       ├── index.html
│       └── index.js
├── src
│       └── index.js
│
├── mock
│       └── index.js
│
├── rubik.config.js (optional)
├── webpack.config.js (optional)
├── .eslintrc.js (optional)
│