如题,我目前是打算把我的vue2项目打包成lib然后通过script标签引入后,通过window使用项目中的组件,但是我使用terser压缩后的产物(umd.min.js)可以正常使用,使用esbuldPlugin压缩就会报404错误,target为es2015和es5的情况我也都试过了,都不行,有没有大佬知道是怎么回事?
我构建了一个最简单的lib,使用terser和esbuild压缩后的产物分别如下:
terser:
!(function(e, t) {
'object' == typeof exports && 'object' == typeof module
? (module.exports = t())
: 'function' == typeof define && define.amd
? define([], t)
: 'object' == typeof exports
? (exports.nms = t())
: (e.nms = t());
})(window, function() {
return (function(e) {
var t = {};
function n(o) {
if (t[o]) return t[o].exports;
var r = (t[o] = { i: o, l: !1, exports: {} });
return e[o].call(r.exports, r, r.exports, n), (r.l = !0), r.exports;
}
return (
(n.m = e),
(n.c = t),
(n.d = function(e, t, o) {
n.o(e, t) ||
Object.defineProperty(e, t, { enumerable: !0, get: o });
}),
(n.r = function(e) {
'undefined' != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, {
value: 'Module',
}),
Object.defineProperty(e, '__esModule', { value: !0 });
}),
(n.t = function(e, t) {
if ((1 & t && (e = n(e)), 8 & t)) return e;
if (4 & t && 'object' == typeof e && e && e.__esModule)
return e;
var o = Object.create(null);
if (
(n.r(o),
Object.defineProperty(o, 'default', {
enumerable: !0,
value: e,
}),
2 & t && 'string' != typeof e)
)
for (var r in e)
n.d(
o,
r,
function(t) {
return e[t];
}.bind(null, r)
);
return o;
}),
(n.n = function(e) {
var t =
e && e.__esModule
? function() {
return e.default;
}
: function() {
return e;
};
return n.d(t, 'a', t), t;
}),
(n.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t);
}),
(n.p = ''),
n((n.s = 2))
);
})([
function(e, t, n) {},
function(e, t, n) {
'use strict';
n(0);
},
function(e, t, n) {
'use strict';
n.r(t);
var o = function() {
var e = this,
t = e.$createElement;
e._self._c;
return e._m(0);
};
o._withStripped = !0;
var r = {};
n(1);
var i = (function(e, t, n, o, r, i, u, s) {
var c,
f = 'function' == typeof e ? e.options : e;
if (
(t &&
((f.render = t),
(f.staticRenderFns = n),
(f._compiled = !0)),
o && (f.functional = !0),
i && (f._scopeId = 'data-v-' + i),
u
? ((c = function(e) {
(e =
e ||
(this.$vnode && this.$vnode.ssrContext) ||
(this.parent &&
this.parent.$vnode &&
this.parent.$vnode.ssrContext)) ||
'undefined' == typeof __VUE_SSR_CONTEXT__ ||
(e = __VUE_SSR_CONTEXT__),
r && r.call(this, e),
e &&
e._registeredComponents &&
e._registeredComponents.add(u);
}),
(f._ssrRegister = c))
: r &&
(c = s
? function() {
r.call(
this,
(f.functional ? this.parent : this)
.$root.$options.shadowRoot
);
}
: r),
c)
)
if (f.functional) {
f._injectStyles = c;
var l = f.render;
f.render = function(e, t) {
return c.call(t), l(e, t);
};
} else {
var a = f.beforeCreate;
f.beforeCreate = a ? [].concat(a, c) : [c];
}
return { exports: e, options: f };
})(
r,
o,
[
function() {
var e = this,
t = e.$createElement,
n = e._self._c || t;
return n('div', { staticClass: 'hello' }, [
n('p', [
e._v(
'\n For a guide and recipes on how to configure / customize this project,'
),
n('br'),
e._v('\n check out the\n '),
]),
]);
},
],
!1,
null,
'469af010',
null
);
i.options.__file = 'src/components/HelloWorld.vue';
i.exports, (t.default = { HelloWorld: void 0 });
},
]);
});
esbuild:
(function() {
var E = function(l, o) {
return function() {
return o || l((o = { exports: {} }).exports, o), o.exports;
};
};
var x = E(function(p, v) {
(function(o, _) {
typeof p == 'object' && typeof v == 'object'
? (v.exports = _())
: typeof define == 'function' && define.amd
? define([], _)
: typeof p == 'object'
? (p.nms = _())
: (o.nms = _());
})(window, function() {
return (function(l) {
var o = {};
function _(e) {
if (o[e]) return o[e].exports;
var n = (o[e] = { i: e, l: !1, exports: {} });
return (
l[e].call(n.exports, n, n.exports, _),
(n.l = !0),
n.exports
);
}
return (
(_.m = l),
(_.c = o),
(_.d = function(e, n, s) {
_.o(e, n) ||
Object.defineProperty(e, n, {
enumerable: !0,
get: s,
});
}),
(_.r = function(e) {
typeof Symbol != 'undefined' &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, {
value: 'Module',
}),
Object.defineProperty(e, '__esModule', {
value: !0,
});
}),
(_.t = function(e, n) {
if (
(n & 1 && (e = _(e)),
n & 8 ||
(n & 4 &&
typeof e == 'object' &&
e &&
e.__esModule))
)
return e;
var s = Object.create(null);
if (
(_.r(s),
Object.defineProperty(s, 'default', {
enumerable: !0,
value: e,
}),
n & 2 && typeof e != 'string')
)
for (var c in e)
_.d(
s,
c,
function(m) {
return e[m];
}.bind(null, c)
);
return s;
}),
(_.n = function(e) {
var n =
e && e.__esModule
? function() {
return e.default;
}
: function() {
return e;
};
return _.d(n, 'a', n), n;
}),
(_.o = function(e, n) {
return Object.prototype.hasOwnProperty.call(e, n);
}),
(_.p = ''),
_((_.s = 2))
);
})([
function(l, o, _) {},
function(l, o, _) {
'use strict';
var e = _(0),
n = _.n(e);
},
function(l, o, _) {
'use strict';
_.r(o);
var e = function() {
var r = this,
u = r.$createElement,
a = r._self._c || u;
return r._m(0);
},
n = [
function() {
var r = this,
u = r.$createElement,
a = r._self._c || u;
return a('div', { staticClass: 'hello' }, [
a('p', [
r._v(
'\n For a guide and recipes on how to configure / customize this project,'
),
a('br'),
r._v('\n check out the\n '),
]),
]);
},
];
e._withStripped = !0;
var s = {},
c = s,
m = _(1);
function O(r, u, a, C, f, j, b, M) {
var t = typeof r == 'function' ? r.options : r;
u &&
((t.render = u),
(t.staticRenderFns = a),
(t._compiled = !0)),
C && (t.functional = !0),
j && (t._scopeId = 'data-v-' + j);
var d;
if (
(b
? ((d = function(i) {
(i =
i ||
(this.$vnode &&
this.$vnode.ssrContext) ||
(this.parent &&
this.parent.$vnode &&
this.parent.$vnode.ssrContext)),
!i &&
typeof __VUE_SSR_CONTEXT__ !=
'undefined' &&
(i = __VUE_SSR_CONTEXT__),
f && f.call(this, i),
i &&
i._registeredComponents &&
i._registeredComponents.add(b);
}),
(t._ssrRegister = d))
: f &&
(d = M
? function() {
f.call(
this,
(t.functional
? this.parent
: this
).$root.$options.shadowRoot
);
}
: f),
d)
)
if (t.functional) {
t._injectStyles = d;
var P = t.render;
t.render = function(W, g) {
return d.call(g), P(W, g);
};
} else {
var y = t.beforeCreate;
t.beforeCreate = y ? [].concat(y, d) : [d];
}
return { exports: r, options: t };
}
var h = O(c, e, n, !1, null, '469af010', null);
if (!1) var H;
h.options.__file = 'src/components/HelloWorld.vue';
var R = h.exports,
S = (o.default = { HelloWorld: void 0 });
},
]);
});
});
x();
})();
404 是目标不存在,猜测是你配置的路径不对。