Resources-
Can be
Immediately Invoked Function Expressions and Module Pattern
Resources-
/* imports */
(function ($, YAHOO) {
// now have access to globals
// jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
/* exports */
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
CommonJs
//loading module
var _ = require(‘lodash’);
//declaring module
module.exports = someValue;
AMD - Asynchronous Module Definition
define(‘myAwesomeLib’, [‘lodash’, ‘someDep’],
function (_, someDep) {
return { … }
}
);
Resources-
ES6 modules
/*
export default denotes the main
variable exported
*/
export default MyModule;
import MyModule from './MyModule';
/* named exports */
export subModule;
import {subModule} from './MyModule';
Module Bundling
Examples-
Build tooling historically speaking!
Grunt/Gulp (Task runner)
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
projectFiles: {
src: [
'js/*.js',
'js/modules/*/*.js',
'js/controllers/*.js',
'js/directives/*.js',
'js/factories/*.js',
'js/constants/*.js',
'js/filters/*.js'
],
dest: 'dist/projectFiles.js'
}
},
uglify: { dist: { options: { mangle: false },
files: { 'dist/projectFiles.min.js': 'dist/projectFiles.js'}}
}
});
grunt.registerTask('default', ['concat:projectFiles', 'uglify']);
}
// grunt
Webpack instead...
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: 'dist',
publicPath: 'dist/'
},
module: {
loaders: [{
test: /\.js$/,
excludes: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
excludes: /node_modules/,
loaders: ['style', 'css']
}]
},
plugins:[
new HtmlWebpackPlugin({
template: 'assets/index.html',
filename: '../index.html',
inject: true
})
]
}
Introduction to webpack
Jargon update
Introduction to webpack
//moduleA
import React from 'react';
import moduleB from './moduleB';
//moduleB
import React from 'react';
// webpack moduleA bundle.js
Bundles React + moduleB + moduleA
Webpack configuration
webpack --config webpack.config.js
module.exports = {}
entry: './src/main.js'
entry: ['./src/main.js', './src/side.js']
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'bundle.min.js'
}
Loaders
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader is used for ".jade" files
{
test: /\.css$/,
loader: "style!css",
exclude:/node_modules$/
}
// => "style" and "css" loader is used for ".css" files
]
}
Extending webpack and plugins
Webpack code
Code from Html Webpack Plugin
Plugins!
plugins:[
new HtmlWebpackPlugin({
template: 'assets/index.html',
filename: '../index.html',
inject: true
})
]
Webpack in future
Webpack 2
??Questions??