使用 webpack 捆绑 js 库返回空对象

问题描述 投票：0回答：1

尝试在网络上使用 graphology-layout-forceatlas2。 无法在线找到可用的版本。

使用 webpack 创建包，但是当包含它时，即使有 10kb 的代码，它也会返回一个空对象。

package.json

  "name": "udm",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js', 
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'ForceAtlas2',
        libraryTarget: 'umd',
    },
    mode: 'production'
};

src/index.js

const forceAtlas2 = require('graphology-layout-forceatlas2');
window.ForceAtlas2 = forceAtlas2;

bundle.js

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ForceAtlas2=e():t.ForceAtlas2=e()}(self,(()=>(()=>{var t={435:t=>{t.exports={linLogMode:!1,outboundAttractionDistribution:!1,adjustSizes:!1,edgeWeightInfluence:1,scalingRatio:1,strongGravityMode:!1,gravity:1,slowDown:1,barnesHutOptimize:!1,barnesHutTheta:.5}},924:(t,e)=>{e.assign=function(t){t=t||{};var e,o,n,r=Array.prototype.slice.call(arguments).slice(1);for(e=0,n=r.length;e<n;e++)if(r[e])for(o in r[e])t[o]=r[e][o];return t},e.validateSettings=function(t){return"linLogMode"in t&&"boolean"!=typeof t.linLogMode?{message:"the `linLogMode` setting should be a boolean."}:"outboundAttractionDistribution"in t&&"boolean"!=typeof t.outboundAttractionDistribution?{message:"the `outboundAttractionDistribution` setting should be a boolean."}:"adjustSizes"in t&&"boolean"!=typeof t.adjustSizes?{message:"the `adjustSizes` setting should be a boolean."}:"edgeWeightInfluence"in t&&"number"!=typeof t.edgeWeightInfluence?{message:"the `edgeWeightInfluence` setting should be a number."}:!("scalingRatio"in t)||"number"==typeof t.scalingRatio&&t.scalingRatio>=0?"strongGravityMode"in t&&"boolean"!=typeof t.strongGravityMode?{message:"the `strongGravityMode` setting should be a boolean."}:!("gravity"in t)||"number"==typeof t.gravity&&t.gravity>=0?"slowDown"in t&&!("number"==typeof t.slowDown||t.slowDown>=0)?{message:"the `slowDown` setting should be a number >= 0."}:"barnesHutOptimize"in t&&"boolean"!=typeof t.barnesHutOptimize?{message:"the `barnesHutOptimize` setting should be a boolean."}:!("barnesHutTheta"in t)||"number"==typeof t.barnesHutTheta&&t.barnesHutTheta>=0?null:{message:"the `barnesHutTheta` setting should be a number >= 0."}:{message:"the `gravity` setting should be a number >= 0."}:{message:"the `scalingRatio` setting should be a number >= 0."}},e.graphToByteArrays=function(t,e){var o,n=t.order,r=t.size,i={},a=new Float32Array(10*n),s=new Float32Array(3*r);return o=0,t.forEachNode((function(t,e){i[t]=o,a[o]=e.x,a[o+1]=e.y,a[o+2]=0,a[o+3]=0,a[o+4]=0,a[o+5]=0,a[o+6]=1,a[o+7]=1,a[o+8]=e.size||1,a[o+9]=e.fixed?1:0,o+=10})),o=0,t.forEachEdge((function(t,n,r,u,f,g,l){var h=i[r],c=i[u],d=e(t,n,r,u,f,g,l);a[h+6]+=d,a[c+6]+=d,s[o]=h,s[o+1]=c,s[o+2]=d,o+=3})),{nodes:a,edges:s}},e.assignLayoutChanges=function(t,e,o){var n=0;t.updateEachNodeAttributes((function(t,r){return r.x=e[n],r.y=e[n+1],n+=10,o?o(t,r):r}))},e.readGraphPositions=function(t,e){var o=0;t.forEachNode((function(t,n){e[o]=n.x,e[o+1]=n.y,o+=10}))},e.collectLayoutChanges=function(t,e,o){for(var n=t.nodes(),r={},i=0,a=0,s=e.length;i<s;i+=10){if(o){var u=Object.assign({},t.getNodeAttributes(n[a]));u.x=e[i],u.y=e[i+1],u=o(n[a],u),r[n[a]]={x:u.x,y:u.y}}else r[n[a]]={x:e[i],y:e[i+1]};a++}return r},e.createWorker=function(t){var e=window.URL||window.webkitURL,o=t.toString(),n=e.createObjectURL(new Blob(["("+o+").call(this);"],{type:"text/javascript"})),r=new Worker(n);return e.revokeObjectURL(n),r}},697:(t,e,o)=>{var n=o(154),r=o(183).Fd,i=o(675),a=o(924),s=o(435);function u(t,e,o){if(!n(e))throw new Error("graphology-layout-forceatlas2: the given graph is not a valid graphology instance.");"number"==typeof o&&(o={iterations:o});var u=o.iterations;if("number"!=typeof u)throw new Error("graphology-layout-forceatlas2: invalid number of iterations.");if(u<=0)throw new Error("graphology-layout-forceatlas2: you should provide a positive number of iterations.");var f=r("getEdgeWeight"in o?o.getEdgeWeight:"weight").fromEntry,g="function"==typeof o.outputReducer?o.outputReducer:null,l=a.assign({},s,o.settings),h=a.validateSettings(l);if(h)throw new Error("graphology-layout-forceatlas2: "+h.message);var c,d=a.graphToByteArrays(e,f);for(c=0;c<u;c++)i(l,d.nodes,d.edges);if(!t)return a.collectLayoutChanges(e,d.nodes);a.assignLayoutChanges(e,d.nodes,g)}var f=u.bind(null,!1);f.assign=u.bind(null,!0),f.inferSettings=function(t){var e="number"==typeof t?t:t.order;return{barnesHutOptimize:e>2e3,strongGravityMode:!0,gravity:.05,scalingRatio:10,slowDown:1+Math.log(e)}},t.exports=f},675:t=>{var e=10;t.exports=function(t,o,n){var r,i,a,s,u,f,g,l,h,c,d,b,y,p,m,M,w,v,A,E,x,D,q,L=o.length,R=n.length,z=t.adjustSizes,H=t.barnesHutTheta*t.barnesHutTheta,j=[];for(a=0;a<L;a+=e)o[a+4]=o[a+2],o[a+5]=o[a+3],o[a+2]=0,o[a+3]=0;if(t.outboundAttractionDistribution){for(d=0,a=0;a<L;a+=e)d+=o[a+6];d/=L/e}if(t.barnesHutOptimize){var S,G,T,O=1/0,W=-1/0,k=1/0,F=-1/0;for(a=0;a<L;a+=e)O=Math.min(O,o[a+0]),W=Math.max(W,o[a+0]),k=Math.min(k,o[a+1]),F=Math.max(F,o[a+1]);var N=W-O,U=F-k;for(N>U?F=(k-=(N-U)/2)+N:W=(O-=(U-N)/2)+U,j[0]=-1,j[1]=(O+W)/2,j[2]=(k+F)/2,j[3]=Math.max(W-O,F-k),j[4]=-1,j[5]=-1,j[6]=0,j[7]=0,j[8]=0,r=1,a=0;a<L;a+=e)for(i=0,T=3;;){if(!(j[i+5]>=0)){if(j[i+0]<0){j[i+0]=a;break}if(j[i+5]=9*r,l=j[i+3]/2,j[(h=j[i+5])+0]=-1,j[h+1]=j[i+1]-l,j[h+2]=j[i+2]-l,j[h+3]=l,j[h+4]=h+9,j[h+5]=-1,j[h+6]=0,j[h+7]=0,j[h+8]=0,j[(h+=9)+0]=-1,j[h+1]=j[i+1]-l,j[h+2]=j[i+2]+l,j[h+3]=l,j[h+4]=h+9,j[h+5]=-1,j[h+6]=0,j[h+7]=0,j[h+8]=0,j[(h+=9)+0]=-1,j[h+1]=j[i+1]+l,j[h+2]=j[i+2]-l,j[h+3]=l,j[h+4]=h+9,j[h+5]=-1,j[h+6]=0,j[h+7]=0,j[h+8]=0,j[(h+=9)+0]=-1,j[h+1]=j[i+1]+l,j[h+2]=j[i+2]+l,j[h+3]=l,j[h+4]=j[i+4],j[h+5]=-1,j[h+6]=0,j[h+7]=0,j[h+8]=0,r+=4,S=o[j[i+0]+0]<j[i+1]?o[j[i+0]+1]<j[i+2]?j[i+5]:j[i+5]+9:o[j[i+0]+1]<j[i+2]?j[i+5]+18:j[i+5]+27,j[i+6]=o[j[i+0]+6],j[i+7]=o[j[i+0]+0],j[i+8]=o[j[i+0]+1],j[S+0]=j[i+0],j[i+0]=-1,S===(G=o[a+0]<j[i+1]?o[a+1]<j[i+2]?j[i+5]:j[i+5]+9:o[a+1]<j[i+2]?j[i+5]+18:j[i+5]+27)){if(T--){i=S;continue}T=3;break}j[G+0]=a;break}S=o[a+0]<j[i+1]?o[a+1]<j[i+2]?j[i+5]:j[i+5]+9:o[a+1]<j[i+2]?j[i+5]+18:j[i+5]+27,j[i+7]=(j[i+7]*j[i+6]+o[a+0]*o[a+6])/(j[i+6]+o[a+6]),j[i+8]=(j[i+8]*j[i+6]+o[a+1]*o[a+6])/(j[i+6]+o[a+6]),j[i+6]+=o[a+6],i=S}}if(t.barnesHutOptimize){for(b=t.scalingRatio,a=0;a<L;a+=e)for(i=0;;)if(j[i+5]>=0){if(M=Math.pow(o[a+0]-j[i+7],2)+Math.pow(o[a+1]-j[i+8],2),4*(c=j[i+3])*c/M<H){if(y=o[a+0]-j[i+7],p=o[a+1]-j[i+8],!0===z?M>0?(w=b*o[a+6]*j[i+6]/M,o[a+2]+=y*w,o[a+3]+=p*w):M<0&&(w=-b*o[a+6]*j[i+6]/Math.sqrt(M),o[a+2]+=y*w,o[a+3]+=p*w):M>0&&(w=b*o[a+6]*j[i+6]/M,o[a+2]+=y*w,o[a+3]+=p*w),(i=j[i+4])<0)break;continue}i=j[i+5]}else if((f=j[i+0])>=0&&f!==a&&(M=(y=o[a+0]-o[f+0])*y+(p=o[a+1]-o[f+1])*p,!0===z?M>0?(w=b*o[a+6]*o[f+6]/M,o[a+2]+=y*w,o[a+3]+=p*w):M<0&&(w=-b*o[a+6]*o[f+6]/Math.sqrt(M),o[a+2]+=y*w,o[a+3]+=p*w):M>0&&(w=b*o[a+6]*o[f+6]/M,o[a+2]+=y*w,o[a+3]+=p*w)),(i=j[i+4])<0)break}else for(b=t.scalingRatio,s=0;s<L;s+=e)for(u=0;u<s;u+=e)y=o[s+0]-o[u+0],p=o[s+1]-o[u+1],!0===z?(M=Math.sqrt(y*y+p*p)-o[s+8]-o[u+8])>0?(w=b*o[s+6]*o[u+6]/M/M,o[s+2]+=y*w,o[s+3]+=p*w,o[u+2]-=y*w,o[u+3]-=p*w):M<0&&(w=100*b*o[s+6]*o[u+6],o[s+2]+=y*w,o[s+3]+=p*w,o[u+2]-=y*w,o[u+3]-=p*w):(M=Math.sqrt(y*y+p*p))>0&&(w=b*o[s+6]*o[u+6]/M/M,o[s+2]+=y*w,o[s+3]+=p*w,o[u+2]-=y*w,o[u+3]-=p*w);for(h=t.gravity/t.scalingRatio,b=t.scalingRatio,a=0;a<L;a+=e)w=0,y=o[a+0],p=o[a+1],M=Math.sqrt(Math.pow(y,2)+Math.pow(p,2)),t.strongGravityMode?M>0&&(w=b*o[a+6]*h):M>0&&(w=b*o[a+6]*h/M),o[a+2]-=y*w,o[a+3]-=p*w;for(b=1*(t.outboundAttractionDistribution?d:1),g=0;g<R;g+=3)s=n[g+0],u=n[g+1],l=n[g+2],m=Math.pow(l,t.edgeWeightInfluence),y=o[s+0]-o[u+0],p=o[s+1]-o[u+1],!0===z?(M=Math.sqrt(y*y+p*p)-o[s+8]-o[u+8],t.linLogMode?t.outboundAttractionDistribution?M>0&&(w=-b*m*Math.log(1+M)/M/o[s+6]):M>0&&(w=-b*m*Math.log(1+M)/M):t.outboundAttractionDistribution?M>0&&(w=-b*m/o[s+6]):M>0&&(w=-b*m)):(M=Math.sqrt(Math.pow(y,2)+Math.pow(p,2)),t.linLogMode?t.outboundAttractionDistribution?M>0&&(w=-b*m*Math.log(1+M)/M/o[s+6]):M>0&&(w=-b*m*Math.log(1+M)/M):t.outboundAttractionDistribution?(M=1,w=-b*m/o[s+6]):(M=1,w=-b*m)),M>0&&(o[s+2]+=y*w,o[s+3]+=p*w,o[u+2]-=y*w,o[u+3]-=p*w);if(!0===z)for(a=0;a<L;a+=e)1!==o[a+9]&&((v=Math.sqrt(Math.pow(o[a+2],2)+Math.pow(o[a+3],2)))>10&&(o[a+2]=10*o[a+2]/v,o[a+3]=10*o[a+3]/v),A=o[a+6]*Math.sqrt((o[a+4]-o[a+2])*(o[a+4]-o[a+2])+(o[a+5]-o[a+3])*(o[a+5]-o[a+3])),E=Math.sqrt((o[a+4]+o[a+2])*(o[a+4]+o[a+2])+(o[a+5]+o[a+3])*(o[a+5]+o[a+3]))/2,x=.1*Math.log(1+E)/(1+Math.sqrt(A)),D=o[a+0]+o[a+2]*(x/t.slowDown),o[a+0]=D,q=o[a+1]+o[a+3]*(x/t.slowDown),o[a+1]=q);else for(a=0;a<L;a+=e)1!==o[a+9]&&(A=o[a+6]*Math.sqrt((o[a+4]-o[a+2])*(o[a+4]-o[a+2])+(o[a+5]-o[a+3])*(o[a+5]-o[a+3])),E=Math.sqrt((o[a+4]+o[a+2])*(o[a+4]+o[a+2])+(o[a+5]+o[a+3])*(o[a+5]+o[a+3]))/2,x=o[a+7]*Math.log(1+E)/(1+Math.sqrt(A)),o[a+7]=Math.min(1,Math.sqrt(x*(Math.pow(o[a+2],2)+Math.pow(o[a+3],2))/(1+Math.sqrt(A)))),D=o[a+0]+o[a+2]*(x/t.slowDown),o[a+0]=D,q=o[a+1]+o[a+3]*(x/t.slowDown),o[a+1]=q);return{}}},183:(t,e)=>{function o(t){return"number"!=typeof t||isNaN(t)?1:t}e.Fd=function(t){return function(t,e){var o={},n=function(t){return void 0===t?e:t};"function"==typeof e&&(n=e);var r=function(e){return n(e[t])},i=function(){return n(void 0)};return"string"==typeof t?(o.fromAttributes=r,o.fromGraph=function(t,e){return r(t.getEdgeAttributes(e))},o.fromEntry=function(t,e){return r(e)},o.fromPartialEntry=o.fromEntry,o.fromMinimalEntry=o.fromEntry):"function"==typeof t?(o.fromAttributes=function(){throw new Error("graphology-utils/getters/createEdgeValueGetter: irrelevant usage.")},o.fromGraph=function(e,o){var r=e.extremities(o);return n(t(o,e.getEdgeAttributes(o),r[0],r[1],e.getNodeAttributes(r[0]),e.getNodeAttributes(r[1]),e.isUndirected(o)))},o.fromEntry=function(e,o,r,i,a,s,u){return n(t(e,o,r,i,a,s,u))},o.fromPartialEntry=function(e,o,r,i){return n(t(e,o,r,i))},o.fromMinimalEntry=function(e,o){return n(t(e,o))}):(o.fromAttributes=i,o.fromGraph=i,o.fromEntry=i,o.fromMinimalEntry=i),o}(t,o)}},154:t=>{t.exports=function(t){return null!==t&&"object"==typeof t&&"function"==typeof t.addUndirectedEdgeWithKey&&"function"==typeof t.dropNode&&"boolean"==typeof t.multi}}},e={};const o=function o(n){var r=e[n];if(void 0!==r)return r.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,o),i.exports}(697);return window.ForceAtlas2={assign:o.assign,inferSettings:o.inferSettings,DEFAULTS:o.DEFAULTS},{}})()));```
javascript web webpack
1个回答
0
投票

您遇到的问题源于 Webpack 捆绑和导出 

graphology-layout-forceatlas2
包的方式。 Webpack 设置中的 
library
配置指定导出的模块应以 UMD 格式分配给 
ForceAtlas2
，但包本身可能无法正确配置或不兼容以这种方式直接在浏览器中使用。

要解决此问题，请直接使用该库作为 ES 模块或 CommonJS 模块，而不是依赖 Webpack 捆绑。首先，通过直接将包导入到 Node.js 环境中来验证该包是否可以在没有 Webpack 的情况下正常工作，以确保其正确安装并正常运行。如果有效，您可以使用 Rollup 之类的捆绑器或调整 Webpack 配置以确保兼容性。具体来说，将 

libraryTarget
设置为 
window
或调整库附加到全局范围的方式。

或者，如果您打算在浏览器中使用它而不捆绑，请考虑使用像 browserify 这样的工具将模块捆绑为与浏览器兼容的格式，或加载预编译的 UMD 版本（如果由库提供）。如果 

graphology-layout-forceatlas2
没有浏览器就绪版本，您可能需要分叉该包并对其进行调整以供浏览器使用，或者考虑设计一个考虑到浏览器兼容性的不同图形布局库。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.