如何使用 ECMAScript 6 模块导入 PlotlyJS

Posted 2023-02-18

【中文标题】如何使用 ECMAScript 6 模块导入 PlotlyJS

【英文标题】：How to import PlotlyJS with ECMAScript 6 modules

【发布时间】：2019-07-24 17:34:42

【问题描述】：

我正在尝试使用这样的 ES6 模块实现 PlotlyJS (last version)：

index.html

<script src="main.js" type="module"></script>

main.js

import * as Plotly from './plotly.js';

但是我有这个错误“Uncaught TypeError: Cannot read property 'document' of undefined at plotly.js”

plotly.js:21576 Uncaught TypeError: Cannot read property 'document' of undefined
at plotly.js:21576
at Object.151 (plotly.js:31122)
at o (plotly.js:7)
at plotly.js:7
at Object.699.../constants/numerical (plotly.js:102912)
at o (plotly.js:7)
at plotly.js:7
at Object.1.../src/lib (plotly.js:10)
at o (plotly.js:7)
at plotly.js:7

我认为问题出在图书馆。有什么想法吗？

Line of error code in plotly.js

【问题讨论】：

你能解决这个问题吗？在过去的两天里，我也面临同样的问题并为此苦苦挣扎..

【参考方案1】：

这是一个错误Native ES6 modules vs. the bundle

你要等待plotly.js 2.0版本或者根据开启者修复它

我通过从 (); 更改第 27724 行来修复它到 .apply(self);但这只是一个 hack :)

当然，确切的线是一个移动的目标，具体取决于您使用的情节发布。

【参考方案2】：

如果有人想在 node_module 中实施更改并使用更激进的方法，请利用 patch-package 实用程序。

在 package.json 脚本中，可以使用以下命令来修补 node_modules

"postinstall": "./node_modules/.bin/patch-package"

plotly 1.58.4 的补丁

diff --git a/node_modules/plotly.js/dist/plotly-with-meta.js b/node_modules/plotly.js/dist/plotly-with-meta.js
index 1aaac5a..cb3ecfe 100644
--- a/node_modules/plotly.js/dist/plotly-with-meta.js
+++ b/node_modules/plotly.js/dist/plotly-with-meta.js
@@ -35864,7 +35864,7 @@ Object.defineProperty(exports, '__esModule',  value: true );
     return request.responseXML;
   );
   if (typeof define === "function" && define.amd) this.d3 = d3, define(d3); else if (typeof module === "object" && module.exports) module.exports = d3; else this.d3 = d3;
-();
+.apply(self);
 ,],170:[function(_dereq_,module,exports)
 module.exports = function () 
     for (var i = 0; i < arguments.length; i++) 
diff --git a/node_modules/plotly.js/dist/plotly.js b/node_modules/plotly.js/dist/plotly.js
index 365230c..6268511 100644
--- a/node_modules/plotly.js/dist/plotly.js
+++ b/node_modules/plotly.js/dist/plotly.js
@@ -35864,7 +35864,7 @@ Object.defineProperty(exports, '__esModule',  value: true );
     return request.responseXML;
   );
   if (typeof define === "function" && define.amd) this.d3 = d3, define(d3); else if (typeof module === "object" && module.exports) module.exports = d3; else this.d3 = d3;
-();
+.apply(self);
 ,],170:[function(_dereq_,module,exports)
 module.exports = function () 
     for (var i = 0; i < arguments.length; i++) 

d3 3.5.17 的补丁

diff --git a/node_modules/d3/d3.js b/node_modules/d3/d3.js
index aded45c..d5b3cad 100644
--- a/node_modules/d3/d3.js
+++ b/node_modules/d3/d3.js
@@ -9551,4 +9551,4 @@
     return request.responseXML;
   );
   if (typeof define === "function" && define.amd) this.d3 = d3, define(d3); else if (typeof module === "object" && module.exports) module.exports = d3; else this.d3 = d3;
-();
\ No newline at end of file
+.apply(self);