Skip to content

Instantly share code, notes, and snippets.

@ashee
Last active June 13, 2016 19:45
Show Gist options
  • Save ashee/12eb7a52ad79456c12b8be2a73e4e499 to your computer and use it in GitHub Desktop.
Save ashee/12eb7a52ad79456c12b8be2a73e4e499 to your computer and use it in GitHub Desktop.
Minimal react-redux-webpack app
$ mkdir react-redux-webpack && cd react-redux-webpack
$ npm init . -f
$ npm i --save react react-dom redux react-redux immutable
$ npm i --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-2 babel-preset-react # babel-preset-stage-0 for lower
$ # to add es7 async features
$ npm i -D babel-plugin-syntax-async-functions babel-plugin-transform-regenerator babel-polyfill
$ npm i -S babel-polyfill

Configure webpack.config.js

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: { presets: [ 'es2015', 'stage-2', 'react' ] }
      }
    ]
  }
};

Babel config

$ vi .babelrc
{
  "presets": ["es2015"],
  "plugins": ["syntax-async-functions","transform-regenerator"]
}

Add following to package.json

"script": {
  "build": "webpack --debug"
}

Configure flow

touch .flowconfig
$ vi .flowconfig
[options]
suppress_type=$FlowIssue

For es7 async support

$ npm i -S bluebird
$ npm i -D babel-preset-async-to-bluebird
$ # add 'async-to-bluebird' to the query presets
$ vi webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: { presets: [ 'es2015', 'stage-2', 'react', 'async-to-bluebird' ] }
      }
    ]
  }
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment