ADD: Webpack module bundler to compile code from /src/ to /dist/ #512

VladimirMikulic · 2020-01-07T18:37:45Z

Up to this point, we have been writing old ES5.
This change introduces Webpack, Webpack development server, Babel...
From now on, we will be able to write modern JavaScript.

I know this is a game-changer for the project, so I'll do my best to explain what I did.

Webpack 🎉 🎉 🎉

Let's start from NPM scripts:

build
dev

build NPM script

The script uses cross-env package to set NODE_ENV environment variable.
It's cross-platform environment variables setter.

The NODE_ENV variable is used by Webpack to determine how it should bundle files.
Webpack has 2 modes:

production
development

In the production mode, it will minify JS, do various optimizations...
In the development mode, it won't do that many optimizations because it would slow down our Webpack development server. That's why it's called development mode.

By running this script, your JS is ready to be deployed.
I removed leaflet.distortableimage.js from the git tracker. Should I add it back?

dev NPM script
The script runs the build script and starts a Webpack development server, which opens examples/index.html file in the browser.

We run build script first because it produces vendor.js & vendor.css files.
The files contain 3rd party JS and CSS.

Previously, we included a bunch of script and link tags, now it's all bundled in these 2 files.
(webpack.config.js:72 MergeIntoSingleFilePlugin)

Grunt

In the Gruntfile.js Webpack is loaded. It is used by build script(grunt build).
The watch task has been removed in favour of Webpack development server, which is much more flexible.

Karma

In karma.conf.js, I've introduced karma-babel-preprocessor. As the name suggests it will transpile our ESNext to ES5, so Karma can run our tests.

webpack.config.js

entry -> Grunt is fired :)
output -> outputs the bundle
module -> contains babel-loader(it transpiles our JS to old ES5)
devServer -> configuration object for Webpack development server
devtool -> genereates leaflet.distortableimage.map.js file
stats -> minimizes Webpack's terminal output

The if statement executes if we are running Webpack in the production mode.
Including these plugins from the if statement directly in plugins key on the config object doesn't make sense. It drastically slows down our server(2s+ reload time!) and these are the files from node_modules, we don't modify them :)

If something is unclear, feel free to ask.
It took me quite a bit of time and research and hopefully it'll benefit the project in the long run 👍

We can also copy this file to other PublicLab projects and properly adjust it. 📝
Everyone should enjoy the beauty of ESNext 😄

Resolves #372

@cesswairimu @jywarren @sashadev-sky could you review this? Thanks.

jywarren · 2020-01-07T19:01:41Z

OMGGGGGGG this is so awesome!!!! Ok, this is a big one. We'll want to be careful, and it may take some time to be thorough. AMAZING WORK @VladimirMikulic !!!!! 🎉

jywarren · 2020-01-07T19:02:28Z

And noting Sasha is offline and not available right away!

jywarren · 2020-01-07T19:04:14Z

So now, we can do includes via require(...)? I haven't used webpack as much as browserify but assume it's pretty similar.

@rexagod this may make #312 more possible now, if I remember correctly?

jywarren · 2020-01-07T19:05:06Z

I changed the title to be more detailed, i hope it's correct: to compile code from /src/ to /dist/

Also, let's start working on getting the above description in as readable a form as possible into the README file?

VladimirMikulic · 2020-01-07T19:18:51Z

So now, we can do includes via require(...)? I haven't used webpack as much as browserify but assume it's pretty similar.

Correct, you can use either require('module') or import 'module'.

cesswairimu · 2020-01-07T19:19:55Z

Wow awesome 🎉 🎉

VladimirMikulic · 2020-01-07T19:58:26Z

@jywarren Alright, I updated the README to show project set up with Webpack.
This is for average contributors. They don't need to know the inner working of webpack.config.js.

Maybe I can write a separate file like WEBPACK.md where I explain every single line of the configuration file? It would be for core project maintainers.

What do you think?

jywarren · 2020-01-07T20:58:04Z

sure, that sounds nice! Just be sure to link to it from the README so it's easy to find!

…

On Tue, Jan 7, 2020 at 2:58 PM Vladimir Mikulic ***@***.***> wrote: @jywarren <https://github.com/jywarren> Alright, I update the README to show project set up with Webpack. This is for average contributors. They don't need to know the inner working of webpack.config.js. Maybe I can write a separate file like WEBPACK.md where I explain every single line of the configuration file? It would be for core project maintainers. What do you think? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#512?email_source=notifications&email_token=AAAF6J7KIKSX72TP4W5IJC3Q4TNGHA5CNFSM4KD5LM52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIKCRBI#issuecomment-571746437>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J3OKKHRAZYBTAEPEEDQ4TNGHANCNFSM4KD5LM5Q> .

VladimirMikulic · 2020-01-07T23:13:06Z

@jywarren I've documented Webpack configuration file. It should be understandable now :)

README.md

sashadev-sky · 2020-01-13T07:19:04Z

will go through this asap!

jywarren · 2020-01-13T21:57:06Z

@VladimirMikulic maybe rebuild that dist file and add it? Then if @sashadev-sky approves we can merge 🎉

VladimirMikulic · 2020-01-13T21:57:57Z

@jywarren 👍

jywarren · 2020-01-17T20:06:30Z

Hi @sashadev-sky - no rush, but if you happen to have a moment to read this through it's really big and would be great to merge before too many other PRs!

VladimirMikulic · 2020-01-17T20:15:52Z

Let's do this 😄

sashadev-sky

Thanks this is great - really appreciate you working through all the webpack configs here.

I made some change requests and besides those:

Is it possible to enable running the tests during development as well? I think they are super helpful!
Is it possible to make it so that the user doesn't have to run $ npm run build after changes? I think a lot of people will forget and commit their dist file unminified. Maybe a pre-commit hook?
I think webpack is meant to be integrated with either grunt or npm scripts, not both? Is it possible to shift to one of those directions? (Don't worry about the $ grunt icons task just referring to the build, server, tests, linting)

WEBPACK.md

Gruntfile.js

.gitignore

examples/index.html

examples/select.html

VladimirMikulic · 2020-01-18T16:15:54Z

@sashadev-sky thank you very much for taking time to review this.

Is it possible to enable running the tests during development as well? I think they are super helpful!

Yes, it is, but then we would sacrifice our Webpack development server.
I already thought about this and I've chosen Webpack server to be more important in development.

In my opinion, running tests on every minor change is just adding overhead. After the developer finishes the work, he runs npm build and then tests will warn him if he has done something wrong.

One possible workaround to keep both would be to return the grunt watch task and make it run tests on change. A developer would need 2 terminal windows (tabs if you are using modern terminal), but that shouldn't be a problem, right?

Is it possible to make it so that the user doesn't have to run $ npm run build after changes? I think a lot of people will forget and commit their dist file unminified. Maybe a pre-commit hook?

Pre-commit hook would be awesome 👍 I'll add it.

I think webpack is meant to be integrated with either grunt or npm scripts, not both? Is it possible to shift to one of those directions? (Don't worry about the $ grunt icons task just referring to the build, server, tests, linting)

Not really, it depends on the project. NPM scripts serves as an interface for easier management of our project. If you take a look at my npm build command you'll notice that it does quite a few things.

If we were to rewrite it to stay in Gruntfile.js, we would have to use 3rd party plugin and it wouldn't be as clean as it is now.

I've integrated Webpack with Grunt because it's not possible to go with Webpack-only approach in our project. They are different things built for different purposes.
Grunt is a task runner and Webpack is a module bundler.

For example, JSHint is not supported in Webpack. We would need to adjust the coverage as well (if it's even possible).

I hope this clears your doubts. Thanks a lot!

jywarren · 2020-01-19T00:54:35Z

One possible workaround to keep both would be to return the grunt watch task and make it run tests on change. A developer would need 2 terminal windows (tabs if you are using modern terminal), but that shouldn't be a problem, right?

I wonder, would it be possible to have a variant command which allows running both at one if you want? I know everyone has a slightly different workflow.

Thanks, both of you!!

VladimirMikulic · 2020-01-19T01:16:16Z

@jywarren, unfortunately, it's not possible. grunt watch starts a process and Webpack development server starts its own process. These are 2 different processes and they can not run in the same shell instance. That's why I mentioned double windows.

I can get rid of WDS if you'd prefer that approach.

sashadev-sky · 2020-01-19T12:41:03Z

One possible workaround to keep both would be to return the grunt watch task and make it run tests on change. A developer would need 2 terminal windows (tabs if you are using modern terminal), but that shouldn't be a problem, right?

Its no problem let's do it! @VladimirMikulic

README.md

WEBPACK.md

webpack.config.js

Up to this point, we have been writing old ES5. This change introduces Webpack, Webpack development server, Babel... From now on, we will be able to write modern JavaScript. Resolves #372

"Contributing" section updated to show project setup with Webpack.

The documentation for the Webpack configuration file can be found in WEBPACK.md

Added to resolve merge conflict.

Fixed redundant spaces and a grammar issue.

Changes: - Add npm build script to pre-commit task - Remove redundant Grunt's "default" task - Empty line to .gitignore - Move vendor.css to load before our css - Change WDS port from 3000 to 8080 - Update README.md

Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

Karma configuration modified to generate the coverage folder inside of the working directory and without PhantomJS subfolder. Minor change: browserlist update to include browsers with the usage > 0.2% Resolves #537

VladimirMikulic · 2020-01-29T19:02:06Z

@sashadev-sky no worries. The configuration has been updated properly :)

sashadev-sky · 2020-02-06T22:09:27Z

ok lets do this!!!

VladimirMikulic · 2020-02-06T22:13:21Z

🚀 🚀 🎉 🎉

sashadev-sky · 2020-02-06T22:26:44Z

Congrats on GCI!!!! Great work

VladimirMikulic · 2020-02-06T22:32:39Z

Thanks a lot @sashadev-sky. It's been a pleasure to work with you :)

sashadev-sky · 2020-02-07T17:18:55Z

you too! Published this on npm

jywarren · 2020-02-08T04:18:03Z

Wow this is thrilling! Amazing work folks! cc @rexagod as this is now ready for some portions of es6 upgrades due to webpack usage.

jywarren · 2020-02-08T04:19:22Z

Link https://github.com/publiclab/matcher-core/issues/1

jywarren · 2020-02-08T04:20:00Z

Oops actually #312

VladimirMikulic · 2020-02-08T08:08:45Z

Thanks, @jywarren. We did it :)

* ADD: Webpack module bundler Up to this point, we have been writing old ES5. This change introduces Webpack, Webpack development server, Babel... From now on, we will be able to write modern JavaScript. Resolves #372 * UPDATE: README "Contributing" section "Contributing" section updated to show project setup with Webpack. * ADD: Webpack config file documentation The documentation for the Webpack configuration file can be found in WEBPACK.md * ADD: "npm run build" to travis.yml * ADD: leaflet.distortableimage.js to git tracker Added to resolve merge conflict. * UPDATE: Webpack.md Fixed redundant spaces and a grammar issue. * UPDATE: Project configuration files Changes: - Add npm build script to pre-commit task - Remove redundant Grunt's "default" task - Empty line to .gitignore - Move vendor.css to load before our css - Change WDS port from 3000 to 8080 - Update README.md * ADD: "watch" Grunt task to run tests on change * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update WEBPACK.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * v0.12.6 🚀🚀🚀 * FIX: Karma tests coverage Karma configuration modified to generate the coverage folder inside of the working directory and without PhantomJS subfolder. Minor change: browserlist update to include browsers with the usage > 0.2% Resolves #537 * Rebase the branch Co-authored-by: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

…liclab#512) * ADD: Webpack module bundler Up to this point, we have been writing old ES5. This change introduces Webpack, Webpack development server, Babel... From now on, we will be able to write modern JavaScript. Resolves publiclab#372 * UPDATE: README "Contributing" section "Contributing" section updated to show project setup with Webpack. * ADD: Webpack config file documentation The documentation for the Webpack configuration file can be found in WEBPACK.md * ADD: "npm run build" to travis.yml * ADD: leaflet.distortableimage.js to git tracker Added to resolve merge conflict. * UPDATE: Webpack.md Fixed redundant spaces and a grammar issue. * UPDATE: Project configuration files Changes: - Add npm build script to pre-commit task - Remove redundant Grunt's "default" task - Empty line to .gitignore - Move vendor.css to load before our css - Change WDS port from 3000 to 8080 - Update README.md * ADD: "watch" Grunt task to run tests on change * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update WEBPACK.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * Update README.md Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com> * v0.12.6 🚀🚀🚀 * FIX: Karma tests coverage Karma configuration modified to generate the coverage folder inside of the working directory and without PhantomJS subfolder. Minor change: browserlist update to include browsers with the usage > 0.2% Resolves publiclab#537 * Rebase the branch Co-authored-by: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

jywarren requested review from sashadev-sky and rexagod January 7, 2020 19:01

jywarren changed the title ~~ADD: Webpack module bundler~~ ADD: Webpack module bundler to compile code from /src/ to /dist/ Jan 7, 2020

VladimirMikulic mentioned this pull request Jan 8, 2020

REFACTOR: Signup modal form validation publiclab/plots2#7150

Closed

jywarren requested changes Jan 8, 2020

View reviewed changes

README.md Outdated Show resolved Hide resolved

VladimirMikulic requested a review from jywarren January 8, 2020 23:34

sashadev-sky requested changes Jan 18, 2020

View reviewed changes

sashadev-sky added gci in progress and removed gci in progress labels Jan 18, 2020

sashadev-sky requested changes Jan 19, 2020

View reviewed changes

README.md Outdated Show resolved Hide resolved

WEBPACK.md Outdated Show resolved Hide resolved

WEBPACK.md Outdated Show resolved Hide resolved

webpack.config.js Outdated Show resolved Hide resolved

VladimirMikulic and others added 16 commits January 29, 2020 19:54

ADD: Webpack module bundler

ab4e8ac

Up to this point, we have been writing old ES5. This change introduces Webpack, Webpack development server, Babel... From now on, we will be able to write modern JavaScript. Resolves #372

UPDATE: README "Contributing" section

e96e77b

"Contributing" section updated to show project setup with Webpack.

ADD: Webpack config file documentation

15d3faa

The documentation for the Webpack configuration file can be found in WEBPACK.md

ADD: "npm run build" to travis.yml

e929410

ADD: leaflet.distortableimage.js to git tracker

57b6826

Added to resolve merge conflict.

UPDATE: Webpack.md

e5b11f5

Fixed redundant spaces and a grammar issue.

UPDATE: Project configuration files

7cb7155

Changes: - Add npm build script to pre-commit task - Remove redundant Grunt's "default" task - Empty line to .gitignore - Move vendor.css to load before our css - Change WDS port from 3000 to 8080 - Update README.md

ADD: "watch" Grunt task to run tests on change

ab40aab

Update README.md

f329542

Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

Update README.md

7d83e0d

Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

Update README.md

ce1159e

Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

Update WEBPACK.md

f0f186f

Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

Update README.md

ce07208

Co-Authored-By: Sasha Boginsky <41092741+sashadev-sky@users.noreply.github.com>

v0.12.6 🚀🚀🚀

a7fec7a

FIX: Karma tests coverage

492f1c0

Karma configuration modified to generate the coverage folder inside of the working directory and without PhantomJS subfolder. Minor change: browserlist update to include browsers with the usage > 0.2% Resolves #537

Rebase the branch

ab953d2

sashadev-sky merged commit be33b46 into publiclab:main Feb 6, 2020

jywarren mentioned this pull request Feb 8, 2020

Automated image matching and stitching using matcher-core library #312

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ADD: Webpack module bundler to compile code from /src/ to /dist/ #512

ADD: Webpack module bundler to compile code from /src/ to /dist/ #512

VladimirMikulic commented Jan 7, 2020 •

edited

Loading

jywarren commented Jan 7, 2020

jywarren commented Jan 7, 2020

jywarren commented Jan 7, 2020

jywarren commented Jan 7, 2020

VladimirMikulic commented Jan 7, 2020

cesswairimu commented Jan 7, 2020

VladimirMikulic commented Jan 7, 2020 •

edited

Loading

jywarren commented Jan 7, 2020 via email

VladimirMikulic commented Jan 7, 2020

sashadev-sky commented Jan 13, 2020

jywarren commented Jan 13, 2020

VladimirMikulic commented Jan 13, 2020

jywarren commented Jan 17, 2020

VladimirMikulic commented Jan 17, 2020

sashadev-sky left a comment

VladimirMikulic commented Jan 18, 2020 •

edited

Loading

jywarren commented Jan 19, 2020

VladimirMikulic commented Jan 19, 2020

sashadev-sky commented Jan 19, 2020

VladimirMikulic commented Jan 29, 2020

sashadev-sky commented Feb 6, 2020

VladimirMikulic commented Feb 6, 2020

sashadev-sky commented Feb 6, 2020

VladimirMikulic commented Feb 6, 2020

sashadev-sky commented Feb 7, 2020

jywarren commented Feb 8, 2020

jywarren commented Feb 8, 2020

jywarren commented Feb 8, 2020

VladimirMikulic commented Feb 8, 2020

ADD: Webpack module bundler to compile code from /src/ to /dist/ #512

ADD: Webpack module bundler to compile code from /src/ to /dist/ #512

Conversation

VladimirMikulic commented Jan 7, 2020 • edited Loading

Let's start from NPM scripts:

Grunt

Karma

webpack.config.js

jywarren commented Jan 7, 2020

jywarren commented Jan 7, 2020

jywarren commented Jan 7, 2020

jywarren commented Jan 7, 2020

VladimirMikulic commented Jan 7, 2020

cesswairimu commented Jan 7, 2020

VladimirMikulic commented Jan 7, 2020 • edited Loading

jywarren commented Jan 7, 2020 via email

VladimirMikulic commented Jan 7, 2020

sashadev-sky commented Jan 13, 2020

jywarren commented Jan 13, 2020

VladimirMikulic commented Jan 13, 2020

jywarren commented Jan 17, 2020

VladimirMikulic commented Jan 17, 2020

sashadev-sky left a comment

Choose a reason for hiding this comment

VladimirMikulic commented Jan 18, 2020 • edited Loading

jywarren commented Jan 19, 2020

VladimirMikulic commented Jan 19, 2020

sashadev-sky commented Jan 19, 2020

VladimirMikulic commented Jan 29, 2020

sashadev-sky commented Feb 6, 2020

VladimirMikulic commented Feb 6, 2020

sashadev-sky commented Feb 6, 2020

VladimirMikulic commented Feb 6, 2020

sashadev-sky commented Feb 7, 2020

jywarren commented Feb 8, 2020

jywarren commented Feb 8, 2020

jywarren commented Feb 8, 2020

VladimirMikulic commented Feb 8, 2020

VladimirMikulic commented Jan 7, 2020 •

edited

Loading

VladimirMikulic commented Jan 7, 2020 •

edited

Loading

VladimirMikulic commented Jan 18, 2020 •

edited

Loading