Как минимизировать устаревшие библиотеки javascript (ES6) - PullRequest
Новая
       55

Как минимизировать устаревшие библиотеки javascript (ES6)

0 голосов
/ 05 февраля 2019

У меня есть несколько устаревших библиотек JS для веб-сайта, которые я хотел бы минимизировать (и в идеале также объединить в один пакет).Однако, поскольку библиотеки используют синтаксис ES6, я не могу просто использовать uglify-js в командной строке и минимизировать, поскольку для этого требуется, чтобы код уже был перенесен в ES5.Мне нужно, чтобы функции библиотеки оставались доступными через глобальную переменную пока, пока я не смогу правильно перенести их на ES6 с помощью директив импорта / экспорта.

Я рассмотрел два подхода:

  1. Я пытался сначала использовать Gulp для переноса кода, однако теперь переносимый код содержит операторы require(), чтобы импортировать полифилы js-core.И поэтому код пока не может работать в браузере. Не уверен, что это можно сделать дальше ...

  2. Webpack может переноситься и минимизироваться, но, похоже, Webpack требует использования директив импорта / экспорта в коде JSдля их загрузки и минимизации (обратите внимание, что можно использовать script-loader, однако файлы затем просто включаются и оцениваются как единое целое, но не минимизируются).

Оптимальным решением, очевидно, является перенос старого кода на использование Webpack.Но на данный момент это слишком много усилий.

Итак, есть ли способ, с помощью которого я могу легко минимизировать файлы, которые у меня есть, без портирования устаревшего кода для использования импорта / экспорта?

Предположим, у меня есть две библиотеки mylib1.js и mylib2 js.Они зависят от использования jQuery, Lodash и других библиотек, доступ к которым осуществляется через глобальные переменные $, _ и т. Д. mylib2.js зависит от функций из mylib1.js.В настоящее время библиотеки загружаются в правильной последовательности, и все функции доступны через одну глобальную переменную: например, MyLib1.doSomething () и MyLib2.doSomething2 ().

Файл 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);
}

Полученный уменьшенный и предварительно подтвержденный файл (с использованием Gulp, как описано в 1. выше): 

'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);
  });

Пример 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'));
}
...