androide-osorio/.babelrc

## .babelrc
{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

## app.js
// default import (give it any name you want)
// import config from './src/config';

// named import
// import {apiKey} from './src/config';

// named export with an alias
// import { apiKey as API_KEY } from './src/config';

// import a both named and default exports from a module in a single line
import config, {apiKey as API_KEY} from './config';

import User, {createUrl, gravatar} from './users';

const andrew = User('Andres Osorio', 'androideosorio@me.com', 'https://androideosorio.me');
const profile = createUrl(andrew.name);
const andrewGravatar = gravatar(andrew.email);

console.log(andrew);
console.log(profile);
console.log(andrewGravatar);

## config.js
// example configuration module

// named export: you must import
// these kind of exports with the exact
// same name used in the module
export const apiKey = 'abc123';
export const url    = 'https://site.com';

export function greet(name) {
  console.log(`Nice to meet you, ${name}`);
};

// export several expressions at once (with renaming)
const minAge       = 25;
const petsAllowed  = false;
const apiSecretKey = 'oi5p43htjfjsdkvcxzklbjfdiugewrhht';
export { minAge, pet, apiSecretKey as apiSecret };

// default export: the module member that will
// be exported (exposed) by default into any
// other modules, and can be given any name.
export default {
  foo: 'bar'
};

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS - ES2015 modules</title>
  </head>
  <body>
    <script src="build/bundle.js" charset="utf-8"></script>
  </body>
</html>

## package.json
{
  "name": "es6modules",
  "version": "1.0.0",
  "description": "ES2015 modules example",
  "main": "app.js",
  "scripts": {
    "build": "webpack --progress --watch"
  },
  "author": "Andres OSorio <androideosoriome.com>",
  "license": "MIT",
  "dependencies": {
    "base-64": "^0.1.0",
    "slug": "^0.9.1"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "webpack": "^2.1.0-beta.22"
  }
}

## users.js
import slug from 'slug';
import base64 from 'base-64';
import { url } from './config';

export default function User(name, email, website) {
  return { name, email, website };
}

export function createUrl(name) {
  return `${url}/users/${slug(name)}`;
}

export function gravatar(email) {
  const hash = base64.encode(email);
  const gravatarUrl = `https://www.gravatar.com/avatar/${hash}`;

  return gravatarUrl;
}

## webpack.config.js
const webpack = require('webpack');
const ENV = process.env.NODE_ENV || 'production';

module.exports = {
  devtool: 'source-map',
  entry: {
    filename: './app.js',
  },
  output: {
    filename: 'build/bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
    ]
  },
  plugins: [
    // uglify code
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: { comments: false },
      sourceMap: true
    }),
    // env plugin
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(ENV) }
    })
  ]
};
	// default import (give it any name you want)
	// import config from './src/config';

	// named import
	// import {apiKey} from './src/config';

	// named export with an alias
	// import { apiKey as API_KEY } from './src/config';

	// import a both named and default exports from a module in a single line
	import config, {apiKey as API_KEY} from './config';

	import User, {createUrl, gravatar} from './users';

	const andrew = User('Andres Osorio', 'androideosorio@me.com', 'https://androideosorio.me');
	const profile = createUrl(andrew.name);
	const andrewGravatar = gravatar(andrew.email);

	console.log(andrew);
	console.log(profile);
	console.log(andrewGravatar);
	// example configuration module

	// named export: you must import
	// these kind of exports with the exact
	// same name used in the module
	export const apiKey = 'abc123';
	export const url = 'https://site.com';

	export function greet(name) {
	console.log(`Nice to meet you, ${name}`);
	};

	// export several expressions at once (with renaming)
	const minAge = 25;
	const petsAllowed = false;
	const apiSecretKey = 'oi5p43htjfjsdkvcxzklbjfdiugewrhht';
	export { minAge, pet, apiSecretKey as apiSecret };

	// default export: the module member that will
	// be exported (exposed) by default into any
	// other modules, and can be given any name.
	export default {
	foo: 'bar'
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS - ES2015 modules</title>
	</head>
	<body>
	<script src="build/bundle.js" charset="utf-8"></script>
	</body>
	</html>
	{
	"name": "es6modules",
	"version": "1.0.0",
	"description": "ES2015 modules example",
	"main": "app.js",
	"scripts": {
	"build": "webpack --progress --watch"
	},
	"author": "Andres OSorio <androideosoriome.com>",
	"license": "MIT",
	"dependencies": {
	"base-64": "^0.1.0",
	"slug": "^0.9.1"
	},
	"devDependencies": {
	"babel-core": "^6.14.0",
	"babel-loader": "^6.2.5",
	"babel-preset-es2015": "^6.14.0",
	"webpack": "^2.1.0-beta.22"
	}
	}
	import slug from 'slug';
	import base64 from 'base-64';
	import { url } from './config';

	export default function User(name, email, website) {
	return { name, email, website };
	}

	export function createUrl(name) {
	return `${url}/users/${slug(name)}`;
	}

	export function gravatar(email) {
	const hash = base64.encode(email);
	const gravatarUrl = `https://www.gravatar.com/avatar/${hash}`;

	return gravatarUrl;
	}
	const webpack = require('webpack');
	const ENV = process.env.NODE_ENV \|\| 'production';

	module.exports = {
	devtool: 'source-map',
	entry: {
	filename: './app.js',
	},
	output: {
	filename: 'build/bundle.js'
	},
	module: {
	loaders: [
	{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
	]
	},
	plugins: [
	// uglify code
	new webpack.optimize.UglifyJsPlugin({
	compress: { warnings: false },
	output: { comments: false },
	sourceMap: true
	}),
	// env plugin
	new webpack.DefinePlugin({
	'process.env': { NODE_ENV: JSON.stringify(ENV) }
	})
	]
	};