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.
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-reactwill set up Babel 6 + the appropriate plugins and presets for supporting React + Mobx
If using TypeScript,
yo mobx-reactwill install the latest version of TypeScript, plus Typings for type definitions. It will also set up a basic
typings.jsonfile for you, with
Webpack, with the following configuration
- transpilation via
- css bundling
- code splitting in production builds
- webpack-dev-server with hot module reloading
- transpilation via
babel-eslintparser so the linter doesn't freak out about decorators (or other features)
- uses the Airbnb style guide
- configurable via
package.jsonwith the necessary dependencies, as well as scripts for the dev server as well as production build
npm install -g yonpm install -g generator-mobx-react
Then generate your new project:
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
npm start: Start
webpack-dev-serverwill 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
importthem in your code.
npm run build-es6: Transpile your code to
ES2015modules. Note that this option does not bundle or optimize your code. Instead, it simply transpiles each module in your
srcdirectory into a corresponding
ES2015module in the
es6directory. This gives you the option to then use a tree-shaking bundler like rollup.js.
npm run clean:
rimrafall the things (except
npm run compile: Build all the things. This command will run all of the preceding build steps in sequence.
- Create new folder if the current working directory doesn't match the project name
- @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-reactare based on things I learned from SurviveJS. Definitely buy the book!
MIT © Chris Freeman