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:
- CoffeeScript
- LiveScript
- Babel (Formally Javascript 6to5)
- vanilla JavaScript
- Have JSX in CoffeeScript/LiveScript by coffee-react-transform
- Stylesheet syntax in your favor:
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 installed. I recommend install it via
nvm
ornode
via homebrew.
Yeoman
Installnpm 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!
If you get error message like
Cannot GET /
on MS Windows, tryhttp://localhost:8080/index.html
instead. And please let me how to fix it if you know how.
Run the test suit
Don't forget to test your project by:
npm test
Build for deploy
npm run build
What RF generates:
.
└── myapp *
├── package.json
├── preprocessor.js
├── node_modules
├── src
│ ├── assets
│ │ ├── images
│ │ └── stylesheets
│ │ └── style.sass **
│ ├── index.html
│ └── scripts
│ ├── actions
│ │ └── __tests__
│ ├── components
│ │ ├── App.coffee **
│ │ └── __tests__
│ │ └── App-test.coffee **
│ ├── constants
│ │ └── __tests__
│ ├── dispatcher
│ │ ├── AppDispatcher.coffee **
│ │ └── __tests__
│ ├── main.coffee **
│ ├── mixins
│ │ └── __tests__
│ └── stores
│ └── __tests__
└── webpack.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
npm run build
gives:
What .
└── myapp
├── build
│ ├── bundle.js
│ └── index.html
└── ...
Options
--d: Dialect
By default, RF will generate codes in CoffeeScript. If you don't like it, use --d flag to change the dialect to generate.
ls
for LiveScriptbabel
for Babel (Formally JavaScript 6to5)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 LESSstylus
for Stylus- or
css
for CSS.
Example:
yo rf myapp --s=scss
--skip-root: Don't create root directory
From 0.1.13, RF will create 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:
yo rf trueName --skip-root
--skip-test: Don't create __tests__ directory
For every sub-directories in src/scripts
, RF will create a __tests__ directory
within. Use skip-test
to skip that.
Example:
yo rf myapp --skip-test
--skip-install: Skip automatic package installation
Example:
yo rf myapp --skip-install
Contribute
- Fork this project
- run
npm install && npm test
and make sure all test are pass - Make your changes with a bit of test
- For commit message of pull request, please check these useful tips ahead.
TODO
- Actions w/Constants, Store
- Component and Mixin generate command
- Isomorphic server script(?)
- React native things(?)
License
MIT