Merge pull request #498 from ipfs-shipyard/webpack

This PR switches the build from browserify to webpack. I tried to make non-invasive and easy to review, so it does not change project layout. Immediate gains introduced by this PR: - more control over build process, no surprises - time required by subsequent `yarn build` decreased from ~100s to ~30s - size of window.ipfs content script from 1.1M to 869K - size of entire add-on/dist from 6.5M to 5.6M - `yarn watch` produces human-readable code that is easier to debug Also added changes from #499 to this PR, which brings: - `add-on/dist/` size decreased to `5.5M` - shared webpack config as a base for all targets - separates build targets for background page, GUI and content scripts - bundled webext polyfill for chrome, removed two calls to `tabs.executeScript` - detects and rebuilds ipfs proxy content script on changes (`yarn watch`) - removes browserify libs and other leftovers
ipfs · Jun 14, 2018 · 4c77644 · 4c77644
2 parents c6786b0 + dc51884
commit 4c77644
Show file tree

Hide file tree

Showing 17 changed files with 1,597 additions and 1,004 deletions.
diff --git a/add-on/manifest.common.json b/add-on/manifest.common.json
@@ -48,7 +48,7 @@
     {
       "all_frames": true,
       "js": [
-        "dist/contentScripts/ipfs-proxy/content.js"
+        "dist/bundles/ipfsProxyContentScript.bundle.js"
       ],
       "matches": [
         "<all_urls>"

diff --git a/add-on/src/background/background.html b/add-on/src/background/background.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<script src="../ipfs-companion-common.js"></script>
-<script src="background.js"></script>
+<script src="/dist/bundles/ipfs.bundle.js"></script>
+<script src="/dist/bundles/backgroundPage.bundle.js"></script>
diff --git a/add-on/src/background/big-deps.js b/add-on/src/background/big-deps.js
diff --git a/add-on/src/contentScripts/ipfs-proxy/content.js b/add-on/src/contentScripts/ipfs-proxy/content.js
@@ -1,8 +1,9 @@
 'use strict'
 
+import rawCode from './../../../dist/bundles/ipfsProxyContentScriptPayload.bundle.js'
+
 const browser = require('webextension-polyfill')
 const injectScript = require('./inject-script')
-const fs = require('fs')
 
 function init () {
   const port = browser.runtime.connect({ name: 'ipfs-proxy' })
@@ -20,10 +21,7 @@ function init () {
     }
   })
 
-  // browserify inlines contents of this file
-  const code = fs.readFileSync(`${__dirname}/../../../dist/contentScripts/ipfs-proxy/page.js`, 'utf8')
-
-  injectScript(code)
+  injectScript(rawCode)
 }
 
 // Restricting window.ipfs to Secure Context

diff --git a/add-on/src/contentScripts/linkifyDOM.js b/add-on/src/contentScripts/linkifyDOM.js
@@ -1,6 +1,8 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+const browser = require('webextension-polyfill')
+
 /*
  * This content script is responsible for performing the logic of replacing
  * plain text with IPFS addresses with clickable links.

diff --git a/add-on/src/lib/ipfs-companion.js b/add-on/src/lib/ipfs-companion.js
@@ -328,17 +328,8 @@ module.exports = async function init () {
       if (state.linkify) {
         console.info(`[ipfs-companion] Running linkfyDOM for ${tab.url}`)
         try {
-          const browserApiPresent = (await browser.tabs.executeScript(tabId, { runAt: 'document_start', code: "typeof browser !== 'undefined'" }))[0]
-          if (!browserApiPresent) {
-            await browser.tabs.executeScript(tabId, {
-              file: '/dist/contentScripts/browser-polyfill.min.js',
-              matchAboutBlank: false,
-              allFrames: true,
-              runAt: 'document_start'
-            })
-          }
           await browser.tabs.executeScript(tabId, {
-            file: '/dist/contentScripts/linkifyDOM.js',
+            file: '/dist/bundles/linkifyContentScript.bundle.js',
             matchAboutBlank: false,
             allFrames: true,
             runAt: 'document_idle'
@@ -360,7 +351,7 @@ module.exports = async function init () {
           })
           // inject script that normalizes `href` and `src` containing unhandled protocols
           await browser.tabs.executeScript(tabId, {
-            file: '/dist/contentScripts/normalizeLinksWithUnhandledProtocols.js',
+            file: '/dist/bundles/normalizeLinksContentScript.bundle.js',
             matchAboutBlank: false,
             allFrames: true,
             runAt: 'document_end'

diff --git a/add-on/src/options/options.html b/add-on/src/options/options.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="../ipfs-companion-common.js"></script>
-    <script src="options.js"></script>
+    <script src="/dist/bundles/uiCommons.bundle.js"></script>
+    <script src="/dist/bundles/optionsPage.bundle.js"></script>
   </body>
 </html>
diff --git a/add-on/src/pages/proxy-access-dialog/index.html b/add-on/src/pages/proxy-access-dialog/index.html
@@ -10,8 +10,8 @@
 
 <body class="bg-snow-muted h-100">
   <div id="root"></div>
-  <script src="../../ipfs-companion-common.js"></script>
-  <script src="proxy-access-dialog.js"></script>
+  <script src="/dist/bundles/uiCommons.bundle.js"></script>
+  <script src="/dist/bundles/proxyAclDialog.bundle.js"></script>
 </body>
 
 </html>
diff --git a/add-on/src/pages/proxy-acl/index.html b/add-on/src/pages/proxy-acl/index.html
@@ -10,8 +10,8 @@
 
 <body>
   <div id="root"></div>
-  <script src="../../ipfs-companion-common.js"></script>
-  <script src="proxy-acl.js"></script>
+  <script src="/dist/bundles/uiCommons.bundle.js"></script>
+  <script src="/dist/bundles/proxyAclManagerPage.bundle.js"></script>
 </body>
 
 </html>
diff --git a/add-on/src/popup/browser-action/index.html b/add-on/src/popup/browser-action/index.html
@@ -7,7 +7,7 @@
   </head>
   <body style="width: 320px; overflow: hidden; background: white;">
     <div id="root"></div>
-    <script src="../../ipfs-companion-gui-common.js"></script>
-    <script src="browser-action.js"></script>
+    <script src="/dist/bundles/uiCommons.bundle.js"></script>
+    <script src="/dist/bundles/browserAction.bundle.js"></script>
   </body>
 </html>
diff --git a/add-on/src/popup/page-action/index.html b/add-on/src/popup/page-action/index.html
@@ -7,7 +7,7 @@
   </head>
   <body style="width: 330px; overflow: hidden; background: white;">
     <div id="root"></div>
-    <script src="../../ipfs-companion-gui-common.js"></script>
-    <script src="page-action.js"></script>
+    <script src="/dist/bundles/uiCommons.bundle.js"></script>
+    <script src="/dist/bundles/pageAction.bundle.js"></script>
   </body>
 </html>
diff --git a/add-on/src/popup/quick-upload.html b/add-on/src/popup/quick-upload.html
@@ -9,8 +9,8 @@
 
 <body>
   <div id="root"></div>
-  <script src="../ipfs-companion-gui-common.js"></script>
-  <script src="quick-upload.js"></script>
+    <script src="/dist/bundles/uiCommons.bundle.js"></script>
+    <script src="/dist/bundles/uploadPage.bundle.js"></script>
 </body>
 
 </html>
diff --git a/ci/Jenkinsfile b/ci/Jenkinsfile
@@ -21,19 +21,19 @@ parallel(
                 }
                 try {
                     stage('ci:test') {
-                        sh 'docker run -i --rm -e JUNIT_REPORT_PATH=test/report.xml -v $(pwd)/test:/usr/src/app/test:rw ipfs-companion:$(cat git-HEAD) npm run ci:test'
+                        sh 'docker run -i --rm -e CI=true -e JUNIT_REPORT_PATH=test/report.xml -v $(pwd)/test:/usr/src/app/test:rw ipfs-companion:$(cat git-HEAD) npm run ci:test'
                     }
                 } finally {
                     junit allowEmptyResults: true, testResults: 'test/report.xml'
                 }
                 stage('ci:build') {
                     sh 'mkdir -p $(pwd)/build'
-                    sh 'docker run -i --rm -v $(pwd)/build:/usr/src/app/build:rw -v $(pwd)/add-on:/usr/src/app/add-on:rw  ipfs-companion:$(cat git-HEAD) npm run ci:build'
+                    sh 'docker run -i --rm -e CI=true -v $(pwd)/build:/usr/src/app/build:rw -v $(pwd)/add-on:/usr/src/app/add-on:rw  ipfs-companion:$(cat git-HEAD) npm run ci:build'
                     sh 'ls -Rlh build'
                     archiveArtifacts artifacts: 'build/**/*.zip', fingerprint: true
                 }
                 stage('lint:web-ext') {
-                    sh 'docker run -i --rm -v $(pwd)/add-on:/usr/src/app/add-on:ro ipfs-companion:$(cat git-HEAD) npm run lint:web-ext'
+                    sh 'docker run -i --rm -e CI=true -v $(pwd)/add-on:/usr/src/app/add-on:ro ipfs-companion:$(cat git-HEAD) npm run lint:web-ext'
                 }
                 githubNotify description: 'Reproducible build looks good', status: 'SUCCESS', context: ciContext
             } catch (err) {

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "clean": "run-p clean:*",
     "clean:build": "shx rm -rf build/*",
     "clean:dist": "shx rm -rf add-on/dist",
+    "clean:ui-kit": "shx rm -rf add-on/ui-kit",
     "build": "run-s clean build:*",
     "build:copy": "run-s build:copy:*",
     "build:copy:src": "shx mkdir -p add-on/dist && shx cp -R add-on/src/* add-on/dist",
@@ -20,36 +21,24 @@
     "build:copy:ui-kit:ipfs-css:css": "shx mkdir -p add-on/ui-kit && shx cp node_modules/ipfs-css/ipfs.css add-on/ui-kit",
     "build:copy:ui-kit:ipfs-css:fonts": "shx mkdir -p add-on/ui-kit/fonts && shx cp node_modules/ipfs-css/fonts/* add-on/ui-kit/fonts",
     "build:copy:ui-kit:tachyons": "shx mkdir -p add-on/ui-kit && shx cp node_modules/tachyons/css/tachyons.css add-on/ui-kit",
-    "build:copy:wx-polyfill-lib": "shx cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js add-on/dist/contentScripts/browser-polyfill.min.js",
     "build:js": "run-p build:js:*",
-    "build:js:gui": "browserify -p prundupify -g [ uglifyify --compress [ --inline=0 ] ] -t [ browserify-package-json --global ] add-on/src/popup/browser-action/index.js add-on/src/popup/page-action/index.js add-on/src/popup/quick-upload.js -p [ factor-bundle -o add-on/dist/popup/browser-action/browser-action.js -o add-on/dist/popup/page-action/page-action.js -o add-on/dist/popup/quick-upload.js] -o add-on/dist/ipfs-companion-gui-common.js",
-    "build:js:backend": "browserify -p prundupify -g [ uglifyify --compress [ --inline=0 ] ] -t [ browserify-package-json --global ] add-on/src/background/background.js add-on/src/background/big-deps.js add-on/src/options/options.js add-on/src/pages/proxy-acl/index.js add-on/src/pages/proxy-access-dialog/index.js -p [ factor-bundle -o add-on/dist/background/background.js -o add-on/dist/background/big-deps.js -o add-on/dist/options/options.js -o add-on/dist/pages/proxy-acl/proxy-acl.js -o add-on/dist/pages/proxy-access-dialog/proxy-access-dialog.js ] -o add-on/dist/ipfs-companion-common.js",
-    "build:content-scripts": "run-p build:content-scripts:*",
-    "build:content-scripts:ipfs-proxy": "run-s build:content-scripts:ipfs-proxy:*",
-    "build:content-scripts:ipfs-proxy:page": "browserify -p prundupify -g uglifyify -t [ browserify-package-json --global ] add-on/src/contentScripts/ipfs-proxy/page.js -o add-on/dist/contentScripts/ipfs-proxy/page.js",
-    "build:content-scripts:ipfs-proxy:content": "browserify -p prundupify -g uglifyify -t brfs -t [ browserify-package-json --global ] -s IpfsProxyContent add-on/src/contentScripts/ipfs-proxy/content.js -o add-on/dist/contentScripts/ipfs-proxy/content.js",
-    "build:content-scripts:ipfs-proxy:cleanup": "shx rm add-on/dist/contentScripts/ipfs-proxy/page.js",
-    "build:minimize-dist": "shx rm -rf add-on/dist/lib",
+    "build:js:webpack": "webpack -p",
+    "build:minimize-dist": "shx rm -rf add-on/dist/lib add-on/dist/contentScripts/ add-on/dist/bundles/ipfsProxyContentScriptPayload.bundle.js",
     "build:bundle-all": "RELEASE_CHANNEL=${RELEASE_CHANNEL:=dev} run-s bundle:generic && cross-env-shell test \"$RELEASE_CHANNEL\" = \"beta\" && run-s bundle:firefox:beta || run-s bundle:firefox",
     "bundle": "run-s bundle:*",
     "bundle:generic": "shx cp add-on/manifest.common.json add-on/manifest.json && web-ext build -a build/generic",
     "bundle:firefox": "shx cat add-on/manifest.common.json add-on/manifest.firefox.json | json --deep-merge > add-on/manifest.json && web-ext build -a build/firefox/",
     "bundle:firefox:beta": "shx cat add-on/manifest.common.json add-on/manifest.firefox.json add-on/manifest.firefox-beta.json | json --deep-merge > add-on/manifest.json && web-ext build -a build/firefox/beta/",
     "watch": "npm-run-all build:copy --parallel watch:*",
     "watch:js": "run-p watch:js:*",
-    "watch:js:gui": "watchify -p prundupify -t [ browserify-package-json --global ] add-on/src/popup/browser-action/index.js add-on/src/popup/page-action/index.js add-on/src/popup/quick-upload.js -p [ factor-bundle -o add-on/dist/popup/browser-action/browser-action.js -o add-on/dist/popup/page-action/page-action.js -o add-on/dist/popup/quick-upload.js] -o add-on/dist/ipfs-companion-gui-common.js -v",
-    "watch:js:backend": "watchify -p prundupify -t [ browserify-package-json --global ] add-on/src/background/background.js add-on/src/options/options.js add-on/src/pages/proxy-acl/index.js add-on/src/pages/proxy-access-dialog/index.js -p [ factor-bundle -o add-on/dist/background/background.js -o add-on/dist/options/options.js -o add-on/dist/pages/proxy-acl/proxy-acl.js -o add-on/dist/pages/proxy-access-dialog/proxy-access-dialog.js ] -o add-on/dist/ipfs-companion-common.js -v",
-    "watch:content-scripts": "run-p watch:content-scripts:*",
-    "watch:content-scripts:ipfs-proxy": "run-p watch:content-scripts:ipfs-proxy:*",
-    "watch:content-scripts:ipfs-proxy:page": "watchify -p prundupify -t [ browserify-package-json --global ] add-on/src/contentScripts/ipfs-proxy/page.js -o add-on/dist/contentScripts/ipfs-proxy/page.js -v",
-    "watch:content-scripts:ipfs-proxy:content": "nodemon --exec \"browserify -p prundupify -t brfs -t [ browserify-package-json --global ] -s IpfsProxyContent add-on/src/contentScripts/ipfs-proxy/content.js -o add-on/dist/contentScripts/ipfs-proxy/content.js -v\" --watch add-on/src/contentScripts/ipfs-proxy/content.js --watch add-on/dist/contentScripts/ipfs-proxy/page.js",
+    "watch:js:webpack": "webpack --watch --progress -d --devtool inline-source-map",
     "test": "run-s test:*",
     "test:functional": " nyc --reporter=lcov --reporter=text mocha --timeout 15000 --require ignore-styles --reporter mocha-jenkins-reporter \"test/functional/**/*.test.js\"",
     "lint": "run-s lint:*",
-    "lint:standard": "standard -v \"add-on/src/**/*.js\" \"test/**/*.js\"",
+    "lint:standard": "standard -v \"*.js\" \"add-on/src/**/*.js\" \"test/**/*.js\"",
     "lint:web-ext": "web-ext lint",
     "fix:lint": "run-s fix:lint:*",
-    "fix:lint:standard": "standard -v --fix \"add-on/src/**/*.js\" \"test/**/*.js\"",
+    "fix:lint:standard": "standard -v --fix \"*.js\" \"add-on/src/**/*.js\" \"test/**/*.js\"",
     "precommit": "run-s lint:standard",
     "prepush": "run-s clean build lint test",
     "firefox": "web-ext run --browser-console",
@@ -65,12 +54,11 @@
   "private": true,
   "preferGlobal": false,
   "devDependencies": {
-    "brfs": "1.6.1",
-    "browserify": "16.2.2",
-    "browserify-package-json": "1.0.1",
+    "babel-core": "6.26.3",
+    "babel-loader": "7.1.4",
+    "babel-preset-env": "1.7.0",
     "chai": "4.1.2",
     "cross-env": "5.1.6",
-    "factor-bundle": "2.5.0",
     "fakefile": "0.0.9",
     "fs-promise": "2.0.3",
     "husky": "0.14.3",
@@ -79,16 +67,19 @@
     "mem-storage-area": "1.0.3",
     "mocha": "5.2.0",
     "mocha-jenkins-reporter": "0.3.12",
-    "nodemon": "1.17.5",
     "npm-run-all": "4.1.3",
     "nyc": "11.8.0",
+    "raw-loader": "0.5.1",
     "shx": "0.2.2",
+    "simple-progress-webpack-plugin": "1.1.2",
     "sinon": "5.0.10",
     "sinon-chrome": "2.3.2",
     "standard": "10.0.3",
-    "uglifyify": "5.0.0",
-    "watchify": "3.11.0",
-    "web-ext": "2.7.0"
+    "transform-loader": "0.2.4",
+    "web-ext": "2.7.0",
+    "webpack": "4.12.0",
+    "webpack-bundle-analyzer": "2.13.1",
+    "webpack-cli": "3.0.3"
   },
   "dependencies": {
     "choo": "6.11.0",
@@ -107,7 +98,6 @@
     "p-queue": "2.4.2",
     "path-browserify": "0.0.0",
     "piggybacker": "2.0.0",
-    "prundupify": "1.0.0",
     "tachyons": "4.9.1",
     "webextension-polyfill": "0.1.2"
   }

diff --git a/web-ext-config.js b/web-ext-config.js
@@ -6,10 +6,10 @@ module.exports = {
   sourceDir: 'add-on/',
   ignoreFiles: [
     'src/',
-    'manifest.*.json',
+    'manifest.*.json'
   ],
   // Command options:
   build: {
-    overwriteDest: true,
+    overwriteDest: true
   }
 }