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',

© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext