Build JavaScript Files

This metawork article explains how I compile my TypeScript files into JavaScript files. Because TypeScript does not run in the browser, it must be transpiled into JavaScript. The TypeScript compiler (tsc.cmd) references a tsconfig.json file (if it exists) which specifies root files and options to compile the files. The folder containing the tsconfig.json file is considered the root of a TypeScript project. On my development computer this folder is:

C:/projects/mysterymaster.com/ts

Node Modules Folder

The ts/node_modules folder stores external dependencies of the project. When an external package is installed via npm or yarn in a project locally, it is stored in this folder. Read this article. The folder node_modules/@types/node folder was created when I installed TypeScript.

To update the ts/node_modules folder

1. Open a command window (cmd)
2. Change current working directory (cwd): cd /projects/mysterymaster.com/ts
3. Enter: npm i -d @types/node

Compile TypeScript To JavaScript

1. Open the command window (cmd)
2. Change the directory: cd /projects/mysterymaster.com/ts
3. Compile: tsc

Two Configuration Files

When I compile my TypeScript code into JavaScript, I need my Javascript code to (1) run in the browser (client), and (2) run on my development computer under Node.js (server). To make this happen I have two tsconfig.json files and I rename the one I want to use to tsconfig.json.

1. The client version tsconfig-client.json sets the module to "es6", ouputs JavaScript code to the js folder, and excludes files in the sever folder.
2. The server version tsconfig-server.json sets the module to "commonjs", outputs JavaScript to the metawork/js folder, and excludes files in the viewer folder.

{
 "compilerOptions": {
  "module": "es6",
  "outDir": "../js",
  "lib": [ "es6","dom" ],
  "target": "es6",
  "noImplicitAny": true,
  "removeComments": true,
  "rootDir": "./"
 },
 "exclude":
  [ "node_modules", "server" ]
}
						

{
 "compilerOptions": {
  "module": "commonjs",
  "outDir": "../metawork/js",
  "lib": [ "es6","dom" ],
  "target": "es6",
  "noImplicitAny": true,
  "removeComments": true,
  "rootDir": "./"
 },
 "exclude":
  [ "node_modules", "viewer" ]
}