Let’s start TypeScript - Part 3

In part 2 of this series, we looked at debugging our TypeScript after it has been converted from JavaScript. When deploying JavaScript to Dynamics in production, you'll want to ensure that the file is as small as possible. We can do this by 'uglyfying' or 'minifying' our script using gulp. It's also desirable to be able to use multiple TypeScript source files, but compile into a single JavaScript file.

Multiple Source Files compiled into one

  1. Open the tsconfig.json and add the following to the compilerOptions section:
    "outFile": "out/DependantOptionSet.js"
  2. Re build the solution so that the new config is picked up and then make a small change to the TypeScript file - you should now see a new folder out if you refresh the Solution Explorer.
  3. The great part about this is you can now start to split your TypeScript code into multiple source files, remembering that you'll need use the export keyword on the classes to allow them to be used across separate source files.

    TypeScript will automatically order the files as required in the output to ensure that JavaScript can be parsed in the browser.

Minifying our output

  1. Open the command line from the project using Alt-Space.
  2. Install gulp and related tasks using:
    npm install gulp --save-dev 
npm install gulp-uglify --save-dev 
npm install gulp-watch --save-dev
  3. Gulp watch is used to monitor the source file for changes and uglify when it changes.
  4. Create a file of type 'Gulp Configuration File' (search the file types in the add-new dialog) in the root of the project called 'gulpfile.js' and add the following code:
    var gulp = require('gulp');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');

gulp.task('build', function () {
gulp.src(['./out/SDK.DependentOptionSet.js'])
.pipe(uglify())
.pipe(gulp.dest('./WebResources/js'));
});
  5. Open Tools->Task Runner Explorer
  6. Click 'Refresh on the task runner explorer.
    This should now show you the build task:

  7. Right click on the build task and click Run. This will create a minified version of your output Javascript in the webresources folder.

  8. In the last part of this series, we looked at debugging using Fiddler. Since we've moved our compiled JavaScript, we now need to adjust our fiddler auto-responder to point to the out folder so we can still debug.

    REGEX:(?insx).+\/sdk_\/js\/(?'fname'[^?]*.js)
    C:\Users\Administrator\source\repos\StartUsingTypeScript\StartUsingTypeScript\src\${fname}
  9. We also need to update the auto responder for the source maps since they are now listed in the map file as relative to the out folder rather than absolute paths:
    REGEX:(?insx).+\/sdk_\/src\/(?'fname'[^?]*.ts)
    C:\Users\Administrator\source\repos\StartUsingTypeScript\StartUsingTypeScript\src\${fname}
  10. We can now add a watch task to automatically build the minified version when the source file changes. Add the following to the gulpfile.js:
    gulp.task('watch', function () {
gulp.watch('./out/*.js', ['build']);
});
  11. We can manually run the watch to start monitoring the out file – but also configure to automatically start when the project opens.
    Right Click on the watch task -> Bindings -> Project Open

You can download the code from this part if you want to compare your code to mine.In the next part I'll show you how to create some Unit Tests for our TypeScript code.

Comments are closed