如何使用 ECMAScript 6 模块导入 PlotlyJS答案

【问题标题】：How to import PlotlyJS with ECMAScript 6 modules如何使用 ECMAScript 6 模块导入 PlotlyJS
【发布时间】：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

【问题讨论】：

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

标签： javascript ecmascript-6 module 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);

【讨论】：