JavaScript TypeScript - Linking TSX File

Linking TSX File

Generate package.json file

Open File Explorer and browse to the (C:\temp\typescript) folder.
Create a new subfolder called "linking" (C:\temp\typescript\linking).
Open a command prompt (as administrator).
Change to that folder and initialise npm.

cd c:\temp\typescript\linking 
npm init

It will prompt you for the following information:

package name: (linking) - press Enter 
version: (1.0.0) - press Enter 
description: - press Enter 
entry point: (index.js) - press Enter 
test command: - press Enter 
git repository: - press Enter 
keywords: - press Enter 
author: - press Enter 
license: (ISC) - press Enter 
Is this ok? (yes) - press Enter

This will create a "package.json" file in the folder (C:\temp\typescript\linking).

Install Webpack

more information

npm install --save-dev webpack 
npm install --save-dev webpack-cli 
npm install --save-dev webpack-dev-server

Install Babel

more information

npm install --save-dev babel-loader 
npm install --save-dev @babel/core 
npm install --save-dev @babel/preset-typescript

Install Typescript

Install the typescript webpack module.
This lets you compile typescript into regular Javascript.

npm install --save-dev typescript

Edit package.json file

Open NotePad++ and drag the "package.json" file on to it.
Change the main parameter from "index.js" to "index.tsx".

{ 
  "name": "linking", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.tsx", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
  }, 
  "author": "", 
  "license": "ISC", 
  "devDependencies": { 
    "@babel/core": "^7.2.0", 
    "@babel/preset-typescript": "^7.1.0", 
    "babel-loader": "^8.0.4", 
    "typescript": "^3.2.4", 
    "webpack": "^4.27.1", 
    "webpack-cli": "^3.1.2" 
    "webpack-dev-server": "^3.1.10", 
  }, 
}

Create index.html

Open File Explorer in the root folder (C:\temp\typescript\linking).
Create a new subfolder called "code" (C:\temp\typescript\linking\code).
Create a NotePad file with the following contents and save it as 'index.html'.
This file DOES NOT contain a link to webpackbundle.js.

<!DOCTYPE html> 
<html> 
<body> 
   <h3>BetterSolutions.com</h3> 
   <div id="app"></div> 
   <script src="webpackbundle.js"></script> 
</body> 
</html>

Create index.tsx file

Open File Explorer in the folder (C:\temp\typescript\linking\code).
Create a NotePad file with the following contents and save it as "index.tsx".
The file contains ES 2015 javascript and ??

window.onload = function Start() { 
   console.log('onload');   
 
   var app_1 = document.getElementById("app"); 
   app_1.innerHTML = '<b>hello typescript</b>'; 
   app_1.innerHTML = app_1.innerHTML + '<br><input type="button" value="Add Data" onclick="helloWorld();"/>'; 
      
}; 

function loadExcelData() { 
   window.console.log('hello world'); 
} 

interface Window { 
   helloWorld(): any; 
} 
window.helloWorld = helloWorld;

Create webpack.config.js file

Open File Explorer in the root folder (C:\temp\typescript\linking).
Create a NotePad file with the following content.
This file tells webpack to include an additional plugin called 'html-webpack-plugin'.
This additional plugin tells webpack to bundle all the html files into a single file called "index.html".
This file tells webpack to include an additional rule that uses 'ts-loader'.
This file tells webpack to include an additional output path and subfolder 'build'.

module.exports = { 
   entry: __dirname + '/index.tsx',   
   output: { 
      filename: 'webpackbundle.js'  
   }, 
   module: { 
      rules: [ 
          { 
             test: /.tsx$/, 
             exclude: /node_modules/, 
             use: { 
                loader: 'babel-loader',   
                options: { 
                   presets: [ '@babel/preset-typescript' ]  
                } 
             } 
          } , 
      ] 
   } 
};

Launch Browser

There is no more configuration that needs to be done.
You are now in a position to launch webpack and start the local development server.
Open a command prompt (as administrator).
Change to the corresponding folder and execute the following 2 commands.

node ./node_modules/webpack/bin/webpack --mode development

The "webpackbundle.js" file is all the javascript files bundled together.

node ./node_modules/webpack-dev-server/bin/webpack-dev-server --mode development

Open your browser and display the URL - localhost:8080
Pressing "Ctrl + C" will stop the process from running in the command prompt.

IE 11 Browser

If you are using or testing with the IE11 browser you need to install two additional webpack modules.

npm install --save-dev @babel/plugin-transform-classes 
npm install --save-dev @babel/plugin-transform-arrow-functions

You also need to add the "devtool" attribute to the webpack.config.js file.

module.exports = { 
   devtool: "source-map", 
   entry: __dirname + '/index.tsx',