anchor.diff:  });
   ----
   
  +We imported the service class from the previously created module using an appropriate `import` statement. Notice the `./` in the module name which is a relative reference and so the compiler knows that the module file can be found in the same directory as the specification file. Then we used the `describe` function of the Jasmine framework to define a test suite. Typically it should be named like the class or function under test because that will produce nicely readable output if tests fail. Finally, we created a first test case by using Jasmine's `it` function. It should be given a brief but understandable description of the expected behavior that is verified by this test and a function to execute the test steps. Within a test case we can make assertions by using the `expect` function.
  +
   Now the time has come to run the first test case.
   
  -. Go to the terminal in your project directory.
  -. Run the command: `npm test`. This will fire up the Karma test runner as defined in the `package.json`.
  -
  -Finally, you should see a message that one test has been executed successfully. Like this:
  +. Go to the terminal in our project directory.
  +. Run the command: `npm test`. This will fire up the Karma test runner with the configuration we defined in the `karma.conf.js`.
  +
  +Finally, we should see a message that one test has been executed successfully. Like this:
   
     Executed 1 of 1 SUCCESS (0.004 secs / 0.001 secs)
   
  -You will find a new directory `coverage` in your project directory which contains the test coverage report. There you can see which functions have been executed during the tests and where you should better add some more test cases.
  +You will notice a new directory `coverage` in our project directory which contains the test coverage report. There we can see which functions have been executed during the tests and where we should better add some more test cases.
   
   === Structuring the project with modules
   
  -Upcoming...
  +As the project grows larger it is desirable to split the source code across multiple files for several reasons:
  +
  +* Separation of concerns: As a best practice we should write classes and functions that are dedicated to a well-defined and manageable purpose. For example, why should some higher level busines logic care about how data is fetched from the server? There should be some other module which simply provides functions to retrieve business data and handles all the technical stuff under the hood.
  +* Code reuse: We might write some more general classes or functions which can be reused across multiple parts of our project or even reused in other projects as well.
  +* Better testability: Small and dedicated functions can be tested more easily.
  +* Allow developers to work more independently on certain parts of the code. Having one large source code file would lead to merge conflicts all the time.
  +
  +TypeScript and ES2015 support the concept of modules to allow source code to be split across multiple files. As we have done already in the first test case we can import classes, functions or even simple values from other source files by using respective `import` statements. Note that we can only import resources that the modules export by using the `export` keyword. See the TypeScript https://www.typescriptlang.org/docs/handbook/modules.html[handbook] for more insights on modules.
  +
  +Let's create another TypeScript file which makes use of the class we previously created.
  +
  +. Create a new file `example-plugin.ts` in the `src` directory of our project.
  +. Open the new TypeScript file in the text editor and insert the following code:
  +
  +[source,typescript]
  +.example-plugin.ts
  +----
  +import { ExampleService } from './example-service';
  +let example = function () {
  +  let exampleService = new ExampleService();
  +  let messageText = exampleService.getExampleMessage('Frank');
  +};
  +----
  +
  +So we import the class `ExampleService` from the module file `./example-service.ts` to use it in our plugin module. Our plugin only depends on the API that is exposed by the service class, so as long as we keep the API stable we ca change the internals of the service without having to touch the plugin.
  +
  +=== Writing a jQuery plugin
  +
  +Once we have created a separate module for our jQuery plugin we can use jQuery itself to register an extension.
  +
  +. Go to the terminal in our project directory.
  +. Run the command `npm install jquery --save`. This will install jQuery as a normal dependency to our project.
  +. Run the command: `npm install @types/jquery --save-dev`. This will install the type declarations for jQuery to allow the TypeScript compiler to recogize all the functions provided by the framework.
  +. Open the file `example-plugin.ts` in the text editor and insert the following code:
  +
  +[source,typescript]
  +.example-plugin.ts
  +----
  +import $ from 'jquery';
  +import { ExampleService } from './example-service';
  +$.fn.examplePlugin = function (this: JQuery): JQuery {
  +  let exampleService = new ExampleService();
  +  let messageText = exampleService.getExampleMessage(this.text());
  +  this.text(messageText);
  +  return this;
  +};
  +----
  +
  +The new thing here is the `import` of the `jquery` module which allows us to make use of the well-known dollar function. With the statement `$.fn.examplePlugin = function ...` we register an extension that can be used on any jQuery object like this:
  +
  +[source,javascript]
  +----
  +$('.some-selector').examplePlugin();  // Executes our plugin function
  +----
  +
  +Notice the `this` parameter in our function declaration is not a real parameter but a TypeScript helper to define the type of `this` within that function. This paramater is removed by the TypeScript compiler when it generates the JavaScript file.
  +
  +A jQuery plugin function should typically return `this` to allow chaining like that:
  +
  +[source,javascript]
  +----
  +$('.some-selector').examplePlugin().css('color', 'red');
  +----
  +
  +IMPORTANT: TypeScript lambda expressions are not suitable for the declaration of jQuery plugin functions because they override the `this` context of the function so that we would not be able to access the jQuery object anymore.
  +
  +=== Bundling the JavaScript modules
  +
  +So far we have created the two modules `example-service.ts` and `example-plugin.ts` which can be compiled to their respective ES2015 modules by running `npm run compile` on the command line. But how can these modules be used in a normal web page? Up to now there is no native browser support for JavaScript modules (no matter which format), so we have to choose one of the following solutions:
  +
  +* Include a module loader into our web page (e.g. https://github.com/systemjs/systemjs[SystemJS]) and configure it to load our ES2015 modules. This will typically generate one AJAX request per module because the loader requests each module as soon as it is imported.
  +* Use a module bundler (e.g. http://rollupjs.org/[rollup.js]) during our build process to create a bundle JavaScript file which contains all of our modules and can be included into our web page with a simple `<script>` tag.
  +
  +There are pros and cons for each of these approaches. While the first one seems promising to me once all major browsers natively support ES2015 modules and HTTP/2 has been rolled out, I would stick to the second solution for now because this makes it really easy to integrate our jQuery plugin into any web page without the hassle of a cumbersome module loader configuration.
  +
  +We will be using http://rollupjs.org/[rollup.js] to package everything together. This requires some configuration in our project.
  +
  +. Go to the terminal in our project directory.
  +. Run the command: `npm install rollup --save-dev`. This will install the rollup.js module bundler as a development dependency.
  +. Run the command: `npm install rollup-plugin-babel --save-dev`. This installs the Babel plugin for rollup.js that we will use to transpile our ES2015 modules to the more compatible ES5 language level.
  +. Run the command: `npm install rollup-plugin-sourcemaps --save-dev`. This installs the Sourcemap plugin for rollup.js so that we can still debug our TypeScript code in the browser even when we are using the JavaScript bundle.
  +. Run the commands: `npm install babel-preset-es2015 --save-dev` and `npm install babel-plugin-external-helpers --save-dev`. This will install a preset and helper modules for Babel which be used by the Babel plugin.
  +
  +As with the TypeScript compiler and Karma we need to configure rollup.js with a separate configuration file to tell the bundler which module to use as the entry point and what kind of bundle we would like to generate.
  +
  +. Create a new file `rollup.config.js` in our project directory.
  +. Open the new configuration file with the text editor and insert the following code:
  +
  +[source,javascript]
  +.rollup.config.js
  +----
  +import babel from 'rollup-plugin-babel';
  +import sourcemaps from 'rollup-plugin-sourcemaps';
  +
  +export default {
  +  entry: 'dist/example-plugin.js',
  +  dest: 'dist/example-plugin-bundle.js',
  +  format: 'iife',
  +  external: [
  +    'jquery'
  +  ],
  +  globals: {
  +    jquery: 'jQuery'
  +  },
  +  sourceMap: true,
  +  plugins: [
  +    babel({
  +      exclude: 'node_modules/**',
  +    }),
  +    sourcemaps()
  +  ]
  +};
  +----
  +
  +The configuration is a Node.js-style module which exports an object with the configuration values.
  +
  +`entry: 'dist/example-plugin.js'`:: Uses the compiled ES2015 module of our jQuery plugin (compiler output of `example-plugin.ts`) as the entry point to start the bundling process. Starting from this module the bundler will work through the imports and package everything together.
  +
  +`dest: 'dist/example-plugin-bundle.js'`:: Writes the generated JavaScript bundle to the file `example-plugin-bundle.js` in the `dist` directory of our project.
  +
  +`format: 'iife'`:: Instructs rollup.js to generate the bundle in https://en.wikipedia.org/wiki/Immediately-invoked_function_expression[IIFE] format (Immediately Invoked Function Expression) which is the right format to include the JavaScript file in a HTML page using a simple `<script>` tag.
  +
  +`external: ['jquery'], globals: {jquery: 'jQuery'}`:: Tells the bundler that the module `jquery` is an external dependency which should not be included in the bundle and that this external module is defined in the global variable `jQuery`. So we will have to include jQuery with a separate `<script>` tag into our web page before we include our bundle.
  +
  +`sourceMap: true`:: Produces a sourcemap file for the JavaScript bundle to allow easier debugging of our code even when only the single JavaScript file is loaded in the browser.
  +
  +`plugins: [...]`:: Enables the Babel plugin to transpile our JavaScript bundle to the more compatible ES5 language level and to load the sourcemaps of the ES2015 modules we are using as input. This ensures that we can even debug our TypeScript code when we use the bundle in a web page.
  +
  +TIP: For more details on the configuration options please refer to the https://github.com/rollup/rollup/wiki/JavaScript-API[documentation].
  +
  +Since we use the Babel plugin to scale the JavaScript language level down to ES5 we have to tell the transpiler what preset to use.
  +
  +. Create a new file `.babelrc` in our project directory.
  +. Open the new configuration file with the text editor and insert the following code:
  +
  +[source,json]
  +.&#x002E;babelrc
  +----
  +{
  +  "presets": [
  +    [
  +      "es2015",
  +      {
  +        "modules": false
  +      }
  +    ]
  +  ],
  +  "plugins": [
  +    "external-helpers"
  +  ]
  +}
  +----
  +
  +Since rollup.js is installed locally to our project we have to create a NPM script to allow bundling our modules from the command line.
  +
  +. Open the file `package.json` with the text editor.
  +. Add a new propery `bundle` with the value `rollup -c` in the `scripts` object:
  +
  +.package.json
  +----
  +{
  +  ...
  +  "scripts": {
  +    ...
  +    "bundle": "rollup -c"
  +  }
  +  ...
  +}
  +----
  +
  +Now we can start rollup.js from the command line via `npm run bundle`. But be aware that this script requires our TypeScript sources to have been compiled. So we would always have to run `npm run compile` first before we can create the bundle. Therefore it is convenient to create another script `build` in our `package.json` which executes both scripts as a sequence:
  +
  +.package.json
  +----
  +{
  +  ...
  +  "scripts": {
  +    ...
  +    "build": "npm run compile && npm run bundle"
  +  }
  +  ...
  +}
  +----
  +
  +So let's give it a try.
  +
  +. Go to the terminal in our project directory.
  +. Run the command: `npm run build`. This should first execute the TypeScript compilation and once it has been completed successfully it will start the rollup.js bundling.
  +
  +Finally, there should be the bundle JavaScript file `example-plugin-bundle.js` in the `dist` directory of our project. This file can be included right away in any web page that also includes jQuery. For example:
  +
  +[source,html]
  +----
  +<!DOCTYPE html>
  +<html>
  +<body>
  +  <p>Frank</p>
  +  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  +  <script src="example-plugin-bundle.js"></script>
  +  <script>
  +    $('p').examplePlugin();
  +  </script>
  +</body>
  +</html>
  +----
  +
  +=== Minifying the JavaScript bundle
  +
  +So far, so good. The JavaScript bundle we have created can be used as it is but it is still quite large because the JavaScript code is pretty formatted. This is not needed in a production environment. So we should further reduce the bundle size by creating a minified version with http://lisperator.net/uglifyjs/[UglifyJS].
  +
  +. Go to the terminal in our project directory.
  +. Run the command: `npm install uglify-js --save-dev`. This will install UglifyJS as a development dependency in our project.
  +. Open the file `package.json` with the text editor.
  +. Add a new propery `minify` in the `scripts` object:
  +
  +.package.json
  +----
  +{
  +  ...
  +  "scripts": {
  +    ...
  +    "minify": "uglifyjs dist/example-plugin-bundle.js --output dist/example-plugin-bundle.min.js --source-map dist/example-plugin-bundle.min.js.map --source-map-url example-plugin-bundle.min.js.map --in-source-map dist/example-plugin-bundle.js.map"
  +  }
  +  ...
  +}
  +----
  +
  +As you can see the script is a little bit more complicated because UglifyJS does not provide any built-in way to use a separate configuration file.
  +
  +First parameter `dist/example-plugin-bundle.js`:: Defines the input file that should be minified. We use our JavaScript bundle produced by rollup.js.
  +
  +`--output dist/example-plugin-bundle.min.js`:: Writes the minified version of the JavaScript bundle to the file `example-plugin-bundle.min.js` in the `dist` directory.
  +
  +`--source-map dist/example-plugin-bundle.min.js.map`:: Generates a sourcemap file `example-plugin-bundle.min.js.map` for the minified JavaScript. It helps debugging in the browser even when we use the minified JavaScript bundle in the web page.
  +
  +`--source-map-url example-plugin-bundle.min.js.map`:: Sets the URL for the sourcemap reference only to the file name `example-plugin-bundle.min.js.map`, i.e. the sourcemap file should be looked up in the same directory as the JavaScript itself.
  +
  +`--in-source-map dist/example-plugin-bundle.js.map`:: Loads previously generated sourcemaps that come from the TypeScript compiler and rollup.js to allow mapping directly to the original TypeScript source code.
  +
  +Once the script has been added to the `package.json` file we can run the minification from the command line via `npm run minify`. We can also integrate it into the `build` script sequence as an additional task:
  +
  +.package.json
  +----
  +{
  +  ...
  +  "scripts": {
  +    ...
  +    "build": "npm run compile && npm run bundle && npm run minify"
  +  }
  +  ...
  +}
  +----
  +
  +Now see the whole build process in action.
  +
  +. Go to the terminal in our project directory.
  +. Run the command: `npm run build`.
  +
  +There should be an additional file `example-plugin-bundle.min.js` in the `dist` directory of our project. This minified version of the JavaScript bundle can be included in any web page like the normal one:
  +
  +[source,html]
  +----
  +<!DOCTYPE html>
  +<html>
  +<body>
  +  <p>Frank</p>
  +  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  +  <script src="example-plugin-bundle.min.js"></script>
  +  <script>
  +    $('p').examplePlugin();
  +  </script>
  +</body>
  +</html>
  +----
  +
  +=== Final considerations
  +
  +It is debatable if that workflow with three steps (TypeScript compilation, rollup.js bundling, UglifyJS minification) is really a good solution, especially if all you want is the minified bundle. There are plugins for rollup.js which could be used to reduce everything to a single step:
  +
  +* https://github.com/ezolenko/rollup-plugin-typescript2[TypeScript] plugin for rollup.js to allow for direct processing of TypeScript source files.
  +* https://github.com/TrySound/rollup-plugin-uglify[UglifyJS] plugin for rollup.js to allow for direct minification of the produced bundle.
  +
  +Moreover, there are additional development helpers which have not been demonstrated in this example project to keep it simple. It is always a good idea to have some kind of live reload server which really helps during development when you have to make frequent changes to your source code. See https://github.com/johnpapa/lite-server[Lite-Server] for an easy solution.
   
   == License
   
  
positive.code: }
  ----
  
  So we told Karma that all TypeScript files beneath the `src` directory should be loaded and that TypeScript files need to be processed by `karma-typescript`. Furthermore, we defined `PhantomJS` as the browser to execute our tests and instructed Karma to load framework support for Jasmine and TypeScript.
  
  If you want to know more about the Karma configuration please have a look at the https://karma-runner.github.io/1.0/config/configuration-file.html[documentation].
  
  Since Karma is also installed locally in your project you will have to create NPM script to run the tests from the command line.
  
  . Open the file `package.json` with the text editor.
  . There should already be a property `test` in the `scripts` object (if not create a new property). Set the value of the `test` script to `karma start`:
  
negative.code: }
  ----
  
  This allows us to run the TypeScript compiler from the command line via `npm run compile`. But do not execute it for now since we have not created a configuration yet.
  
  === Configuring the TypeScript compiler
  
  We run the TypeScript compiler by simply executing the `tsc` command in our project. Therefore the compiler needs some more information about where to look for source files and how the generated JavaScript code should look like. A very convenient way to configure the compiler is to put a `tsconfig.json` file directly in our project directory.
  
  . Create a file `tsconfig.json` in our project directory.
  . Open the file with the text editor and insert the following code:
  
  [source,json]
  