typeScriptでwebアプリケーションを作る方法

前提・実現したいこと

はじめまして。
typeScriptを用いてWebアプリケーションを作成しようと考えているのですが
ビルドされたjsファイルをfirst.htmlで呼び出そうとすると以下のようなエラーが出てしまいます。
解決方法を調べたのですが、色々方法があり、何が正しいのかわからなくなってしまいました。

お手数ですが、typeScriptを用いてWebアプリケーションを作成する場合のスタンダードな手段と
どの様に以下の問題を解決するべきなのかをご教授いただけませんでしょうか？

発生している問題・エラーメッセージ

define.js:2 Uncaught ReferenceError: exports is not defined
    at define.js:2
common.js:2 Uncaught ReferenceError: exports is not defined
    at common.js:2
first.js:2 Uncaught ReferenceError: exports is not defined
    at first.js:2

フォルダ構成

node_modules
pages
 ∟ first.html
 ∟ second.html
scripts
 ∟ js
   ∟ common.js
   ∟ define.js
   ∟ first.js
 ∟ ts
  ∟ common.ts
  ∟ define.ts
  ∟ first.ts
index.html
package-lock.json
package.json
tsconfig.json

該当のソースコード

first.html

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>first</title>
7</head>
8<body>
9  <script src="../scripts/js/define.js"></script>
10  <script src="../scripts/js/common.js"></script>
11  <script src="../scripts/js/first.js"></script>
12</body>
13</html>

define.ts

TypeScript
1export class Define {
2  readonly G_DEBUG: boolean = true;
3}

define.js

js
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.Define = void 0;
4var Define = /** @class */ (function () {
5    function Define() {
6        this.G_DEBUG = true;
7    }
8    return Define;
9}());
10exports.Define = Define;

common.ts

TypeScript
1import { Define } from "../ts/define";
2
3export class Common {
4  constructor(
5    private Define: Define
6  ) {}
7
8  show(): boolean { return this.Define.G_DEBUG; }
9}

common.js

js
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.Common = void 0;
4var Common = /** @class */ (function () {
5    function Common(Define) {
6        this.Define = Define;
7    }
8    Common.prototype.show = function () { return this.Define.G_DEBUG; };
9    return Common;
10}());
11exports.Common = Common;

first.ts

TypeScript
1import { Define } from "./define";
2import { Common } from "./common";
3
4window.onload = (): void => {
5  const DEFINE: Define = new Define();
6  const COMMON: Common = new Common(DEFINE);
7
8  alert(COMMON.show());
9}

first.js

js
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3var define_1 = require("./define");
4var common_1 = require("./common");
5window.onload = function () {
6    var DEFINE = new define_1.Define();
7    var COMMON = new common_1.Common(DEFINE);
8    alert(COMMON.show());
9};