Add ES modules build

Author: mjackson

.gitignore

@@ -1,3 +1,4 @@
+es
 node_modules
 umd
 /*.js

README.md

@@ -19,10 +19,10 @@ Using [npm](https://www.npmjs.com/):
 Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:
 
 ```js
-// using an ES6 transpiler, like babel
+// using ES modules
 import Media from 'react-media'
 
-// not using an ES6 transpiler
+// using CommonJS modules
 var Media = require('react-media')
 ```
 

modules/.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    [ "es2015", { "loose": true } ],
+    "../tools/es2015-preset",
     "stage-1",
     "react"
   ],

package.json

@@ -6,13 +6,10 @@
   "author": "Michael Jackson",
   "license": "MIT",
   "scripts": {
-    "build": "node ./scripts/build.js",
+    "build": "node ./tools/build.js",
     "clean": "git clean -e '!node_modules' -fdX .",
-    "build-lib": "babel ./modules -d . --ignore '__tests__'",
-    "build-umd": "webpack modules/index.js umd/react-media.js",
-    "build-min": "webpack -p modules/index.js umd/react-media.min.js",
     "release": "node ./scripts/release.js",
-    "prepublish": "node ./scripts/build.js",
+    "prepublish": "node ./tools/build.js",
     "lint": "eslint modules",
     "test": "npm run lint && karma start"
   },

scripts/build.js

@@ -0,0 +1,44 @@
+const fs = require('fs')
+const execSync = require('child_process').execSync
+const inInstall = require('in-publish').inInstall
+const prettyBytes = require('pretty-bytes')
+const gzipSize = require('gzip-size')
+
+if (inInstall())
+  process.exit(0)
+
+const exec = (command, extraEnv) =>
+  execSync(command, {
+    stdio: 'inherit',
+    env: Object.assign({}, process.env, extraEnv)
+  })
+
+console.log('Building CommonJS modules ...')
+
+exec('babel modules -d . --ignore __tests__', {
+  BABEL_ENV: 'cjs'
+})
+
+console.log('\nBuilding ES modules ...')
+
+exec('babel modules -d es --ignore __tests__', {
+  BABEL_ENV: 'es'
+})
+
+console.log('\nBuilding react-media.js ...')
+
+exec('webpack modules/index.js umd/react-media.js', {
+  NODE_ENV: 'production'
+})
+
+console.log('\nBuilding react-media.min.js ...')
+
+exec('webpack -p modules/index.js umd/react-media.min.js', {
+  NODE_ENV: 'production'
+})
+
+const size = gzipSize.sync(
+  fs.readFileSync('umd/react-media.min.js')
+)
+
+console.log('\ngzipped, the UMD build is %s', prettyBytes(size))

tools/build.js

@@ -0,0 +1,12 @@
+const buildPreset = require('babel-preset-es2015').buildPreset
+
+const BABEL_ENV = process.env.BABEL_ENV
+
+module.exports = {
+  presets: [
+    [ buildPreset, {
+      loose: true,
+      modules: BABEL_ENV === 'es' ? false : 'commonjs'
+    } ]
+  ]
+}