There's more...

Manually building our TypeScript files in our project adds an extra layer of complexity for what we need to do each time we restart our application. In Angular-CLI, this build system uses WebPack to configure and manage this build operation automatically. However, depending on the needs of your application, there are simple ways to automate a lightweight build process to compile TypeScript, and reload your application just using NPM scripts.

To do this, we will need to install a few additional modules to help us:

  • rimraf: A simple utility to delete a nested directory of files
  • npm-run-all: A utility to run npm scripts in a sequence
  • nodemon: A process watcher to observe file changes
npm install --save-dev rimraf 
npm-run-all nodemon

We can configure new scripts for various tasks we need our lightweight build system to do, such as clean our /dist directory, compile our TypeScript files, and, most importantly, watch for file changes and restart our application:

"scripts": {
"clean": "rimraf dist",
"start": "node ./dist/index.js",
"build": "npm-run-all clean typescript --parallel watch:typescript watch:server --print-label",
"typescript": "tsc",
"watch:typescript": "tsc --watch",
"watch:server": "nodemon ./dist/index.js --watch ./dist --on-change-only"
},

Now, when we want to run our application, we can use npm run build to automatically rebuild our application and watch for changes in the /src directory. Any changes will automatically be recompiled by TypeScript, and our Express application will restart.

This approach is very lightweight, but relies on some less than obvious scripting that could be tricky to modify or enhance further. In the next section, we'll explore how to replace this with a robust WebPack-based approach that will make managing our build system much more configurable and customizable.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.24.196