Issue 6310 - Start using JavaScript modularization tool

package.json

 {
   "name": "adblockplusui",
   "private": true,
   "description": "Adblock Plus UI",
   "scripts": {
     "lint": "npm run lint:js",
     "lint:js": "eslint ./*.js ./lib/*.js ./ext/*.js",
     "prepare": "python2 ensure_dependencies.py",
-    "start": "http-server",

[saroyanm, 2018/02/22 19:07:28]

Suggestion: What about watching changes while running local server ?
Any arguments against it ?
I think it's handy when you don't need to run watcher every time separately.

[a.giammarchi, 2018/02/23 08:51:37]

IIRC you can have only one output in console through cmd1 & cmd2, which one you
prefer? I think having possible errors on build visible is key, and I need to
double check once you exit both processes are gone.

[saroyanm, 2018/02/23 11:26:16]

I agree that build is more important, I have couple of suggestions:
* Use "concurrently" https://www.npmjs.com/package/concurrently AFAIK it also
should care of exit
* Make watch during server run optional (this is irregardless of concurrently
usage)
* Push the way it was(run start and watch separately and revisit this question
later on).

All of options will work fine with me.

[a.giammarchi, 2018/02/23 12:02:10]

current command works just fine and we don't need to handle kill-others cases so
I think we can go with this?

+    "start": "http-server & npm run watch",
     "bundle": "npm run bundle:desktop-options",

[saroyanm, 2018/02/22 19:07:28]

Detail: I think it will be helpful to document in README file how to create a
bundle and run watchers.

[a.giammarchi, 2018/02/23 08:51:37]

it's a matter of copy and paste using a different entry point name but surely I
can try to explain it on the README.

     "bundle:desktop-options": "eslint ./js/**/*.js && echo '/* eslint-disable */// BUNDLED FILE'>./desktop-options.js && browserify --node --no-bundle-external js/desktop-options.js >> ./desktop-options.js",

[saroyanm, 2018/02/22 18:54:32]

What does double ">>" mean in browserify, I thought the syntax is something like
"destination" > "target" ?

[a.giammarchi, 2018/02/23 08:51:37]

as explained by email, > and >> are not browserify features, rather how
shell/bash work.

[saroyanm, 2018/02/23 11:26:16]

Acknowledged.

     "watch": "npm run watch:desktop-options",
     "watch:desktop-options": "watch 'npm run bundle:desktop-options' ./js",
     "postinstall": "npm run bundle"
   },
   "devDependencies": {
     "browserify": "^16.1.0",
     "eslint": "^4.16.0",
     "eslint-config-eyeo": "^2.0.0",
     "http-server": "^0.11.1",
     "watch": "^1.0.2"
   }
 }