Skip to main content

Setting up Auto Compilation with TypeScript and Parcel

Introduction​

We've explored TypeScript's benefits and are ready to delve into various types and coding. However, we can enhance TypeScript compilation by using a bundler. While Webpack is an option, we'll use Parcel for simplicity and focus on TypeScript. This tutorial will guide you through setting up Parcel for TypeScript compilation in a step-by-step manner.

Steps to Configure Parcel​

1. Clear Existing Files​

  • Delete all unnecessary files from your project.

2. Initialize NPM Project​

  • Open the terminal in your TypeScript project directory.
  • Run npm init -y to create a new NPM project with default settings, which generates a package.json file.

3. Install Parcel​

  • Install Parcel as a development dependency using npm install parcel --save-dev.
  • Parcel will appear as a development dependency in package.json.

4. Create Files​

  • Create an index.html file.
  • Create an src directory and within it, an index.ts file.
  • Include your index.ts file in the index.html. Parcel will auto-detect the .ts file and handle transpiling and replacing it with .js.

6. Generate TS Config​

  • Run tsc --init to generate a tsconfig.json file.
  • In tsconfig.json, uncomment noEmitOnError to prevent JavaScript emission if TypeScript has errors.

7. Set Up Prettier​

  • Install Prettier using npm install --save-dev prettier.
  • Generate a Prettier configuration file by creating a .prettierrc.json file with an empty object.

8. Configure NPM Script​

  • Create a new NPM script in package.json to run Parcel commands for development.
  • Add a "start" script with the command: "start": "parcel serve src/index.html & parcel watch src/index.html".

9. Remove Main Property​

  • Remove the main property from package.json to avoid Parcel errors.

10. Test the Setup​

  • Run npm start and open the provided URL in a browser.
  • Test if the TypeScript compiles successfully and hot reloads upon changes.

Conclusion​

Your setup is ready! You can now write TypeScript code and have Parcel automatically compile it into JavaScript, streamlining your development process. In the next video, we'll start exploring different types in TypeScript. Happy coding!

What Can You Do Next 🙏😊​

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for software developers.

YouTube @cloudaffle