Last active
September 9, 2016 20:12
-
-
Save androide-osorio/9c51b0013c8b931d48dcd8a8747da650 to your computer and use it in GitHub Desktop.
ES2015 Roadtrip to awesomeness: Modules - How to use ES2015 modules in a project using webpack. It also describes the syntax and rules of module exporting and importing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets": [ | |
["es2015", { "modules": false }] | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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' | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) } | |
}) | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment