Your inquiry seems to revolve around the process of transforming TypeScript code into a library that can be imported into HTML and used within <script>..</script> tags.
If this is indeed your focus, you can follow the basic setup provided below to kickstart your project.
package.json:
{
"name": "qlib",
"version": "1.0.0",
"scripts": {
"build": "webpack --progress --colors --config webpack.config.js",
"start": "webpack-dev-server --content-base ./ "
},
"license": "ISC",
"devDependencies": {
"ts-loader": "^4.1.0",
"typescript": "^2.7.2",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
}
}
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"noImplicitAny": false,
"lib": [
"es6",
"dom"
]
}
}
webpack.config.js:
var webpack = require("webpack");
module.exports = {
entry: './main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"],
},
output: {
filename: 'bundle.js',
libraryExport: 'default',
library: 'qlib'
}
};
main.ts: (the library entry point)
export class QLib {
public helloWorld() {
console.log("hello world");
}
}
var QInstance = new QLib();
export default QInstance;
index.html:
<html lang="en" >
<head>
<meta charset="utf-8">
<title>MyLib Testing </title>
</head>
<body>
<script src="dist/bundle.js" type="text/javascript"></script>
<script>
qlib.helloWorld();
</script>
<p>testing</p>
</body>
</html>
Finally, install, build, and start your project using the following commands:
npm install && npm run build && npm start