Need private packages and team management tools?Check out npm Teams »

rubik-cli

1.6.0 • Public • Published

rubik

Only one command and one structure for web development with Pure|Vue|React|Electron|Libraries


npm standardjs commitizen travis

Create an app

More about create-rubik-app

$ npx create-rubik-app my-app

or

$ npx create-rubik-app my-app --type react

or

$ npx create-rubik-app my-app --repo git@xxx/xxx.git

App features

  • Same structure in all pure|vue|react|library|electron development
  • Multiple pages app support
  • Library development support
  • Hot reload
  • Data Mock
  • Auto re-install dependencies after git commit/merge if needed
  • Es lint
  • Style lint
  • Commit lint

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)
├── .stylelintrc.js (optional)
├── commitlint.config.js (optional)
│

Library structure

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

Mock

mock/index.js

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

Mode

The build and serve command support the mode defined to distinguish different environment in the javascript if needed.

rubik serve // development mode
rubik serve --mode qa // define qa mode
rubik serve --mode production // define production mode
rubik build // production mode
rubik build --mode qa // define qa mode
rubik build --mode development // define development mode

api.js

switch(MODE){ // eslint-disable-line no-undef
  case 'production':
    api = "production"
    break
  case 'qa':
    api = "qa"
    break
  case 'development':
    api = "development"
    break
}

Custom config

rubik.config.js

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

Custom webpack

webpack.config.js

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

Custom eslint

.eslintrc.js

module.exports = {
  "rules": {
    "no-new": "error"
  }
}

Custom stylelint

.stylelintrc.js

module.exports = {
  rules: {
    'max-nesting-depth': 4,
    'selector-max-type': 2,
    'selector-max-class': 3,
    'selector-max-id': 1
  }
}

Custom commitlint

commitlint.config.js

module.exports = { extends: ['@commitlint/config-angular'] }

CLI plugin

A plugin is a npm package with follow features:

  • The name must like rubik-cli-plugin-<command-name>
  • Need export a sub class of common-bin

rubik-cli-plugin-hello-word

module.exports = ({ Command }, options) => {
  class SubCommand extends Command {
    async run () {
      console.log(options)
    }
    get description () {
      return 'hello word'
    }
  }
  return SubCommand
}

rubik.config.js

plugins: [{
    name: 'hello-word',
    options: {
      foo: 'bar'
    }
  }]

Install

npm i rubik-cli

DownloadsWeekly Downloads

69

Version

1.6.0

License

MIT

Unpacked Size

734 kB

Total Files

105

Last publish

Collaborators

  • avatar