How to expose an object from a VanillaJS library built with webpack?

user_6326261 0
Viewed 137

I'm developing a Vanilla JS library. This library will have to expose an object, let's call it sdk: this object will contain all the library methods, so a potential user can do

<script src="thelibrary.js"></script>
<script>
   sdk.myFunction();
</script>

This is my webpack configuration:

const path = require('path');

module.exports = {
  entry:
    ['babel-polyfill', './src/index.js'],
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'my-sdk.js',
    library: 'my-sdk-function',
    libraryTarget: 'umd',
    publicPath: '/dist/',
    umdNamedDefine: true,
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'es2015', 'stage-0'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
          },
        }],
      },
    ],
  },
};

This is my index.js

const myFunction = () => { 
   console.log('hello'); 
}
const sdk = { myFunction };

How can I achieve my objective?

I have an index.html file that I'm serving via a python SimpleHTTPServer:

<body>
  <script src="http://localhost:5000/dist/my-sdk.js"></script>
</body>

But I'm not able to access the sdk object... what is my mistake?

Thanks a lot!

webpack javascript
1 Answers

Short anwser - you are looking for:

output: {                                                                                                                                                                          
  library: {                                                                                                                                                                       
    type: "window",                                                                                                                                                                
  },                                                                                                                                                                               
},

with webpack.config.js containing that, my sdk object is available on window - as you stated in your question.

Long answer - that resembles a lot how js libraries were written many years ago. It still can be a valid use case now but can put away people from modern projects away from your library. I would aim for building at least 2 files:

  1. standard output, to be imported via wepback or by another modern tool
  2. global scope polluting one, as you stated in your question

The repo I was experimenting with is here: https://github.com/marcin-wosinek/webpack-sdk

And an example of how it's working is here: https://marcin-wosinek.github.io/webpack-sdk/

user_6035440
Related