Modules & Bundling

Modules

  • No modules before ES2015 in Standard
  • Various Module Systems
  • AMD, CommonJS, UMD, ...

AMD

                    
                        //Calling define with a dependency array and a factory function
                        define(['dep1', 'dep2'], function (dep1, dep2) {

                            //Define the module value by returning a value.
                            return function () {};
                        });

define([name], dependencies, factory)

  • Optional name of module
  • Array of dependencies, either name or path of other module
  • Factory function that initializes the module

Dependency Resolution

  • './someDirectory/someModule'
  • 'some-node-module'
  • 'some-webpack-alias'

Webpack

  • Load all files separately is slow (HTTP/1)
  • AMD Modules can't access node_modules
  • Bundle all Modules at compile time including node_modules
  • Serve one JS File to the Browser
  • Code-Splitting, Lazy Loading and more

All together

  • Webpack bundles our files
  • Karma loads them into a Browser
  • Mocha runs the tests
  • Angular injects our Angular Modules
  • Chai does the expectations
  • Sinon can spy/stub/mock stuff

In our tests?

  • Whole App loaded for tests
  • Due to Performance reasons
  • No App deps needed
                    
                        define([], () => {
                            // Normally no deps needed
                        });

Test Helper

                    
                        define([
                            'testHelper/TestHelper',
                        ], (TestHelper) => {
                        .
                        .
                        .
                        });

Question Time!