如何使用ECMAScript 6模块导入PlotlyJS？

Question

我正在尝试使用ES6模块来实现PlotlyJS(最新版本)，代码如下:

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

我认为问题在库中，你有什么想法吗？

plotly.js的错误代码行

- WRAD

---

你能修好这个问题吗？我也遇到了同样的问题，已经苦恼了两天了.. - Suresh

Answer 1

如果有人想在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);

- Vinod Louis

Answer 2

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

你必须等待 plotly.js 版本2.0 或根据开发者的建议进行修复

我通过将第27724行从 }(); 改为 }.apply(self); 进行了修复，但这只是一个hack :)

当然，确切的行数取决于您所使用的 plotly 版本。

- Wolfgang Kuehn