0

I have several legacy JS libraries for a website that I would like to minify (and ideally also concatenate into one bundle). However, since the libraries use ES6 syntax I cannot simply use uglify-js on command line and minify since it requires the code to already be transpiled to ES5. I need the library functions to remain accessible via global var for now until I can properly port them to ES6 using import/export directives.

I've looked into two approaches:

  1. I've tried to use Gulp to transpile the code first, however the transpiled code now contains require() statements in order to import the js-core polyfills. And consequently the code cannot run in the browser yet. Not sure if it is possible to take this further...

  2. Webpack can transpile and minify but it seems Webpack requires use of import/export directives in JS code in order to load and minify them (note one can use script-loader however the files is then simply included and evaluated as a whole but not minified).

The optimal solution is obviously to port the legacy code to use Webpack. But this is too much effort for the time being.

So, is there any way I can easily minify the files I have without porting the legacy code to use imports/exports?

Lets assume that I have two libraries mylib1.js and mylib2 js. They depend on using jQuery, Lodash and other libraries which are accessed via globals $, _ etc. mylib2.js depends on functions from mylib1.js. Currently the libraries are loaded in proper sequence and all functions are accessed via single global variable: e.g. MyLib1.doSomething() and MyLib2.doSomething2().

File MyLib1.js:

// Declare library
var MyLib1 = {};

MyLib1.someGlobalConstant1 = 123;
MyLib1.someGlobalConstant2 = 456;

function concatData(x, y){
  return "Concatenated:" + x + "_" + y;
}

// Declare library function
MyLib1.doSomething = () => {
  let b; 
  let c = { x: 1, y: 2 };

  function joinData(x){
        return { ...c, h: 9 };
  }

  return joinData(d);
}

MyLib1.doSomething2 = (x, y) => {
  return concatData(x, y);
}

The resulting minified & prettified file (using Gulp, as explained in 1. above):

'use strict';
function _objectSpread(t) {
  for (var e = 1; e < arguments.length; e++) {
    var r = null != arguments[e] ? arguments[e] : {},
      o = Object.keys(r);
    'function' == typeof Object.getOwnPropertySymbols &&
      (o = o.concat(
        Object.getOwnPropertySymbols(r).filter(function(e) {
          return Object.getOwnPropertyDescriptor(r, e).enumerable;
        })
      )),
      o.forEach(function(e) {
        _defineProperty(t, e, r[e]);
      });
  }
  return t;
}
function _defineProperty(e, t, r) {
  return (
    t in e
      ? Object.defineProperty(e, t, {
          value: r,
          enumerable: !0,
          configurable: !0,
          writable: !0
        })
      : (e[t] = r),
    e
  );
}
require('core-js/modules/web.dom.iterable'),
  require('core-js/modules/es6.array.iterator'),
  require('core-js/modules/es6.object.keys');
var MyLib1 = {};
function concatData(e, t) {
  return 'Concatenated:' + e + '_' + t;
}
(MyLib1.someGlobalConstant1 = 123),
  (MyLib1.someGlobalConstant2 = 456),
  (MyLib1.someGlobalConstant3 = 789),
  (MyLib1.doSomething = function() {
    return d, _objectSpread({}, { x: 1, y: 2 }, { h: 9 });
  }),
  (MyLib1.doSomething2 = function(e, t) {
    return concatData(e, t);
  });

Example gulpfile.js:

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const prettier = require('gulp-prettier');

exports.default = function() {

  return src('src/js/*.js')
    .pipe(babel())
    .pipe(dest('dist-transpiled'))
    .pipe(uglify({warnings: true}))
    .pipe(prettier({ singleQuote: true }))    
    .pipe(dest('dist/js'));
}
kashiraja
  • 632
  • 11
  • 17
  • Can you use https://www.npmjs.com/package/uglify-es ? It is made for es6+. – Mark Feb 04 '19 at 23:40
  • Thanks @Mark! Yeah that works, except I have to use terser.js (https://www.npmjs.com/package/terser) instead which is a fork of uglify-js (which no longer is maintained). – kashiraja Feb 05 '19 at 00:16

0 Answers0