Generator-rf NPM

generator-rf

RF: a React/Flux generator with webpack, dialects and some good stuffs.

What's inside

React
Flux
Jest
webpack
SourceMap from webpack's devtool
Live-reload by react-hot-loader
JS dialect in your favor:
- ES6 powered by Babel (Formally Javascript 6to5)
- CoffeeScript
- LiveScript
- vanilla JavaScript
Have JSX in CoffeeScript/LiveScript by coffee-react-transform
Stylesheet syntax in your favor:
- SASS/SCSS
- Less
- Stylus
- pure CSS
Optional Bootstrap Framework

What 'RF' stands for

No, not the boring abbreviation of "React" and "Flux". It's actually the suffix of rm -rf. Now it sounds dangerous and cooler, doesn't it?

Installation

Prerequisites

Node.js w/npm or iojs installed. I recommend install it by nvm. Mac user can install nvm from homebrew.

Note: Jest doesn't work on io.js & node v0.11 ~ v0.12, if you like to have jest works, make sure you use node.js 4.0 above or v0.10

Install Yeoman

npm install -g yo

Install RF generator

npm install -g generator-rf

Getting Started

Intiate Project

For example, to create a project named "myapp", just type:

yo rf myapp

Run it up

cd myapp && npm run dev

Then Open http://localhost:8080 in the browser and have fun!

Run the test suit

Don't forget to test your project by:

npm test

Build for deploy

npm run build

What RF generates:

.
└── myapp *
    ├── build
    │   └── index.html
    ├── package.json
    ├── preprocessor.js
    ├── node_modules
    ├── src
    │   ├── assets
    │   │   ├── images
    │   │   └── stylesheets
    │   │       └── style.sass **
    │   └── scripts
    │       ├── actions
    │       │   └── __tests__
    │       ├── components
    │       │   ├── App.js **
    │       │   └── __tests__
    │       ├── constants
    │       │   └── __tests__
    │       ├── dispatcher
    │       │   ├── AppDispatcher.js **
    │       │   └── __tests__
    │       ├── main.js **
    │       ├── mixins
    │       │   └── __tests__
    │       └── stores
    │           └── __tests__
    ├── webpack.dev.config.js
    └── webpack.prod.config.js

* Won't create root directory if your current directory is identical with your project name. Check --skip-root section for detail.
** Varied by your choices of the dialect and stylesheet syntax

What `npm run build` gives:

.
└── myapp
    ├── build
    │   ├── bundle.js
    │   ├── some bootstrap stuffs (if include)
    │   └── ...
    └── ...

Options

--d: Dialect

By default, RF will generate codes in ES6, using Babel. If you don't like it, use --d flag to change the dialect to generate.

ls for LiveScript
coffee for coffee-script
js for vanilla JavaScript

Example:

yo rf myapp --d=ls

--s: Stylesheet Syntax

RF generate SASS (indented syntax) by default. Use --s flag to change it.

scss for SCSS (Sassy CSS)
less for LESS
stylus for Stylus
or css for CSS.

Example:

yo rf myapp --s=scss

--skip-bootstrap: Don't include Bootstrap framework stuffs

RF includes Bootstrap settings in the real Webpack way. Turn them off by --skip-bootstrap flag.

Example:

yo rf myapp --skip-bootstrap

--skip-root: Don't create root directory

RF creates a root directory if current directory name is different from your appname, or generate files in current directory if they have same name. But if you're intentionally have them with different name, use --skip-root to generate files right in the current directory.

Example: