├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── data │ └── users.js ├── main.js └── math │ └── addition.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **This is the source for the [Egghead.io](https://egghead.io/) ES6 lesson [ES6 Modules - Import and Export (ES2015)](https://egghead.io/)** 2 | 3 | ### To Run/Develop 4 | 5 | **npm global dependencies** 6 | - BrowserSync 7 | - Webpack 8 | 9 | ``` 10 | npm install 11 | npm start 12 | ``` 13 | 14 | This should open your web browser with the BrowserSync server running and watching for changes. 15 | 16 | Open up the console in your dev tools! 17 | 18 | See `package.json` for `npm start` details. 19 | 20 | ## ES6 Modules 21 | 22 | ES6 (ES2015) introduces a [standardized module format](http://babeljs.io/docs/learn-es2015/#modules) to Javascript. We'll take a look at the various forms of defining and importing modules. Using [Webpack](http://webpack.github.io/) to bundle up our modules and [Babel](http://babeljs.io/) to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing [lodash](https://lodash.com/) with the `_` underscore alias using the ES6 module syntax. 23 | 24 | **Some Common Import/Export Variations** 25 | ```js 26 | import {someFunction} from 'someModule'; 27 | 28 | import {someFunction as someAlias} from 'someModule'; 29 | 30 | import * as someModule from 'someModule'; 31 | 32 | export function someFunction() {/* */}; 33 | 34 | function someFunction() {/* */}; export {someFunction}; 35 | 36 | function someFunction() {/* */}; export {someFunction as someAlias}; 37 | ``` -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ES6 Modules 6 | 7 | 8 | 9 |
10 |
11 |

ES6 Modules

12 |

With Webpack and Babel

13 |
14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "npm run build-watch & npm run server", 4 | "build-watch": "webpack -d --watch", 5 | "server": "browser-sync start --server --files='dist/bundle.js,index.html' --no-notify" 6 | }, 7 | "devDependencies": { 8 | "babel-core": "^5.6.15", 9 | "babel-loader": "^5.2.2", 10 | "babel-runtime": "^5.6.15", 11 | "node-libs-browser": "^0.5.2", 12 | "webpack": "^1.10.0", 13 | "browser-sync":"^2.11.2" 14 | }, 15 | "dependencies": { 16 | "lodash": "^3.10.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/data/users.js: -------------------------------------------------------------------------------- 1 | export var users = [ 2 | { 'user': 'barney', 'age': 36, 'active': false, 'pets': ['hoppy'] }, 3 | { 'user': 'fred', 'age': 40, 'active': true, 'pets': ['baby puss', 'dino'] } 4 | ]; -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This is our "Entry Point" 3 | */ 4 | import * as _ from 'lodash'; 5 | 6 | import * as addition from 'math/addition'; 7 | import {users} from 'data/users'; 8 | 9 | console.log(_.where(users, {age: 36})); 10 | 11 | console.log( 12 | "1 + 3", 13 | addition.sumTwo(1, 3) 14 | ); 15 | 16 | console.log( 17 | "1 + 3 + 4", 18 | addition.sumThree(1, 3, 4) 19 | ); -------------------------------------------------------------------------------- /src/math/addition.js: -------------------------------------------------------------------------------- 1 | export function sumTwo(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function sumThree(a, b, c) { 6 | return a + b + c; 7 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./src/main.js", 3 | output: {filename: "./dist/bundle.js"}, 4 | 5 | // Enables ES6 modules to be loaded w/ "root/project paths" 6 | resolve: {root: __dirname + '/src'}, 7 | 8 | module: { 9 | loaders: [ 10 | { 11 | test: /\.js$/, 12 | exclude: /node_modules/, 13 | loader: "babel", 14 | query: { 15 | optional: ['runtime'], 16 | stage: 1 17 | } 18 | } 19 | ] 20 | } 21 | }; --------------------------------------------------------------------------------