From 9865b2d8080fe519c53c4fc90c7fb4102948db86 Mon Sep 17 00:00:00 2001 From: James Logsdon Date: Thu, 30 Jul 2015 10:48:52 -0400 Subject: [PATCH 1/7] Documentation for 0.2 API --- README.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 97 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 455922d4c..c48001e30 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,101 @@ react-redux ========================= -React bindings for Redux. -Docs are work in progress. +Higher-order React components for [Redux](https://github.com/gaearon/redux). -Requires React >= 0.13 +- [Quick Start](#quick-start) +- [Components](#components) + - [`Provider`](#provider) + - [`Connector`](#connector) +- [Decorators](#decorators) + +## Quick Start + +Hooking up the Counter example into React looks like this: + +```js +import { bindActionCreators } from 'redux'; +import { Provider, Connector } from 'react-redux'; + +// store setup left out... see the Redux documentation for initializing action creators, reducers and the store. + +function select(state) { + return { counter: state.counter }; +} +class CounterApp { + render() { + return ( + + {({ counter, dispatch }) => + /* Yes this is child as a function. See the Connector section for why this is. */ + + } + + ); + } +} + +const containerElement = document.getElementByID('container'); +React.run(( + + {() => } + +), containerElement); +``` + +## Components + +### `Provider` + +The `Provider` component takes a `store` prop and a [function as a child](#child-must-be-a-function) with your root +component. The `store` is then passed to the child via React's `context`. This is the entry point for Redux and must be +present in order to use the `Connector` component. + +### `Connector` + +Components in React can be divided into two categories: Dumb Components, which have no knowledge of your application's +state and focus on a specific piece of functionality; and Smart Components which take in your application's state +and stich together Dumb Components. This library has a Higher-Order Component called `Connector` for providing specific +pieces of state to a Smart Component automatically and handling store changes gracefully. + +Similar to `Provider`, the `Connector` expects a single [function as a child](#child-must-be-a-function) and a function +as the `select` prop. The selector function takes a single argument of the entire root store and returns an object to be +passed as properties to the child. In addition to the properties returned by the selector, a `dispatch` function is +passed to the child for dispatching actions. + +It is the responsibility of a Smart Component to bind action creators to the given `dispatch` function and pass those +bound creators to Dumb Components. Redux provides a `bindActionCreators` to streamline the process of binding action +creators to the dispatch function. + +#### Child must be a function + +React's context feature is technically not feature complete and has a bug in the current (0.13) release. The work around +for this bug is to pass a function as the child which will then return the Component desired. + +## Decorators + +ECMA Script 6 introduces a new syntactic feature called Decorators. `react-redux` comes with two decorators to simply +creating smart components and providing the store at the top level. Here is the same example at the top of this document +using decorators: + +```js +import { bindActionCreators } from 'redux'; +import { connect, provide } from `react-redux'; + +// store setup left out... see the Redux documentation for initializing action creators, reducers and the store. + +// Note: you do *not* have to `@provide` every component you `@connect`, but this abritrarily simple example only has +one Smart Component at the top level. A more complete example may have a root level component that is only decorated +with `@provide` and many smart components decorated with `@connect`. +@provide(store) +@connect((state) => ({ counter: state.counter })) +class CounterApp { + render() { + return ; + } +} + +const containerElement = document.getElementByID('container'); +React.run(, containerElement); +``` From a6d6fe94e7b3523b5290eabe088e990b1f0cb956 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 31 Jul 2015 18:19:03 +0300 Subject: [PATCH 2/7] Update README.md --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c48001e30..bc07aaea5 100644 --- a/README.md +++ b/README.md @@ -81,13 +81,14 @@ using decorators: ```js import { bindActionCreators } from 'redux'; -import { connect, provide } from `react-redux'; +import { connect, provide } from 'react-redux'; // store setup left out... see the Redux documentation for initializing action creators, reducers and the store. // Note: you do *not* have to `@provide` every component you `@connect`, but this abritrarily simple example only has -one Smart Component at the top level. A more complete example may have a root level component that is only decorated -with `@provide` and many smart components decorated with `@connect`. +// one Smart Component at the top level. A more complete example may have a root level component that is only decorated +// with `@provide` and many smart components decorated with `@connect`. + @provide(store) @connect((state) => ({ counter: state.counter })) class CounterApp { From 8ffb2fab837409ba4750a3722f32e8f2f0becfe9 Mon Sep 17 00:00:00 2001 From: William Buchwalter Date: Fri, 31 Jul 2015 17:01:08 -0400 Subject: [PATCH 3/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bc07aaea5..17fc273dc 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ for this bug is to pass a function as the child which will then return the Compo ## Decorators -ECMA Script 6 introduces a new syntactic feature called Decorators. `react-redux` comes with two decorators to simply +ECMA Script 7 introduces a new syntactic feature called Decorators. `react-redux` comes with two decorators to simply creating smart components and providing the store at the top level. Here is the same example at the top of this document using decorators: From 91b3f4d96222029ae13433f227825329bf2c1ac9 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 1 Aug 2015 03:31:07 +0300 Subject: [PATCH 4/7] Update README.md --- README.md | 277 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 226 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 17fc273dc..f98bb120d 100644 --- a/README.md +++ b/README.md @@ -4,60 +4,255 @@ react-redux Higher-order React components for [Redux](https://github.com/gaearon/redux). - [Quick Start](#quick-start) -- [Components](#components) +- [Recommended API](#recommended-api) + - [`connect`](#connect) - [`Provider`](#provider) +- [Deprecated API](#deprecated-api) - [`Connector`](#connector) -- [Decorators](#decorators) + - [`provide`](#provide) ## Quick Start -Hooking up the Counter example into React looks like this: +React bindings for Redux embrace the idea of [dividing “smart” and “dumb” components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0). + +It is advisable that only top-level components of your app (such as route handlers, for example) are aware of Redux. Components below them should be “dumb” and receive all data via props. + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
LocationUse React-ReduxTo read data, theyTo change data, they
“Smart” ComponentsTop level, route handlersYes + Subscribe to Redux stateDispatch Redux actions
“Dumb” ComponentsMiddle and leaf componentsNo + Read data from propsInvoke callbacks from props
+
+ +### “Dumb” component is unaware of Redux + +Let’s say we have a `` “dumb” component with a number `counter` prop, and an `increment` function prop that it will call when user presses an “Increment” button: ```js -import { bindActionCreators } from 'redux'; -import { Provider, Connector } from 'react-redux'; +import { Component } from 'react'; + +export default class Counter extends Component { + render() { + return ( + + ); + } +} +``` + +### “Smart” component is `connect()`-ed to Redux + +Here’s how we hook it up to the Redux Store. + +We will use `connect()` function provided by `react-redux` to turn a “dumb” `Counter` into a smart component. With the current API, we’ll need to add an intermediate `CounterContainer` component, but we will soon make `connect` API more powerful so this won’t be required. The `connect()` function lets you specify *which exactly* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity. + +Our `CounterContainer` necessary to hook `Counter` up to a Redux store looks like this: + +```js +import { Component } from 'react'; +import { connect } from 'react-redux'; + +// Assuming this is our “dumb” counter +import Counter from '../components/Counter'; + +// Assuming these are Redux action creators +import { increment } from './actionCreators'; + +function select(state) { + // Which part of the Redux global state does our component want to receive as props? + return { + counter: state.counter + }; +} + +class CounterContainer { + render() { + // connect() call below will inject `dispatch` and + // every key returned by `select` as props into our container: + const { dispatch, counter } = this.props; + + // render our “dumb” component, hooking up state to data props + // and using “dispatch action produced by this action creator” as callbacks. + // this is a “bridge” between a Redux-aware world above and Redux-unaware world below. + + return ( + dispatch(increment())} /> + ); + } +} + +// Don't forget to actually use connect! +export default connect(select)(CounterContainer); + +// You might have noticed that we used parens twice. +// This is called partial applications, and it lets people +// use ES7 decorator proposal syntax: +// +// @connect(select) +// export default class CounterContainer { ... } +// +// Don’t forget decorators are experimental! And they +// desugar to function calls anyway as example above demonstrates. +``` -// store setup left out... see the Redux documentation for initializing action creators, reducers and the store. +As you can see, action creators in Redux just return actions, but we need to manually “bind” them to the `dispatch` function for our Redux store. Why don’t we bind action creators to a store right away? This is because of the so-called “universal” apps that need to render on the server. They would have a different store instance for every request, so we don’t know the store instance during the definition! + +### Binding many action creators + +Binding can get cumbersome, so Redux provides a `bindActionCreators` helper to turn many action creator methods into an object with methods called the same, but bound to a particular `dispatch` function: + +```js + +import { Component } from 'react'; +import { connect } from 'react-redux'; + +// A helper provided by Redux! +import { bindActionCreators } from 'redux'; +// Import many action creators as a single object (like `require('./actionCreators')` in CommonJS) +import * as CounterActionCreators from './actionCreators'; +import Counter from '../components/Counter'; function select(state) { - return { counter: state.counter }; + return { + counter: state.counter + }; } -class CounterApp { + +class CounterContainer { render() { + const { dispatch, counter } = this.props; + + // This time, we use `bindActionCreators` to bind many action creators + // to a particular dispatch function from our Redux store. + return ( - - {({ counter, dispatch }) => - /* Yes this is child as a function. See the Connector section for why this is. */ - - } - + ); } } -const containerElement = document.getElementByID('container'); -React.run(( +// Don't forget to actually use connect! +export default connect(select)(CounterContainer); +``` + +You can have many `connect()`-ed components in your app at any depth, and you can even nest them. It is however preferable that you try to only `connect()` top-level components such as route handlers, so the data flow in your application stays predictable. + +### Injecting Redux store + +Finally, how do we actually hook it up to a Redux store? We need to create the store somewhere at the root of our component hierarchy. For client apps, the root component is a good place. For server rendering, you can do this in the request handler. + +The trick is to wrap the whole view hierarchy into `{() => ... }` where `Provider` is imported from `react-redux`. One gotcha is that **the child of `Provider` must be a function**. This is to work around an issue with how context (undocumented feature we have to rely on to pass Redux data to components below) works in React 0.13. In React 0.14, you will be able to put your view hierarchy in `` without wrapping it into a function. + +```js +import { Provider } from 'react-redux'; + +class App { + render() { + // ... + } +} + +const targetEl = document.getElementById('root'); + +React.render(( - {() => } + {() => } -), containerElement); +), targetEl); + +// or, if you use React Router 0.13, + +// Router.run(routes, Router.HistoryLocation, (Handler) => { +// React.render( +// +// {() => } +// , +// targetEl +// ); +// }); + +// or, if you use React Router 1.0, +// React.render( +// +// {() => ...} +// , +// targetEl +// ); ``` -## Components +## Recommended API + +### `connect` + +```js +export default connect(select)(MyComponent); +``` + +Returns a component class that injects the Redux Store’s `dispatch` as a prop into `Component` so it can dispatch Redux actions. + +The returned component also subscribes to the updates of Redux store. Any time the state changes, it calls the `select` function passed to it. The selector function takes a single argument of the entire Redux store’s state and returns an object to be passed as props. Use [reselect](https://github.com/faassen/reselect) to efficiently compose selectors and memoize derived data. + +Both `dispatch` and every property returned by `select` will be provided to your `Component` as `props`. + +It is the responsibility of a Smart Component to bind action creators to the given `dispatch` function and pass those +bound creators to Dumb Components. Redux provides a `bindActionCreators` to streamline the process of binding action +creators to the dispatch function. + +**To use `connect()`, the root component of your app must be wrapped into `{() => ... }` before being rendered.** + +See the usage example in the quick start above. ### `Provider` +```js + + {() => } + +``` + The `Provider` component takes a `store` prop and a [function as a child](#child-must-be-a-function) with your root component. The `store` is then passed to the child via React's `context`. This is the entry point for Redux and must be present in order to use the `Connector` component. +## Deprecated API + ### `Connector` -Components in React can be divided into two categories: Dumb Components, which have no knowledge of your application's -state and focus on a specific piece of functionality; and Smart Components which take in your application's state -and stich together Dumb Components. This library has a Higher-Order Component called `Connector` for providing specific -pieces of state to a Smart Component automatically and handling store changes gracefully. +>**Note** +>Deprecated. Use `connect()` instead. + +```js + + {props => } + +``` Similar to `Provider`, the `Connector` expects a single [function as a child](#child-must-be-a-function) and a function as the `select` prop. The selector function takes a single argument of the entire root store and returns an object to be @@ -68,35 +263,15 @@ It is the responsibility of a Smart Component to bind action creators to the giv bound creators to Dumb Components. Redux provides a `bindActionCreators` to streamline the process of binding action creators to the dispatch function. -#### Child must be a function - -React's context feature is technically not feature complete and has a bug in the current (0.13) release. The work around -for this bug is to pass a function as the child which will then return the Component desired. +We don’t recommend its use anymore because it’s not as flexible as `connect()` and has some performance implications for more complex scenarios. -## Decorators +### `provide` -ECMA Script 7 introduces a new syntactic feature called Decorators. `react-redux` comes with two decorators to simply -creating smart components and providing the store at the top level. Here is the same example at the top of this document -using decorators: +>**Note** +>Deprecated. Use `` instead. ```js -import { bindActionCreators } from 'redux'; -import { connect, provide } from 'react-redux'; - -// store setup left out... see the Redux documentation for initializing action creators, reducers and the store. - -// Note: you do *not* have to `@provide` every component you `@connect`, but this abritrarily simple example only has -// one Smart Component at the top level. A more complete example may have a root level component that is only decorated -// with `@provide` and many smart components decorated with `@connect`. - -@provide(store) -@connect((state) => ({ counter: state.counter })) -class CounterApp { - render() { - return ; - } -} - -const containerElement = document.getElementByID('container'); -React.run(, containerElement); +export default provide(store)(MyRootComponent); ``` + +This higher-order component provides the same functionality as ``. We don’t recommend it anymore because it’s less flexible than `` and doesn’t work with [redux-devtools](http://github.com/gaearon/redux-devtools) or server rendering. From 6c668308c6343d706cb7eceb900ff6846b048626 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 1 Aug 2015 03:40:33 +0300 Subject: [PATCH 5/7] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f98bb120d..adee38400 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,8 @@ Here’s how we hook it up to the Redux Store. We will use `connect()` function provided by `react-redux` to turn a “dumb” `Counter` into a smart component. With the current API, we’ll need to add an intermediate `CounterContainer` component, but we will soon make `connect` API more powerful so this won’t be required. The `connect()` function lets you specify *which exactly* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity. -Our `CounterContainer` necessary to hook `Counter` up to a Redux store looks like this: +Our `CounterContainer` that’s necessary to hook `Counter` up to a Redux store looks like this: +(This will be much less verbose in the next versions.) ```js import { Component } from 'react'; From 216dcd2a1339fb3728027f6910e686cdc8c73bf8 Mon Sep 17 00:00:00 2001 From: Artem Sapegin Date: Sat, 1 Aug 2015 10:08:17 +0200 Subject: [PATCH 6/7] Components should extend Component class. --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index adee38400..d7cc0e728 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ function select(state) { }; } -class CounterContainer { +class CounterContainer extends Component { render() { // connect() call below will inject `dispatch` and // every key returned by `select` as props into our container: @@ -145,7 +145,7 @@ function select(state) { }; } -class CounterContainer { +class CounterContainer extends Component { render() { const { dispatch, counter } = this.props; @@ -172,9 +172,10 @@ Finally, how do we actually hook it up to a Redux store? We need to create the s The trick is to wrap the whole view hierarchy into `{() => ... }` where `Provider` is imported from `react-redux`. One gotcha is that **the child of `Provider` must be a function**. This is to work around an issue with how context (undocumented feature we have to rely on to pass Redux data to components below) works in React 0.13. In React 0.14, you will be able to put your view hierarchy in `` without wrapping it into a function. ```js +import { Component } from 'react'; import { Provider } from 'react-redux'; -class App { +class App extends Component { render() { // ... } From 389eaf4957b8aba54578ae4fa4fc5ffdeed85b50 Mon Sep 17 00:00:00 2001 From: Mike Kidder Date: Sun, 2 Aug 2015 16:50:53 -0500 Subject: [PATCH 7/7] change to npm tasks; sync packages with redux --- package.json | 25 ++++++++++++--------- scripts/browser | 8 ------- scripts/build | 4 ---- scripts/clean | 3 --- scripts/lint | 3 --- scripts/prepublish | 6 ----- scripts/test | 3 --- scripts/test-cov | 3 --- scripts/test-watch | 3 --- webpack.config.js => webpack.config.base.js | 19 ---------------- webpack.config.development.js | 14 ++++++++++++ webpack.config.production.js | 20 +++++++++++++++++ 12 files changed, 48 insertions(+), 63 deletions(-) delete mode 100755 scripts/browser delete mode 100755 scripts/build delete mode 100755 scripts/clean delete mode 100755 scripts/lint delete mode 100755 scripts/prepublish delete mode 100755 scripts/test delete mode 100755 scripts/test-cov delete mode 100755 scripts/test-watch rename webpack.config.js => webpack.config.base.js (61%) create mode 100644 webpack.config.development.js create mode 100644 webpack.config.production.js diff --git a/package.json b/package.json index 0111b0359..6cc0cd2a5 100644 --- a/package.json +++ b/package.json @@ -4,14 +4,16 @@ "description": "Redux bindings for React", "main": "./lib/index.js", "scripts": { - "browser": "scripts/browser", - "build": "scripts/build", - "clean": "scripts/clean", - "lint": "scripts/lint", - "prepublish": "scripts/prepublish", - "test": "scripts/test", - "test:watch": "scripts/test-watch", - "test:cov": "scripts/test-cov" + "build:lib": "babel src --out-dir lib", + "build:umd": "webpack src/index.js dist/react-redux.js --config webpack.config.development.js", + "build:umd:min": "webpack src/index.js dist/react-redux.min.js --config webpack.config.production.js", + "build": "npm run build:lib && npm run build:umd && npm run build:umd:min", + "clean": "rimraf lib dist coverage", + "lint": "eslint src test", + "prepublish": "npm run clean && npm run build", + "test": "mocha --compilers js:babel/register --recursive", + "test:watch": "npm test -- --watch", + "test:cov": "babel-node ./node_modules/isparta/bin/isparta cover ./node_modules/mocha/bin/_mocha -- --recursive" }, "repository": { "type": "git", @@ -36,14 +38,15 @@ "homepage": "https://github.com/gaearon/react-redux", "devDependencies": { "babel": "^5.5.8", - "babel-core": "5.6.15", + "babel-core": "5.6.18", "babel-eslint": "^3.1.15", "babel-loader": "^5.1.4", "eslint": "^0.23", "eslint-config-airbnb": "0.0.6", "eslint-plugin-react": "^2.3.0", - "expect": "^1.6.0", - "istanbul": "^0.3.15", + "expect": "^1.8.0", + "isparta": "^3.0.3", + "istanbul": "^0.3.17", "jsdom": "~5.4.3", "mocha": "^2.2.5", "mocha-jsdom": "~0.4.0", diff --git a/scripts/browser b/scripts/browser deleted file mode 100755 index 028c08251..000000000 --- a/scripts/browser +++ /dev/null @@ -1,8 +0,0 @@ -#!/bin/sh -e - -WEBPACK_CMD=node_modules/.bin/webpack - -mkdir -p dist - -$WEBPACK_CMD src/index.js dist/react-redux.js -NODE_ENV=production $WEBPACK_CMD src/index.js dist/react-redux.min.js diff --git a/scripts/build b/scripts/build deleted file mode 100755 index 50a3a47dc..000000000 --- a/scripts/build +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -e - -rm -rf lib -`npm bin`/babel src --out-dir lib diff --git a/scripts/clean b/scripts/clean deleted file mode 100755 index 4f674f6e1..000000000 --- a/scripts/clean +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh - -`npm bin`/rimraf ./lib diff --git a/scripts/lint b/scripts/lint deleted file mode 100755 index fb2aaaa77..000000000 --- a/scripts/lint +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh - -`npm bin`/eslint src test diff --git a/scripts/prepublish b/scripts/prepublish deleted file mode 100755 index 00260c55f..000000000 --- a/scripts/prepublish +++ /dev/null @@ -1,6 +0,0 @@ -#!/bin/sh -e - -sh scripts/lint -sh scripts/clean -sh scripts/browser -sh scripts/build diff --git a/scripts/test b/scripts/test deleted file mode 100755 index 8f4715ad6..000000000 --- a/scripts/test +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh - -NODE_ENV=test `npm bin`/mocha --compilers js:babel/register --recursive \ No newline at end of file diff --git a/scripts/test-cov b/scripts/test-cov deleted file mode 100755 index 3389f9cab..000000000 --- a/scripts/test-cov +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh - -`npm bin`/istanbul cover `npm bin`/_mocha -- --compilers js:babel/register --recursive \ No newline at end of file diff --git a/scripts/test-watch b/scripts/test-watch deleted file mode 100755 index ce4725bed..000000000 --- a/scripts/test-watch +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh - -NODE_ENV=test `npm bin`/mocha --compilers js:babel/register --recursive --watch \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.base.js similarity index 61% rename from webpack.config.js rename to webpack.config.base.js index 353f6df3d..0b7cd4867 100644 --- a/webpack.config.js +++ b/webpack.config.base.js @@ -2,24 +2,6 @@ var webpack = require('webpack'); -var plugins = [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) - }), - new webpack.optimize.OccurenceOrderPlugin() -]; - -if (process.env.NODE_ENV === 'production') { - plugins.push( - new webpack.optimize.UglifyJsPlugin({ - compressor: { - screw_ie8: true, - warnings: false - } - }) - ); -} - var reactExternal = { root: 'React', commonjs2: 'react', @@ -49,7 +31,6 @@ module.exports = { library: 'ReactRedux', libraryTarget: 'umd' }, - plugins: plugins, resolve: { extensions: ['', '.js'] } diff --git a/webpack.config.development.js b/webpack.config.development.js new file mode 100644 index 000000000..e509d7cd2 --- /dev/null +++ b/webpack.config.development.js @@ -0,0 +1,14 @@ +'use strict'; + +var webpack = require('webpack'); +var baseConfig = require('./webpack.config.base'); + +var config = Object.create(baseConfig); +config.plugins = [ + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('development') + }) +]; + +module.exports = config; diff --git a/webpack.config.production.js b/webpack.config.production.js new file mode 100644 index 000000000..f4589cc06 --- /dev/null +++ b/webpack.config.production.js @@ -0,0 +1,20 @@ +'use strict'; + +var webpack = require('webpack'); +var baseConfig = require('./webpack.config.base'); + +var config = Object.create(baseConfig); +config.plugins = [ + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production') + }), + new webpack.optimize.UglifyJsPlugin({ + compressor: { + screw_ie8: true, + warnings: false + } + }) +]; + +module.exports = config;