Add custom babel example, update readme, bump ver

Author: Jared Palmer

README.md

@@ -12,8 +12,7 @@ Backpack is minimalistic build system for Node.js. Inspired by Facebook's [creat
 - Live reload (on saves, add/delete file, etc.)
 - Zero-config, one dependency.
 
-HOWEVER, you can configure Backpack to your project's needs. You can [modify the underlying Webpack 2 configuration](#custom-configuration). 
-
+HOWEVER, you can configure Backpack to your project's needs by extending [the underlying Webpack 2 configuration](#custom-configuration). 
 
 ## How to use
 
@@ -50,18 +49,20 @@ Successful builds will show a console like this. *Note: screenshot taken from ru
 
 ### Custom configuration
 
-For custom advanced behavior, you can create a `backpack.config.js` in the root of your project's directory (next to `package.json`). Note: `backpack.config.js` is a regular Node.js module, not a JSON file. It gets used by the Backpack build phase, but does not itself go through babel transformation. So only use JS that's supported by your current Node.js version.
+For custom advanced behavior, you can create a `backpack.config.js` in the root of your project's directory (next to `package.json`).
 
 ```js
 // backpack.config.js
+// IMPORTANT: This file is not going through babel transformation.
+// You can however use the ES2015 features supported by your Node.js version.
 module.exports = {
   /* config options here */
 }
 ```
 
-### Customizing Webpack
+### Customizing webpack config
 
-[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-webpack-config) 
+[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-webpack-config)  
 
 To extend webpack, you can define a function that extends its config via `backpack.config.js`.
 
@@ -76,8 +77,31 @@ module.exports = {
 }
 ```
 
+### Customizing babel config
+
+[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-babel-config)  
+
+To extend our usage of `babel`, you can define a `.babelrc` file at the root of your app. This file is optional.
+
+If found, Backpack will consider it to be the *source of truth*. Thus it must define what Backpack needs as well, which is the `backpack-core/babel` preset.
+
+This is designed so that you are not surprised by modifications we could make to the default `babel` configurations.
+
+Here's an example `.babelrc` file:
+
+```js
+{
+  "presets": [
+    "backpack-core",
+    "stage-0"
+  ],
+}
+```
+
+*Note: This works [exactly like Next.js does](https://github.com/zeit/next.js#customizing-babel-config).*
 
 ### Building for Production
+
 Add a npm script for the build step:
 
 ```json

examples/basic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-examples-basic",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "start": "node ./build/main.js",
     "dev": "backpack dev",
@@ -12,6 +12,6 @@
     "express": "^4.14.0"
   },
   "devDependencies": {
-    "backpack-core": "0.0.5"
+    "backpack-core": "0.0.6"
   }
 }

examples/with-custom-babel-config/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "backpack-core/babel",
+    "stage-0"
+  ]
+}

examples/with-custom-babel-config/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+build
+npm-debug.log

examples/with-custom-babel-config/README.md

@@ -0,0 +1,28 @@
+# Custom Babel Configuration Example
+
+## How to use
+Download the example (or clone the whole project)[https://github.com/palmerhq/backpack.git]:
+```bash
+curl https://codeload.github.com/palmerhq/backpack/tar.gz/master | tar -xz --strip=2 backpack-master/examples/with-custom-babel-config
+cd with-custom-babel-config
+```
+Install it and run:
+```bash
+npm install
+npm run dev
+```
+
+## Idea behind the example
+This demonstrates how extend the default Backpack babel configuration with a custom `.babelrc` file.
+More specifically, this example shows how to add all `stage-0` transformations through `babel-preset-stage-0`.
+
+Be sure to include `backpack-core/babel` in your `.babelrc` as the first item in the presets array:
+
+```json
+{
+  presets: [
+    "backpack-core/babel",
+    "..."
+  ]
+}
+```

examples/with-custom-babel-config/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "backpack-examples-with-custom-babel-config",
+  "version": "0.0.6",
+  "scripts": {
+    "start": "node ./build/main.js",
+    "dev": "backpack dev",
+    "build": "backpack build",
+    "postinstall": "backpack build"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.14.0"
+  },
+  "devDependencies": {
+    "babel-preset-stage-0": "^6.16.0",
+    "backpack-core": "0.0.6"
+  }
+}

examples/with-custom-babel-config/src/index.js

@@ -0,0 +1,16 @@
+const randomNo = Math.ceil(Math.random() * 100)
+
+// `do` expressions are a new syntax proposal.
+// @see: https://babeljs.io/docs/plugins/transform-do-expressions/
+const message = do {
+  if (randomNo < 30) {
+    'Do not give up. Try again.'
+  } else if (randomNo < 60) {
+    'You are a lucky guy'
+  } else {
+    'You are soooo lucky!'
+  }
+}
+
+console.log(`number: ${randomNo}`)
+console.log(`message: ${message}`)

examples/with-custom-webpack-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-examples-with-custom-webpack-config",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "start": "node ./build/main.js",
     "dev": "backpack dev",
@@ -12,6 +12,6 @@
     "express": "^4.14.0"
   },
   "devDependencies": {
-    "backpack-core": "0.0.5"
+    "backpack-core": "0.0.6"
   }
 }

examples/with-jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-examples-with-jest",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "start": "node ./build/main.js",
     "test": "NODE_ENV=test jest",
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "babel-jest": "^18.0.0",
-    "backpack-core": "0.0.5",
+    "backpack-core": "0.0.6",
     "jest-cli": "^18.1.0",
     "supertest": "^2.0.1"
   },

packages/backpack-core/README.md

@@ -12,8 +12,7 @@ Backpack is minimalistic build system for Node.js. Inspired by Facebook's [creat
 - Live reload (on saves, add/delete file, etc.)
 - Zero-config, one dependency.
 
-HOWEVER, you can configure Backpack to your project's needs. You can [modify the underlying Webpack 2 configuration](#custom-configuration). 
-
+HOWEVER, you can configure Backpack to your project's needs by extending [the underlying Webpack 2 configuration](#custom-configuration). 
 
 ## How to use
 
@@ -50,18 +49,20 @@ Successful builds will show a console like this. *Note: screenshot taken from ru
 
 ### Custom configuration
 
-For custom advanced behavior, you can create a `backpack.config.js` in the root of your project's directory (next to `package.json`). Note: `backpack.config.js` is a regular Node.js module, not a JSON file. It gets used by the Backpack build phase, but does not itself go through babel transformation. So only use JS that's supported by your current Node.js version.
+For custom advanced behavior, you can create a `backpack.config.js` in the root of your project's directory (next to `package.json`).
 
 ```js
 // backpack.config.js
+// IMPORTANT: This file is not going through babel transformation.
+// You can however use the ES2015 features supported by your Node.js version.
 module.exports = {
   /* config options here */
 }
 ```
 
-### Customizing Webpack
+### Customizing webpack config
 
-[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-webpack-config) 
+[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-webpack-config)  
 
 To extend webpack, you can define a function that extends its config via `backpack.config.js`.
 
@@ -76,8 +77,31 @@ module.exports = {
 }
 ```
 
+### Customizing babel config
+
+[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-babel-config)  
+
+To extend our usage of `babel`, you can define a `.babelrc` file at the root of your app. This file is optional.
+
+If found, Backpack will consider it to be the *source of truth*. Thus it must define what Backpack needs as well, which is the `backpack-core/babel` preset.
+
+This is designed so that you are not surprised by modifications we could make to the default `babel` configurations.
+
+Here's an example `.babelrc` file:
+
+```js
+{
+  "presets": [
+    "backpack-core",
+    "stage-0"
+  ],
+}
+```
+
+*Note: This works [exactly like Next.js does](https://github.com/zeit/next.js#customizing-babel-config).*
 
 ### Building for Production
+
 Add a npm script for the build step:
 
 ```json