In addition to web server code Node.js can be used to debug and execute standalone Javascript scripts. These scripts can reference additional modules as separate Javascript files on disk or installed using npm giving them the potential to be highly functional standalone programs. While a Node.js project directory containing many additional dependencies can still be executed directly in Node.js (using node.exe), distribution of the project can be greatly simplified by bundling the entire project into a single Javascript file. WebPack can be installed as an npm module and used for this purpose.
While highly functional programs can be written in Javascript directly, many people find it easier to write robust and readable code using Typescript. Node.js does not support executing Typescript directory but support for it can be added by installing the necessary npm modules.
This project template forms the basis of a simple Node.js application that comes with preconfigured support for transpiling Typescript, debugging the project using Visual Studio Code, and bundling the entire project to a single Javascript file using WebPack.
While there are project generators available that already create project templates for a wide variety of Node.js applicatons (e.g. Yeoman), the project templates these generators create can be quite complex to start with, and the generators themselves can also bring additional complexity of their own. By contrast this template aims to provide core functionality in the simplest manner possible, and also documents the steps by which the entire template can be recreated from scratch providing the option of easily reconfiguring it to support a specific requirement.
- Clone template to new directory.
- Create project directory
md Project1
- Open project directory in VSCode
code Project1
- Using VSCode integrated terminal clone repository into directory
git clone https://github.com/Neutrino-Sunset/TypescriptAppTemplate.git .
- Create project directory
- If desired update the project name in packages.json
name
field. - If desired update the project output file name in webpack.config.js
filename
field. - Run
npm i
to install all modules. - Run
tsc
to transpile Typescript to Javaascript for debugging in VSCode, (or runtsc -w
and tsc will monitor all Typescript files and transpile automatically whenever they are modified). - Run
npm run build
to bundle the entire application to a single Javascript file using WebPack. On Windows this Javascript file can be executed by passing it to the Node.js interpreternode.exe <applicationname>.js
, or you can right click the file, selectOpen With...
selectnode.exe
from wherever you have Node.js installed, and then<applicationname>.js
can be executed directly from either a command prompt or from Explorer.
- Create a directory and open with VSCode
- Create entrypoint file Main.ts with the following basic startup code.
class Startup {
public static main(): number {
console.log('Hello Typescript World!');
return 0;
}
}
Startup.main();
- Initialise npm
npm init
ensuring 'name' is all lowercase andmain
isMain.ts
, accept all other defaults. - Install typescript and nodejs typescript types
npm i --save-dev typescript @types/node
- Generate tsconfig.json
tsc --init
- In tsconfig.json uncomment
"sourcemap": true
- In tsconfig.json uncomment
"outDir":
and set path to./out
- Build typescript
tsc
(can perhaps skip this step when VSCode bug #31977 is fixed)microsoft/vscode#31977 - Generate launch.json file. Press F1, enter
Debug: Open launch.json
, when prompted select environmentnode.js
- Debug by pressing
f5
. Restart Debug usingctrl+shift+f5
- Transpile .ts files as they change by placing tsc in watch mode using
tsc -w
- Install third-party module e.g.
npm i --save underscore
- Install Typescript types for third-party module to enable intellisense e.g.
npm i --save-dev @types/underscore
- Install WebPack and ts-loader
npm i --save-dev webpack ts-loader
- Create basic webpack.config.js e.g.
module.exports = {
entry: './Main.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ ".ts", ".js" ]
},
output: {
filename: './dist/TypescriptApp5.js'
}
}
- Build using webpack
./node_modules/.bin/webpack
- Run application
.\dist\JavascriptApp2.js
(requires .js files to be set to open using nodejs.exe). - Create npm script to run webpack via npm by adding the following script to packages.json
"scripts": {
"build": "webpack"
},
- Now WebPack can be run via
npm run build