How to use webpack to bundle typescript library to js script

Question

I wrote a simple typescript library, which I use as a npm library. It looks like that:

index.ts

import * as peselManager from './pesel';

/**
 * Returns information if PESEL number is valid.
 *
 * @param {string} pesel
 * @returns {boolean}
 */
export const isValidPesel = (pesel: string): boolean => {
    return peselManager.isValid(pesel);
};

Everything is fine, but i would like to use my library as js script too. For this I used webpack, with fallowing 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()
    ]
};

When I use webpack command I got minify js script. But when I add this script to example page like that:

<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 got error about Uncaught ReferenceError: isValidPesel is not defined. And my question: Is there a way to bundle my library to call a function like this? Is it a good practise? Maybe, I did it totally wrong, so I will be happy to hear your comments.

Please refer webpack.js.org/guides/typescript link

baj9032
– baj9032

2017-11-22 09:01:02 +00:00
Commented Nov 22, 2017 at 9:01 — baj9032
– baj9032, Commented Nov 22, 2017 at 9:01

alechill · Accepted Answer · 2017-11-22 10:47:52Z

You are trying to use your exported function as if it has been attached to the global scope. With webpack defaults this is not the case, all your code will be wrapped in closures that the global scope has no access to, unless you configure webpack to actually expose your top level exports

To do this use the library config option https://webpack.js.org/configuration/output/#output-library

output: {
    filename: "peseljs.min.js",
    path: path.resolve(__dirname, 'dist'),
    library: 'myLibraryName'
}

This will assign the entry module to a variable (which will exist in whatever scope the webpack lib is loaded into - in your case window), that in turn references anything you export from your entry file, allowing you to call your function through it

const isValid = myLibraryName.isValidPesel("22032101355")

If you need finer control of what scope this library variable is placed into there are further library options to allow this https://webpack.js.org/configuration/output/#output-librarytarget

Collectives™ on Stack Overflow

How to use webpack to bundle typescript library to js script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related