Set up Babel/Webpack bundling

[josdejong]

Right now, all code is still ES5 and we cannot use ES6+ features as this will break on older browsers. It would be great if we can set up bundling via Babel/Webpack bundling.

Anyone interested in picking this up?

[jeff-hykin]

Its actually really easy to use parcel.js, which uses babel.
npm install -g parcel
parcel build index.js
Running that will generate a dist folder with the compiled index.js inside of it. The compiled file should behave like the normal one in terms of importing from it. It by default polyfills all of ES6+ with ES5.

To configure anything custom with babel, create a .babelrc file in the root folder, and parcel.js will automatically incorporate it.

[josdejong]

Yeah, I'm open for that. We could integrate Parcel. Or maybe Fusebox. @jeff-hykin would you be interested to implement this?

[jeff-hykin]

I'm probably not best suited for it, I was just checking out the repo for the first time yesterday! I've got a few repo's I need to maintain before jumping into anything new. Thanks for asking though.

[josdejong]

Sure, no problem! Thanks for your suggestions :)

[123survesh]

With some direction I can do this, @dosdejong can I work on this?

[josdejong]

That would be great @123survesh, thanks for your offer. Recently I added Babel already to the project.

Currently there are a couple of gulp scripts in place to generate two versions of the library (jsoneditor.js and jsoneditor-minimalist.js), and for both a minified version, and separately a css file and minified css file.

I think we can simplify this by embedding the css inside the JavaScript files so you don't have to separately load the css file. And also, it is enough I think to build a minified version of the library. The non-minified version is redundant I think.

[123survesh]

The non-minified versions are good for testing purposes during development. It would be nice have those around @josdejong .

Do you know any ways to combine css and js together? As far as I know, we can put the minified css as string into the js file and add it dynamically to the webpage once the script loads

[josdejong]

The non-minified versions are good for testing purposes during development. It would be nice have those around @josdejong .

We should definitely have a way of easy testing. With Webpack you can setup a development server which should allow for easy debugging and hot-reloading, shall we give that a try?

Do you know any ways to combine css and js together? As far as I know, we can put the minified css as string into the js file and add it dynamically to the webpage once the script loads

With Webpack (and Parcel etc) you can put import 'MyComponent.scss' inside MyComponent.js, and it will be packaged inside the JS bundle. (for example create-react-app has that working and setup out of the box)

[123survesh]

Ok lets try the webpack's development server feature. I am new to webpack, I will go through how that works and about embedding scss into js files as well.

[josdejong]

Thanks!

[123survesh]

Hi @josdejong , how is this task coming along? Sorry I couldn't pick it up sooner. I was occupied the past few moths. If this feature needs help I can work on it this weekend.

[josdejong]

Hi good to hear back from you Survesh! I haven't picked up the webpack bundling. There was progress with SCSS and linting with prettier, see #923. If you address bundling you may be able to pick linting up in one go as well :).

[123survesh]

Ah good, I will pick it up this weekend 🙂