How to generate single ES5 bundle file from ES6 project using webpack?

Question

I am trying to use react-vis library in my project. In their readme file, they have asked to import library by adding following lines in non-node environment:

If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.
<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>
The global reactVis object will now be available for you to play around.

When I did that, I got following error:

Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (dist.min.js:formatted:23789:27)
    at LabelSeries (dist.min.js:formatted:23823:21)
    at Constructor.render (<anonymous>:1866:23)
    at Constructor.<anonymous> (react.js:6029:34)
    at Constructor._renderValidatedComponent (react.js:11403:21)
    at Constructor.<anonymous> (react.js:5582:14)
    at Constructor.mountComponent (react.js:11403:21)
    at Constructor.mountChildren (react.js:10913:42)
    at Constructor._createContentMarkup (react.js:6812:32)
    at Constructor.<anonymous> (react.js:6734:14)

After a lot of digging, I realised the issue was that the react-vis library follows ES6, while my project is in ES5. So, I thought to transpile react-vis library to ES5. I used babel as explained in this post to transpile ES6 to ES5 (with slight changes). But, it generated multiple files. I needed single bundle file.

So, I followed steps explained here to generate single ES5 bundle file. I used same webpack.config.js as specified in these steps. And my scripts in package.json look something like this:

"build:babel": "babel src -d build"
"build:app": "npm run build:babel",
"build:bundle": "webpack --mode production",
"build3": "npm run build:app && npm run build:bundle"

It was successful, but when I used generated bundle file, I got error ReferenceError: reactVis. When I checked the generated bundle file, it did not contain reactVis variable. So, now I have two doubts:

Q1. how can I tell webpack to preserve reactVis variable?
Q2. how can I make webpack to add it to global scope (or how can I access this variable in my project once I linked the generated bundle)?

How to generate single ES5 bundle file from ES6 project using webpack?

0 Answers0