Recently, I created a TypeScript library that I am currently using as an npm package. Here's a snippet of what it looks like:
index.ts
import * as peselManager from './pesel';
/**
* Checks if a given PESEL number is valid.
*
* @param {string} pesel
* @returns {boolean}
*/
export const isValidPesel = (pesel: string): boolean => {
return peselManager.isValid(pesel);
};
While everything seems to be working fine, I also wanted to make my library available as a JavaScript script. To achieve this, I turned to webpack and set up the following configuration:
var path = require('path');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: "./lib/index.ts",
output: {
filename: "peseljs.min.js",
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
loaders: [{ test: /\.ts$/, loader: "ts-loader" }]
},
plugins: [
new UglifyJSPlugin()
]
};
After running the webpack
command, I successfully obtained a minified JavaScript script. However, when I tried to include this script in an example page like so:
<html lang="en">
<head>
<meta charset="utf-8">
<title>PeselJS Example</title>
<meta name="description" content="PeselJS Example Page">
<meta name="author" content="jaroslawkrol">
<script type="text/javascript" src="peseljs.min.js"></script>
</head>
<body>
<span id="some-span">ABC</span>
<script>
var isValid = isValidPesel("22032101355");
if(isValid) {
console.log("valid");
} else {
console.log("invalid");
}
</script>
</body>
</html>
I encountered an error stating
Uncaught ReferenceError: isValidPesel is not defined
. This leads me to the question: Is there a way to bundle my library for function calls like this? Am I approaching this process incorrectly? I would appreciate any feedback or suggestions on how to proceed.