webpack 导出的 umd 模块在传未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】入了 output.library 的情【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】况下,会输出四个条件语句,大概如下:
原创内容,盗版必究。【原创不易,请尊重版权】【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("a"), require("b"));
else if(typeof define === 'function' && define.amd)
define(["a", "b"], factory);
else if(typeof exports === 'object')
exports["o"] = factory(require("a"), require("b"));
else
root["o"] = factory(root["a"], root["b"]);
这样的 umd 模式。其中,关于依赖、导【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。出接口名都可以定制,其中依赖部分通过 e转载请注明出处:www.tangshuang.net【本文受版权保护】xternals 配置来定制,导出接口名未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。通过 library 来定制。
【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【本文受版权保护】但是,现在的一个情况是,在第三个条件句,未经授权,禁止复制转载。【原创内容,转载请注明出处】即红色部分,这个部分会在标准的 comm【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。onjs 中被引用。所谓标准的 comm【本文受版权保护】本文作者:唐霜,转载请注明出处。onjs 是由 commonjs 官方定原创内容,盗版必究。未经授权,禁止复制转载。义的,只有 exports 和 requ著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ire 两个关键字的模块方案。而 nod【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】ejs 虽然遵循 commonjs,但是本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。在其基础上实现了 module 关键字,本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。将 exports 作为 module.原创内容,盗版必究。【原创不易,请尊重版权】exports 的引用,因此被成为 co【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。mmonjs2。
【版权所有,侵权必究】【本文首发于唐霜的博客】【本文受版权保护】【未经授权禁止转载】未经授权,禁止复制转载。我们现在去看这个部分,倘若一个模块在遵循转载请注明出处:www.tangshuang.net【版权所有,侵权必究】标准 commonjs 的情况下,导出如【版权所有,侵权必究】【本文受版权保护】下:
著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【作者:唐霜】本文版权归作者所有,未经授权不得转载。// a.js
exports.a = function a() {}
// b.js
exports.b = function b() {}
// main.js
export.a = require('./a.js')
export.b = require('./b.js')
外部使用这个包,实际上应该是:【关注微信公众号:wwwtangshuangnet】
【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。【本文首发于唐霜的博客】const { a, b } = require('./main.js')
但是在 webpack 的 umd 模块转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net下使用时变成了:
未经授权,禁止复制转载。【作者:唐霜】【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】// bundle.js exports.o = factory()
那么在外面的其他程序去用这个包时就需要变转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。成下面这种方式才可以:
本文版权归作者所有,未经授权不得转载。【转载请注明来源】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netconst { o } = require('./bundle.js')
const { a, b } = o
这显然不符合我们的期望,我们希望即使 w【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。ebpack 打包之后,仍然保持原有的使【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】用方式。所以,我写了一个方法来修改这个部【原创内容,转载请注明出处】【版权所有,侵权必究】分的输出,经过处理之后,webpack 未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。这个部分的输出将会是:
【作者:唐霜】【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netelse if(typeof exports === 'object')
{ var a = factory(require("a"), require("b")); for (var i in a) exports[i] = a[i]; }
即替换掉原来的输出形式,将原本的输出接口【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】直接赋值到 exports 上,这样就保转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。持了原本的逻辑。
原创内容,盗版必究。【原创内容,转载请注明出处】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【转载请注明来源】具体做法如下:本文版权归作者所有,未经授权不得转载。
【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net// webpack.config.js
const { bufferify } = require('webpack-bufferify')
const plugins = [
bufferify(function(content, file, assets, compilation, compiler) {
if (file.split('.').pop() !== 'js') {
return
}
const { optimization } = compiler.options
content = content.toString()
content = optimization.minimize === true
? content.replace(/exports\[.*?\]=(.*?):/, `function(e,a){for(var i in a)e[i]=a[i]}(exports,$1):`)
: content.replace(/exports\[.*?\](.*?);/, `{ var a$1; for (var i in a) exports[i] = a[i]; }`)
return content
}),
]
module.exports = {
...,
plugins,
}
webpack-bufferify 是我著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。写的一个组件,用以替换 webpack 本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。输出的结果内容。通过上面的处理,就可以实【未经授权禁止转载】本文作者:唐霜,转载请注明出处。现我们的目的。
著作权归作者所有,禁止商业用途转载。【本文受版权保护】【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。【原创内容,转载请注明出处】
