DEV Community

Cover image for Simplest way to compile all TypeScript into one single Js file by SilvenLEAF
SilvenLEAF
SilvenLEAF

Posted on • Updated on

Simplest way to compile all TypeScript into one single Js file by SilvenLEAF

Ahoy there! It's I, SilvenLEAF!! Have you ever faced an issue where you have many TypeScript files but want them all to convert into one Single JavaScript file so that you can reference it from your HTML? Then fear you not! Let's get it done in the simplest way!!

We'll be using Webpack with TypeScript. Let's start!

Step 0: Begin the project

Create a folder and open it in your favorite editor (mine VS Code). Then type this command on your project terminal

npm init -y
Enter fullscreen mode Exit fullscreen mode

(It'll create a package.json file to track all the packages that you'd download and so on)


Bonus Step: Adding TypeScript

For those who are a bit lost on how to set up the environment and run the TypeScript files, check this one out TypeScript SETUP by SilvenLEAF

Well anyway, in short (for details, checkout the above link)

  • install typescript
npm i typescript 
Enter fullscreen mode Exit fullscreen mode
  • init our tsconfig (make sure you already have typescript globally installed, if not type npm i -g typescript. And don't get it confused with the previous normal npm i typescript command)
tsc --init
Enter fullscreen mode Exit fullscreen mode

(It'll create a .tsconfig file)

Let's update some of the properties from that .tsconfig file

{
"outDir": "./dist",
"rootDir": "./src", 
}
Enter fullscreen mode Exit fullscreen mode

It'll convert all TypeScript files that are inside "src" folder and output them in the "dist" folder.


Step 1: Create a Simplest project

Let's create an "index.html" file on the root level of your project folder with this following content

<!-- By @SilvenLEAF -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./dist/app-bundle.js" defer></script>
  <title>Webpack with TypeScript</title>
</head>
<body>
  <h1>Let's learn Webpack with TypeScript</h1>
  <h2 id="header"></h2>
  <button id="alertBtn">Click me!</button>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

See on line no 7, we are referencing "./dist/app-bundle.js" JavaScript file. This will be the single JavaScript file which will be compiled from all those TypeScript files.

Now let's create a folder "src" on the root level and inside it, let's create all our TypeScript files. Let's create "app.ts" and "variable.ts" files (inside the "src" folder.

Inside "variable.ts" file, write the following content

export const name = 'SilvenLEAF';
Enter fullscreen mode Exit fullscreen mode

And inside "app.ts" file write the following content

// By @SilvenLEAF
import { name } from "./variable";

const alertBtn = document.querySelector('#alertBtn') as HTMLButtonElement;
const header = document.querySelector('#header') as HTMLHeadingElement

alertBtn.addEventListener('click', (e) => {
  header.innerHTML = `Hello there, I'm ${name}`;
});
Enter fullscreen mode Exit fullscreen mode

Great! We have a simple project created. Now let's compile all those TypeScript files into one single file and test it out.


Step 2: Configure Webpack

Type the following command to install the required packages

npm i -D webpack webpack-cli typescript ts-loader
Enter fullscreen mode Exit fullscreen mode

("npm i -D X" is the shorthand for "npm install --save-dev X")

Now create a "webpack.config.js" file on the root level of your project folder with the following content

//webpack.config.js
const path = require('path');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    main: "./src/app.ts",
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "app-bundle.js" // <--- Will be compiled to this single file
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

Now let's compile them and test it out. Type this following command to compile all TypeScript files into one single file

npx webpack
Enter fullscreen mode Exit fullscreen mode

See we are not using the "tsc" command to compile here because we are using webpack. It'll create a single file named "app-bundle.js" inside "dist" folder. We'll be linking this file on the "index.html". See line no 7 of "index.html" file

Now let's test it out. Launch the "index.html" file with LIVE Server. (If you don't have this extension installed, install it in VS Code or Atom or whatever Text Editor you are using, and run it). It'll run that html page live on your browser. Click that "Click me!" Button and see that it's working fine!

Before clicking the button
Before clicking the button

After clicking the button
After clicking the button

Hope it was helpful!

What's NEXT?

1. Learning DevOps with Github Actions

2. More on DevOps

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Discussion (1)