Как минимизировать устаревшие библиотеки javascript (ES6)
У меня есть несколько устаревших библиотек JS для веб-сайта, которые я хотел бы минимизировать (и в идеале также объединить в один пакет). Однако, поскольку библиотеки используют синтаксис ES6, я не могу просто использовать uglify-js
в командной строке и minify, поскольку для этого требуется, чтобы код уже был перенесен в ES5. Мне нужно, чтобы функции библиотеки оставались доступными через глобальную переменную пока, пока я не смогу правильно перенести их на ES6, используя директивы импорта / экспорта.
Я рассмотрел два подхода:
Я попытался сначала использовать Gulp для переноса кода, однако теперь переносимый код содержит
require()
заявления для того, чтобы импортироватьjs-core
polyfills. И поэтому код пока не может работать в браузере. Не уверен, что это можно сделать дальше...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'));
}