-1

I need to use a number of co-dependent ES6 classes in a web page, where development will be continued. For various reasons, the remainder of the development must happen in a browser-compatible environment. That is, I will be writing 'vanilla' javascript to be run in a script tag that uses these existing classes. I will NOT be using any more ES6 features developing this part of the JS.

I've already tried using babel and webpack to transpile my code into browser-friendly javascript. However, webpack renames and minifies the javascript so that it is virtually impossible to do any more extended development. Optimally, the classes that I defined in my ES6 code will remain exposed (as plain prototypal functions) as interfaces.

As an example, suppose I have some ES6 class BinaryOperation and a class Number (I know this exists in JS, but just as an example). These classes are defined in two separate JS files and have their own constructors. The "Number" class is a dependency of BinaryOperation and is imported. BinaryOperation has a number of functions in the class. I would like to be able to bundle both classes and their functionality into a single browser compatible file. This file would let me create BinaryOperation objects in my browser code using the new keyword, like I would for any non-es6 object prototype. What tools will help me accomplish this?

Matt R
  • 21
  • 2
  • https://stackoverflow.com/questions/3225251/how-can-i-share-code-between-node-js-and-the-browser may have something to do with your question, but handling of dependencies is a more complicated story. https://stackoverflow.com/questions/6971583/node-style-require-for-in-browser-javascript has some ideas, but the synchronous->asynchronous change is not really addressed there. – tevemadar May 03 '19 at 15:02

1 Answers1

1

After more research, I've found rollup.js which includes a babel plugin. This combines all es6 files into a single module and then converts all of the code to ES5 compatible JS.

Matt R
  • 21
  • 2