miku!
A general-purpose JS/CSS/HTML prototype tool.
Like jsbin/jsfiddle/codepen but lies on your file system, with more powerful preprocessors support and your favorite editor is your playground!
How to use
Install it:
yarn add miku --dev# optionally you can install it globally # but recommend to install locally
Add npm scripts:
After that, populate an example.js
with the code you wanna try in your project:
Finally, you can run yarn try
to see how your code works in action.
You can also run miku init my-demo
to create an empty project in seconds.
Run ./node_modules/.bin/miku -h
or miku -h
if installed globally to get help.
How does it work
Every input file will be processed by miku using webpack, and we also use an index.html
to load them, you can also pass in an HTML file to override this file, eg: miku example.js example.html
What languages and preprocessors it supports
- JavaScript/ES2015+ (built-in)
- JSX (built-in)
- PostCSS with cssbag (built-in)
- TypeScript
- CoffeeScript
- LiveScript
- Pug/Jade
- Stylus
- SASS/SCSS
- Less
- Vue
- Svelte
Note: to use non-built-in features, please install its loader first, for example:
# for sass yarn add node-sass sass-loader --dev# for vue yarn add vue vue-loader vue-template-compiler --dev
Babel
We have babel presets and plugins included:
- babel-preset-es2015
- babel-preset-stage-2
- babel-plugin-transform-runtime
- babel-runtime
However you can use .babelrc
to override it.
Static file support
You can import images and fonts directly, and it will return the path to the file which you can use.
Note that for .svg
file it will return its raw content, since we're more likely to use Inline SVG.
Production mode
Sometimes you need to distribute your work for others to visit, then just use --prod
or --production
to do this.
Advanced usage
All cli options can be kept in a local config file in project folder: .miku/config.js
, for example:
moduleexports = port: 6000
If an option shows in both local config and cli options, the latter would have higher priority.
You can also provide your own webpack config, we use webpack-merge to merge it into default webpack config, put it at .miku/webpack.config.js
:
moduleexports = module: rules: /* add more loaders */
Use cases
- you have some js code to demo:
miku example.js
- you have some css and html code to demo:
miku example.css example.html
- you need preprocessors:
miku example.coffee
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
miku © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @rem_rin_rin