CODEWITHSUNDEEP
javascripthtmlwebpack
pdiddy
pdiddy

Reputation: 6297

How to use js library generated with webpack in a simple html page

So I created a javascript library using the following starter project https://github.com/a-tarasyuk/webpack-typescript-babel, which uses webpack, typescript and babel.

I change the webpack config to generate a library using UMD so I can use the library in the browser and server.

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src'),

  output: {
    filename: 'index.js',

    path: path.resolve(__dirname, 'lib'),

    library: 'mylib',
    libraryTarget: 'umd',
    globalObject: `(typeof self !== 'undefined' ? self : this)`,
    umdNamedDefine: true,
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }],
  },

  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new CleanWebpackPlugin()
  ]
};

Then when I build the library, I have the index.js file in the lib directory

When I drop the index.js in a simple html. how can I use the Value class in the project? I tried the following but it throws a Uncaught ReferenceError: Value is not defined

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="index.js">
    </script>

    <script>
      var val = new Value();
    </script>
  </body>
</html>

Thanks

Upvotes: 1

Views: 282

Answers (1)

pdiddy
pdiddy

Reputation: 6297

I found a solution but I'm not sure if that is the expected behavior. When I inspected the window object the following code works

    <script>
      var p = new window.mylib.Value();
      p.setValue(1000);
      console.log(p.getValue());
    </script>

So I guess webpack is adding the library to the window object when running in the browser ?

UPDATE:

I think it's because of the globalObject is set to 'this' which will mount the library to the window when in browser.

Upvotes: 1

Related Questions