search

josdejong / jsoneditor

A web-based tool to view, edit, format, and validate JSON
http://jsoneditoronline.org
Apache License 2.0
11.65k stars 2.04k forks source link

Set up Babel/Webpack bundling #689

Open josdejong opened 5 years ago

josdejong commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

jeff-hykin commented 5 years ago

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 commented 5 years ago

Sure, no problem! Thanks for your suggestions :)

123survesh commented 5 years ago

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

josdejong commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Thanks!

123survesh commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Ah good, I will pick it up this weekend :slightly_smiling_face: