Webpack - Exporting all functions directly to be used in the browser

Question

I am developing a library that I want it to work for node and browser at the same time.

Lets say I have this library file mylibrary.js:

module.exports = {
  add: function (a, b) {return a + b;},
  sub: function (a, b) {return a - b;}
};

I can use it nicely in node application as following fun.js:

const mylibrary = require('mylibrary'); // CommonJS style
import {add, sub} from 'mylibrary';     // UMD style

var x = mylibrary.add(1, 2); // method 1
var y = add(1, 2);           // method 2

Both methods work fine without issues.

Now I want to be able to use it in the browser in the following way:

<script src="mylibrary.min.js"></script>
<script>
    var x = add(1, 2); // doesn't work! Using mylibrary.add() will work
    var y = sub(1, 2); // but I want to use sub() directly; not mylibrary.sub()
</script>

I want to expose add() and sub() directly in the browser without requiring the user to qualify it with any name (I know it is usally advised to group all functions from a library under a common name to avoid namespace collision; but this is ok in my case).

Currently I am using the following webpack.config.js but it exposes add() and sub() under an object called mylibrary. Thus in the browser, the user has to write mylibrary.add() which I want to avoid.

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: './lib/mylibrary.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'mylibrary.min.js',
    libraryTarget: 'umd',
    library: 'mylibrary' // need to avoid this for the browser
  }
};

Any thoughts?

Answer 1

Following the webpack config page, use this configuration:

const path = require('path');
module.exports = {
  entry: './lib/mylibrary.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'mylibrary.min.js',
    libraryTarget: 'window'
  }
};

So libraryTarget is 'window' and library in undefined