Merge pull request #562 from ustwo/bug/fix-compilation

fix: refactor compilation to make sure we’re handling dev / prod modes right.
ustwo · Jun 5, 2017 · e544eb7 · e544eb7
2 parents 691eb1b + 189a1e4
commit e544eb7
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 48 deletions.
diff --git a/Dockerfile.app b/Dockerfile.app
@@ -1,6 +1,7 @@
 FROM node:6.9.1-slim
 MAINTAINER Arnau Siches <arnau@ustwo.com>
 
+ENV NODE_ENV production
 ENV NODE_PATH /home/ustwo/src
 
 WORKDIR /home/ustwo

diff --git a/package.compiler.json b/package.compiler.json
@@ -19,14 +19,16 @@
     "autoprefixer": "6.0.3",
     "babel": "5.8.21",
     "babelify": "6.3.0",
-    "browserify": "11.2.0",
+    "browserify": "14.4.0",
     "browsernizr": "1.1.0",
+    "bundle-collapser": "1.2.1",
     "classnames": "2.1.5",
     "chai": "3.5.0",
     "chai-as-promised": "6.0.0",
     "consolidate": "0.13.1",
     "cssnano": "3.10.0",
     "ellipsize": "0.0.2",
+    "envify": "4.0.0",
     "es6-promise": "3.0.2",
     "postcss": "5.0.8",
     "postcss-cli": "2.1.0",
@@ -56,7 +58,8 @@
     "sinon-chai": "2.8.0",
     "svg4everybody": "1.0.0",
     "urllite": "0.5.0",
-    "uglify-js": "2.4.24",
+    "uglify-es": "3.0.15",
+    "uglifyify": "3.0.4",
     "wd": "1.1.1"
   }
 }
diff --git a/src/app/adaptors/client/env.js b/src/app/adaptors/client/env.js
@@ -6,5 +6,5 @@ import 'browsernizr/test/css/backgroundcliptext';
 
 export default {
   Modernizr: require('browsernizr'),
-  verbose: true
+  verbose: process.env.NODE_ENV === 'development'
 };
diff --git a/src/scripts/spa.sh b/src/scripts/spa.sh
@@ -1,17 +1,11 @@
 #!/bin/bash
 set -e
 
-echo "Compiling the SPA..."
-
 base="/home/ustwo"
 input="$base/src/app/index.js"
 filename="$base/public/js/app.js"
 aliases="$base/src/app/aliases.json"
 
-if [[ "$VERBOSE" == "true" ]]; then
-  browserify_verbose="--debug"
-fi
-
 mkdir -p $base/public/js
 
 if [[ $FLUSH_CACHE == "true" ]]; then
@@ -20,29 +14,51 @@ if [[ $FLUSH_CACHE == "true" ]]; then
   fi
 fi
 
-persistify $input \
-           $browserify_verbose \
-           --transform [babelify --stage 0] \
-           --transform [aliasify --require $aliases] \
-           --external babelify/polyfill \
-           --external react \
-           --external react-dom \
-           --external react-addons-test-utils \
-           --external svg4everybody \
-           --external classnames \
-           --external ellipsize \
-           --external es6-promise \
-           --external moment \
-           --external scrollmagic \
-           --external react-responsive \
-           --external react-swipe \
-           --verbose \
-           --cache-dir $base/public/.cache-spa \
-           --outfile $filename
-
+if [[ "$VERBOSE" == "true" ]]; then
+  echo "Compiling the SPA in development mode..."
+  NODE_ENV=development persistify $input \
+             -g [ envify --NODE_ENV development ] \
+             --debug \
+             --transform [babelify --stage 0] \
+             --transform [aliasify --require $aliases] \
+             --external babelify/polyfill \
+             --external react \
+             --external react-dom \
+             --external react-addons-test-utils \
+             --external svg4everybody \
+             --external classnames \
+             --external ellipsize \
+             --external es6-promise \
+             --external moment \
+             --external scrollmagic \
+             --external react-responsive \
+             --external react-swipe \
+             --verbose \
+             --cache-dir $base/public/.cache-spa \
+             --outfile $filename
+fi
 
 if [[ -z "$VERBOSE" ]]; then
-  uglifyjs --mangle --comments --stats -o $filename -- $filename
+  echo "Compiling the SPA in production mode..."
+  NODE_ENV=production browserify $input \
+             -g [ envify --NODE_ENV production ] \
+             --transform [babelify --stage 0] \
+             --transform [aliasify --require $aliases] \
+             --external babelify/polyfill \
+             --external react \
+             --external react-dom \
+             --external react-addons-test-utils \
+             --external svg4everybody \
+             --external classnames \
+             --external ellipsize \
+             --external es6-promise \
+             --external moment \
+             --external scrollmagic \
+             --external react-responsive \
+             --external react-swipe \
+             -g uglifyify \
+             -p bundle-collapser/plugin \
+  | uglifyjs --compress --mangle --comments --warn > $filename
 fi
 
 echo "Done with the SPA"
diff --git a/src/scripts/vendors.sh b/src/scripts/vendors.sh
@@ -1,8 +1,6 @@
 #!/bin/bash
 set -e
 
-echo "Compiling the SPA vendors..."
-
 base="/home/ustwo"
 filename="$base/public/js/vendors.js"
 
@@ -14,24 +12,45 @@ if [[ $FLUSH_CACHE == "true" ]]; then
   fi
 fi
 
-persistify --require babelify/polyfill \
-           --require react \
-           --require react-dom \
-           --require react-addons-test-utils \
-           --require svg4everybody \
-           --require classnames \
-           --require ellipsize \
-           --require es6-promise \
-           --require moment \
-           --require scrollmagic \
-           --require react-responsive \
-           --require react-swipe \
-           --verbose \
-           --cache-dir $base/public/.cache-vendors \
-           --outfile $filename
+if [[ "$VERBOSE" == "true" ]]; then
+  echo "Compiling the SPA vendors in development mode..."
+  NODE_ENV=development persistify -g [ envify --NODE_ENV development ] \
+             --debug \
+             --require babelify/polyfill \
+             --require react \
+             --require react-dom \
+             --require react-addons-test-utils \
+             --require svg4everybody \
+             --require classnames \
+             --require ellipsize \
+             --require es6-promise \
+             --require moment \
+             --require scrollmagic \
+             --require react-responsive \
+             --require react-swipe \
+             --verbose \
+             --cache-dir $base/public/.cache-vendors \
+             --outfile $filename
+fi
 
 if [[ -z "$VERBOSE" ]]; then
-  uglifyjs --mangle --comments --stats -o $filename -- $filename
+  echo "Compiling the SPA vendors in production mode..."
+  NODE_ENV=production browserify -g [ envify --NODE_ENV production ] \
+             --require babelify/polyfill \
+             --require react \
+             --require react-dom \
+             --require react-addons-test-utils \
+             --require svg4everybody \
+             --require classnames \
+             --require ellipsize \
+             --require es6-promise \
+             --require moment \
+             --require scrollmagic \
+             --require react-responsive \
+             --require react-swipe \
+             -g uglifyify \
+             -p bundle-collapser/plugin \
+  | uglifyjs --compress --mangle --comments > $filename
 fi
 
 echo "Done with the SPA vendors"