generator-ui-component

Scaffolds a UI Component with ES6, tests, and webpack+babel build.

Usage no npm install needed!

<script type="module">
  import generatorUiComponent from 'https://cdn.skypack.dev/generator-ui-component';
</script>

README

generator-ui-component

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] [npm-image]: https://badge.fury.io/js/generator-ui-component.svg [npm-url]: https://npmjs.org/package/generator-ui-component [travis-image]: https://travis-ci.org/jacopotarantino/generator-ui-component.svg?branch=master [travis-url]: https://travis-ci.org/jacopotarantino/generator-ui-component [daviddm-image]: https://david-dm.org/jacopotarantino/generator-ui-component.svg?theme=shields.io [daviddm-url]: https://david-dm.org/jacopotarantino/generator-ui-component

Scaffolds a UI Component with ES6/7, tests, nsp checks, and webpack+babel build. Initializes a git repository. Creates a minimal build process that you can get started with immediately, including browsersync for quick feedback. Includes the CSS and Sass loaders so you can write your styles cleanly and import them just like node modules. Includes the jade-loader so you can write HTML painlessly. And finally includes a demo "base component" to extend from, a demo "event emitter" class to extend from, and webpack support for ES7 features so you can have fun writing JavaScript :).

Installation

First, install Yeoman and generator-ui-component using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-ui-component

Then generate your new project:

mkdir my-fancy-component && cd $_
yo ui-component

Make sure to run the sample test suite to make sure things are working as expected:

npm test

Then get started working. A basic index.html file is provided for you to prove out your UI component as quickly as possible.

open index.html
npm start

License

All content copyright © Jacopo Tarantino. This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/deed.en_US.

TODO