Only one command for web app development with Pure/Vue/React or javascript libraries.
- 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
$ mkdir project
$ cd project
$ npx rubik-cli init
├── 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/index.js
module.exports = function (app) {
app.get('/data', function (req, res) {
res.json({
'data': 'hello rubik'
})
})
}
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": []
}
webpack.config.js
module.exports = {
resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }
}
├── demo
│ ├── index.html
│ └── index.js
├── src
│ └── index.js
│
├── mock
│ └── index.js
│
├── rubik.config.js (optional)
├── webpack.config.js (optional)
├── .eslintrc.js (optional)
│