miku

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:

{
  "scripts": {
    "try": "miku example.js"
  }
}

After that, populate an example.js with the code you wanna try in your project:

setInterval(() => {
  document.body.innerHTML = new Date()
}, 1000)

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:

module.exports = {
  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:

module.exports = {
  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