Generator-mobx-react NPM

generator-mobx-react

Introduction

mobx-react is a fantastic library that combines MobX observables with React for powerful, intuitive state management.

This generator is intended to help people get started with mobx-react by providing a relatively lightweight project generator that takes care of the basic project infrastructure and lets the user get started coding right away.

What `yo mobx-react` handles for you

This generator will set up a basic React/MobX project for you, including the following features:

Scaffold a basic app, including config files and dependencies
Choice between ES2015 and TypeScript
If using ES2015, yo mobx-react will set up Babel 6 + the appropriate plugins and presets for supporting React + Mobx
- babel-preset-es2015
- babel-preset-stage-1 (for spread/rest and extended class syntax)
- babel-preset-react
- babel-plugin-transform-decorators-legacy (since Babel 6 doesn't currently support decorators, we need this to work with mobx)
- babel-plugin-transform-object-assign
- babel-plugin-array-includes
If using TypeScript, yo mobx-react will install the latest version of TypeScript, plus Typings for type definitions. It will also set up a basic tsconfig and typings.json file for you, with React and React-DOM typings installed.
Webpack, with the following configuration
- transpilation via babel-loader or awesome-typescript-loader
- css bundling
- npm-auto-install
- code splitting in production builds
- webpack-dev-server with hot module reloading
eslint
- babel-eslint parser so the linter doesn't freak out about decorators (or other features)
- uses the Airbnb style guide
- configurable via .eslintrc.js
package.json with the necessary dependencies, as well as scripts for the dev server as well as production build

Installation

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

npm install -g yo
npm install -g generator-mobx-react

Then generate your new project:

yo mobx-react

npm Scripts

Once you've generated your project, you'll have access to the following npm scripts from the command line:

npm run build: Transpile and bundle your project via webpack using production optimizations.
npm start: Start webpack-dev-server at http://localhost:8080. webpack-dev-server will automatically rebuild your app whenever you save changes. In addition, it will hot-reload your changes without triggering a browser refresh (i.e. your state persists across file changes!!). Finally, it will automatically install any unresolved dependencies whenever you import them in your code.
npm run build-es6: Transpile your code to ES2015 modules. Note that this option does not bundle or optimize your code. Instead, it simply transpiles each module in your src directory into a corresponding ES2015 module in the es6 directory. This gives you the option to then use a tree-shaking bundler like rollup.js.
npm run clean: rimraf all the things (except src obviously)
npm run compile: Build all the things. This command will run all of the preceding build steps in sequence.

TO DO

Create new folder if the current working directory doesn't match the project name

Acknowledgements

@mweststrate and the MobX team
SurviveJS for being an unbelievably useful resource for figuring out Webpack config stuff. Almost all of the webpack tricks implemented in yo mobx-react are based on things I learned from SurviveJS. Definitely buy the book!