New build system for 2.0

Author: mjackson

.gitignore

@@ -1,5 +1,5 @@
-es
 node_modules
+
+cjs
+esm
 umd
-/*.js
-!webpack.config.js

modules/.babelrc

@@ -1,14 +1,7 @@
 {
   "presets": [
-    "../tools/es2015-preset",
+    [ "es2015", { "loose": true } ],
     "stage-1",
     "react"
-  ],
-  "env": {
-    "production": {
-      "plugins": [
-        "transform-react-remove-prop-types"
-      ]
-    }
-  }
+  ]
 }

package.json

@@ -5,12 +5,19 @@
   "repository": "ReactTraining/react-media",
   "license": "MIT",
   "author": "Michael Jackson",
-  "files": ["Media.js", "es", "index.js", "umd"],
+  "files": [
+    "cjs",
+    "esm",
+    "umd"
+  ],
+  "main": "cjs/react-media.js",
+  "module": "esm/react-media.js",
+  "unpkg": "umd/react-media.js",
   "scripts": {
-    "build": "node ./tools/build.js",
+    "build": "node ./scripts/build.js",
     "clean": "git clean -fdX .",
-    "prepublishOnly": "node ./tools/build.js",
-    "release": "node ./tools/release.js",
+    "prepublishOnly": "node ./scripts/build.js",
+    "release": "node ./scripts/release.js",
     "lint": "eslint modules",
     "test": "jest"
   },
@@ -24,8 +31,9 @@
   "devDependencies": {
     "babel-cli": "^6.11.4",
     "babel-eslint": "^7.0.0",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-react-remove-prop-types": "^0.3.2",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-1": "^6.5.0",
@@ -35,13 +43,26 @@
     "eslint-plugin-react": "^6.0.0",
     "gzip-size": "^3.0.0",
     "jest": "^20.0.4",
+    "pascal-case": "^2.0.1",
     "pretty-bytes": "^4.0.2",
     "react": "^15.4.1 || ^0.14.7",
     "react-dom": "^15.3.0 || ^0.14.7",
     "readline-sync": "^1.4.4",
-    "webpack": "^1.13.1"
+    "rollup": "^0.53.4",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "^8.2.6",
+    "rollup-plugin-node-resolve": "^3.0.2",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^2.0.1"
   },
-  "keywords": ["react", "media", "media query", "query", "css", "responsive"],
+  "keywords": [
+    "react",
+    "media",
+    "media query",
+    "query",
+    "css",
+    "responsive"
+  ],
   "prettier": {
     "printWidth": 100,
     "semi": false

scripts/build.js

@@ -0,0 +1,41 @@
+const fs = require("fs")
+const path = require("path")
+const execSync = require("child_process").execSync
+const prettyBytes = require("pretty-bytes")
+const pascalCase = require("pascal-case")
+const gzipSize = require("gzip-size")
+
+process.chdir(path.resolve(__dirname, ".."))
+
+const exec = (command, extraEnv) =>
+  execSync(command, {
+    stdio: "inherit",
+    env: Object.assign({}, process.env, extraEnv)
+  })
+
+const packageName = require("../package").name
+
+console.log("\nBuilding ES modules...")
+
+exec(`rollup -c scripts/config.js -f es -o esm/${packageName}.js`)
+
+console.log("\nBuilding CommonJS modules...")
+
+exec(`rollup -c scripts/config.js -f cjs -o cjs/${packageName}.js`)
+
+console.log("\nBuilding UMD modules...")
+
+const varName = pascalCase(packageName)
+
+exec(`rollup -c scripts/config.js -f umd -n ${varName} -o umd/${packageName}.js`, {
+  BUILD_ENV: "development"
+})
+
+exec(`rollup -c scripts/config.js -f umd -n ${varName} -o umd/${packageName}.min.js`, {
+  BUILD_ENV: "production"
+})
+
+console.log(
+  "\nThe minified, gzipped UMD build is %s",
+  prettyBytes(gzipSize.sync(fs.readFileSync(`umd/${packageName}.min.js`)))
+)

scripts/config.js

@@ -0,0 +1,50 @@
+const babel = require("rollup-plugin-babel")
+const commonjs = require("rollup-plugin-commonjs")
+const replace = require("rollup-plugin-replace")
+const resolve = require("rollup-plugin-node-resolve")
+const uglify = require("rollup-plugin-uglify")
+
+const getPlugins = env => {
+  const plugins = [resolve()]
+
+  if (env) {
+    plugins.push(
+      replace({
+        "process.env.NODE_ENV": JSON.stringify(env)
+      })
+    )
+  }
+
+  plugins.push(
+    babel({
+      exclude: "node_modules/**",
+      babelrc: false,
+      presets: [["es2015", { loose: true, modules: false }], "stage-1", "react"],
+      plugins: ["external-helpers"].concat(
+        env === "production" ? ["dev-expression", "transform-react-remove-prop-types"] : []
+      )
+    }),
+    commonjs({
+      include: /node_modules/
+    })
+  )
+
+  if (env === "production") {
+    plugins.push(uglify())
+  }
+
+  return plugins
+}
+
+const config = {
+  input: "modules/index.js",
+  output: {
+    globals: {
+      react: "React"
+    }
+  },
+  external: ["react"],
+  plugins: getPlugins(process.env.BUILD_ENV)
+}
+
+module.exports = config

tools/release.js renamed to scripts/release.js

@@ -1,28 +1,24 @@
-const resolvePath = require('path').resolve
-const readFileSync = require('fs').readFileSync
-const execSync = require('child_process').execSync
-const prompt = require('readline-sync').question
+const fs = require("fs")
+const path = require("path")
+const execSync = require("child_process").execSync
+const prompt = require("readline-sync").question
 
-const exec = (command) =>
-  execSync(command, { stdio: 'inherit' })
+process.chdir(path.resolve(__dirname, ".."))
 
-const getPackageVersion = () =>
-  JSON.parse(readFileSync(resolvePath(__dirname, '../package.json'))).version
+const exec = command => execSync(command, { stdio: "inherit" })
 
-if (process.cwd() !== resolvePath(__dirname, '..')) {
-  console.error('The release script must be run from the repo root')
-  process.exit(1)
-}
+const getPackageVersion = () =>
+  JSON.parse(fs.readFileSync(path.resolve(__dirname, "../package.json"))).version
 
 // Get the next version, which may be specified as a semver
 // version number or anything `npm version` recognizes. This
 // is a "pre-release" if nextVersion is premajor, preminor,
 // prepatch, or prerelease
 const nextVersion = prompt(`Next version (current version is ${getPackageVersion()})? `)
-const isPrerelease = nextVersion.substr(0, 3) === 'pre' || nextVersion.indexOf('-') !== -1
+const isPrerelease = nextVersion.substr(0, 3) === "pre" || nextVersion.indexOf("-") !== -1
 
 // 1) Make sure the tests pass
-exec('npm test')
+exec("npm test")
 
 // 2) Increment the package version in package.json
 // 3) Create a new commit
@@ -31,7 +27,7 @@ exec(`npm version ${nextVersion} -m "Version %s"`)
 
 // 5) Publish to npm. Use the "next" tag for pre-releases,
 // "latest" for all others
-exec(`npm publish --tag ${isPrerelease ? 'next' : 'latest'}`)
+exec(`npm publish --tag ${isPrerelease ? "next" : "latest"}`)
 
 // 6) Push the v* tag to GitHub
 exec(`git push -f origin v${getPackageVersion()}`)