# 指南

# 目标

TIP

快速搭建稳定，友好，系统化的web开发框架，方便开发者用一套框架就可以开始Pure(原生)|Vue|React|Electron|Libraries(类库)的开发

# 初始化项目

$ yarn create rubik-app my-app

# 命令列表

  rubik build          Build.
  rubik check-package  Check the package.json file is changed from pre version.
  rubik commitlint     Commit lint.
  rubik lint           Eslint.
  rubik serve          Start a http server.
  rubik stylelint      Style lint.

# 统一的目录结构

# 应用目录

├── src
│       │
│       ├── page
│       │       ├── app
│       │       │       ├── index.html
│       │       │       ├── index.js
│       │       │       ├── style.css
│       │       │       └── ...
│       │       ├── home
│       │       
│       │
│       │
│       ├── any-other
│
├── static (will be copied to the dist directory directly)
│      └── jquery
│
├── mock
│       └── index.js
│
│
├── rubik.config.js (optional)
├── webpack.config.js (optional)
├── .eslintrc.js (optional)
├── .stylelintrc.js (optional)
├── commitlint.config.js (optional)
│

# 类库目录

├── demo
│       ├── index.html
│       └── index.js
├── src
│       └── index.js
│
├── same as app

# 配置

开发者可以根据项目需要，自定义相关模块的配置

# 应用配置

rubik.config.js

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

# eslint

.eslintrc.js 参考eslint

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

# stylelint

.stylelintrc.js 参考stylelint

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

# commitlint

commitlint.config.js 参考commitlint

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

# webpack

.eslintrc.js 参考webpack

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

# mode

模式,可用于区分不同的环境，对应页面process.env.MODE变量

rubik serve --mode private // 将往页面注入

if (process.env.MODE === 'private') {
  CONFIG.PRIVATE = true
}

# 插件

你也可以自己写插件来扩展现有的命令
每一个插件都是一个npm包，并且都要遵循下面的规则

以 rubik-cli-plugin-为前缀命名
返回的是一个继承Command的子类, 参考common-bin

以一个rubik-cli-plugin-hello-world为例

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

应用配置中开启插件

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