Custom Javascript library using ECMA 6 and webpack 4

Question

My sum.js file as below

var mathOp = {
            sum : function(a,b){
                return a+b;
            }
        }     
export default mathOp;

My index.js file as below (It will have multiple import file and tree shaking later point of time)

import mathOp from "./sum";
export default mathOp;

I have made a bundle file bundle.js using webpack for above two files and called bundle.js in an index.html file as below

<script type="text/javascript" src="/bundle.js"></script></body>

Now I wanted to call mathOp.sum function in my index.html file as below

 <script type="text/javascript">
    $(document).ready(function(){
      var result = mathOp.sum(2,5);
      console.log(result); 
 });        
 </script>

But I am not able to do it? can any one guide me how to do it?

Possible duplicate of [module.exports vs. export default in Node.js and ES6](https://stackoverflow.com/questions/40294870/module-exports-vs-export-default-in-node-js-and-es6) — FatalMerlin, Jul 27 '18 at 08:01
I believe the problem is that the bundle is encapsulated. So no exports are actually on the global object. You should move the code that depends on the `mathOp` to a separate file, import the `mathOp` and budle that file too. — Razem, Jul 27 '18 at 08:04
@FatalMerlin tried different combination as given but no luck. — Parth Patel, Jul 27 '18 at 08:11
@Razem any link/reference code to learn and make it step by step? — Parth Patel, Jul 27 '18 at 08:11
Have you configured Webpack to create a `mapOp` global? By default Webpack won't do that, you'd have to use https://webpack.js.org/configuration/output/#output-library — loganfsmyth, Jul 27 '18 at 14:42

score 1 · Accepted Answer · answered Aug 16 '18 at 13:53

As pointed out by @loganfsmyth By default, webpack can not expose any of function from bundle.js

To do that, we need to configure the JS file as the library in webpack.config.js as below

module.exports = {
  //...
  output: {
    library: 'MyBundle'
  }
}

Now We can able to use sum function as below

<script type="text/javascript">
    $(document).ready(function(){
      var result = MyBundle.mathOp.sum(2,5);
      console.log(result); 
 });        
</script>

For further reference, Please refer https://webpack.js.org/configuration/output/#output-library

Custom Javascript library using ECMA 6 and webpack 4

1 Answers1