Question

我有一个网站要遗留的几个旧版JS库（理想情况下还可以捆绑成一个捆绑包）。但是，由于这些库使用ES6语法，所以我不能简单地在命令行上使用uglify-js并缩小它们，因为它要求代码已经被编译为ES5。我现在需要库函数保持可通过全局变量访问，直到可以使用导入/导出指令将它们正确移植到ES6为止。

我研究了两种方法：

我尝试先使用Gulp来编译代码，但是现在，已编译的代码包含require()条语句，以便导入js-core填充。因此，代码尚无法在浏览器中运行。 不确定是否可以进一步进行...
Webpack可以进行翻译和最小化，但似乎Webpack要求在JS代码中使用import / export指令才能加载和最小化它们（请注意，可以使用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'));
}

如何缩小旧版JavaScript库（ES6）

0 个答案: