Issue 6310 - Start using JavaScript modularization tool

package.json

Index: package.json
===================================================================
--- a/package.json
+++ b/package.json
@@ -1,16 +1,23 @@
 {
   "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"
+    "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?

+    "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"
+    "http-server": "^0.11.1",
+    "watch": "^1.0.2"
   }
 }