insight As you probably know, TypeScript is a programming language that is a typed superset of JavaScript which compiles to plain JavaScript. Learning the language isn’t that difficult, but where do you start? In today’s world of front-end development, learning the language is only one part of the puzzle. In addition, you need to set up a system that somehow produces a production-ready deliverable from your source code. So how do you set this up?
Install webpack
The easiest way to install webpack is to use npm. So, let’s first make our folder an actual node project, so that we can use npm. To do this, open your current working folder (the folder that contains your u003ccodeu003esrcu003c/codeu003e and u003ccodeu003edistu003c/codeu003e folders) in a command terminal and execute:rnu003cpreu003eu003ccodeu003eu0026gt; npm init -yrnu003c/codeu003eu003c/preu003ernThis will create a u003ccodeu003epackage.jsonu003c/codeu003e file with all default settings for project name, license, etc.rnrnNext, install webpack:rnu003cpreu003eu003ccodeu003eu0026gt; npm install webpack u002du002dsave-devrnu003c/codeu003eu003c/preu003ernThis installs webpack, and will add it to the list of dependent modules in your u003ccodeu003epackage.jsonu003c/codeu003e (this way, whenever a new developer downloads the sources and runs u003ccodeu003enpm installu003c/codeu003e, webpack will be installed on his machine as well).
Install ts-loader
Webpack needs to do one other thing besides simply bundling files: it needs to compile them to JavaScript. Or rather: it needs to tell the TypeScript compiler to do this. To accomplish this, we need to install the u003ccodeu003ets-loaderu003c/codeu003e module, which is a plugin for webpack (a “loader” in webpack lingo) that enables it to pass TypeScript files to the TypeScript compiler before bundling the output. This can again be done using npm:rnu003cpreu003eu003ccodeu003eu0026gt; npm install ts-loader u002du002dsave-devu003c/codeu003eu003c/preu003e
Conclusion
There is much, u003cemu003emuchu003c/emu003e more to tell about both TypeScript and webpack. This tutorial barely scratches the surface. However, it should provide you with a basic understanding of TypeScript, webpack, and the principles of setting up a front-end build mechanism that will scale with your project.rnrnOf course, this is only one of many ways to go about this, so if you have an alternative approach or find a way the suits your needs better, go for it! And post a comment below, so we can all learn. Happy coding!