client/build: transpile ES6 for older browsers

client/.babelrc

@@ -0,0 +1 @@
+{ "presets": ["es2015"] }

client/build.js

@@ -102,11 +102,16 @@ function bundleCss() {
 }
 
 function bundleJs(config) {
+    const babelify = require('babelify');
     const browserify = require('browserify');
     const uglifyjs = require('uglify-js');
     glob('./js/**/*.js', {}, function(er, files) {
         const outputFile = fs.createWriteStream('./public/bundle.min.js');
-        browserify({debug: config.debug}).add(files).bundle().pipe(outputFile);
+        let b = browserify({debug: config.debug});
+        if (config.transpile) {
+            b = b.transform(babelify);
+        }
+        b.add(files).bundle().pipe(outputFile);
         outputFile.on('finish', function() {
             if (!config.debug) {
                 const result = uglifyjs.minify('./public/bundle.min.js');

client/js/util/polyfill.js

@@ -1,5 +1,7 @@
 'use strict';
 
+require('babel-polyfill');
+
 const keys = Reflect.ownKeys;
 const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
 const concat = Function.bind.call(Function.call, Array.prototype.concat);

client/package.json

@@ -6,6 +6,9 @@
     "watch": "watch 'npm run build' html js css img --wait=0 --ignoreDotFiles"
   },
   "dependencies": {
+    "babel-polyfill": "^6.7.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babelify": "^7.2.0",
     "browserify": "^13.0.0",
     "camelcase": "^2.1.1",
     "csso": "^1.8.0",

config.yaml.dist

@@ -2,7 +2,8 @@
 # and override only what you need.
 
 name: szurubooru
-debug: 0
+debug: 0 # generate source maps for JS debugging?
+transpile: 1 # generate bigger JS to support older browsers?
 secret: change
 api_url: # where frontend connects to, example: http://api.example.com/
 base_url: # used to form links to frontend, example: http://example.com/