###Javascript Module Fundamentals
https://github.com/ARWL2016/ps-module-fundamentals-wilson
https://app.pluralsight.com/player?course=javascript-module-fundamentals&author=brice-wilson&name=javascript-module-fundamentals-m2&clip=2&mode=live
- Pluralsight
- Brice Wilson
####Technology
- Http-server https://www.npmjs.com/package/http-server
- CommonJS
- ES6 modules
- Babel
- Require.js http://requirejs.org/docs/api.html#data-main
- System.js https://github.com/systemjs/systemjs
- Webpack
- Browserify
####Javascript Modules
- IIFE
- Revealing Module Pattern - singleton
var module = function() {
return {}
}();
- Revealing Module Pattern - constructor
var Module = function () {
return {}
};
var newModule = new Module()
- AMD (with Require.js loader)
- CommonJS (with System.js loader)
- ES6 modules
####Using CommonJS with SystemJS Loader (no build step)
npm install systemjs --save
- associate modules with require('relative path') and module.export = {} or exports.function = function
- in index.html,
<script src="node_modules/systemjs/dist/system.js"></script>
- Configure systemjs in index.html: link to package, specify cjs and import the root module
####Using Babel with SystemJS (build step)
- install
babel-cli
andbabel-presets-es2015
as dev-deps - run in BASH:
./node_modules/.bin/babel js --presets es2015 --out-dir build
- install systemjs as a loader
- Configure systemjs in index.html: link to package, specify cjs and reference build folder
- More: https://app.pluralsight.com/library/courses/babel-get-started/table-of-contents
####Using Browserify to Bundle CommonJS Modules
- install
browserify
as a dev-dep - create a
build
folder in the root of the app - run in CLI:
./node_modules/.bin/browserify js/app.js --outfile build/bundle.js
to specify the root and the target. This runs the build. (Note this works in CMD - recheck babel above) - in
index.html
, simply link to the bundle:<script src="./build/bundle.js" type="text/javascript"></script>
####Basic Webpack build
- a basic build is almost the same as
browserify
but: don't need to createbuild
folder; don't need--outfile
command - install
webpack
as a dev-dep - run
./node_modules/.bin/webpack js/app.js build/bundle.js
- adjust script src in
index.html
####Notes
- According to Cory House, IIFE and AMD should no longer be considered for new development https://app.pluralsight.com/player?course=javascript-development-environment&author=cory-house&name=javascript-development-environment-m7&clip=0&mode=live
- CommonJS was popularised by Node
- ES6 should be first choice today for front end development
####Webpack with Babel
- this requires modules to be transpiled before bundling
- install
babel-loader
andbabel-core
- create a
webpack.config
file - ERROR:
Module build failed: Error: Couldn't find preset "es2015" relative to directory
- Windows issue?
####http-server
- a lightweight zero-configuration server
- install locally, add 'http-server' to the start script and run
npm start
- can also be installed globally