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
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
Install Babel
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.
Delete the "main" parameter (under description) because this is not required.
{
"name": "linking",
"version": "1.0.0",
"description": "",
"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',
© 2021 Better Solutions Limited. All Rights Reserved. © 2021 Better Solutions Limited TopPrevNext