javascript - ES15 导入一个库作为另一个库的插件

Question

我正在制作一个 React 项目，但在使用库时遇到了问题。我想导入 D3 及其名为 d3-3d 的插件，但每当我这样做时，d3-3d 向 D3 对象添加函数的 native 功能都不起作用。

在更简单的项目中，它只需插入脚本标签即可工作:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-3d/build/d3-3d.min.js"></script>

然后调用位于 d3 上名为 _3d 的新函数。例如:

d3
  ._3d()
  .scale(4)
  .origin(origin)
  .rotateX(startAngle)
  .rotateY(startAngle)
  .primitiveType("POINTS");

但是对于React来说，没有附加这样的方法。我不完全理解导入和导出是如何工作的，但这里有一个 d3-3d 源代码的片段，如果有帮助的话，它正在处理自己的导出。

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3 = global.d3 || {})));
}(this, (function (exports) { 'use strict';

...

exports._3d = _3d;

Object.defineProperty(exports, '__esModule', { value: true });

})));

我只是想知道如何在使用导入语法的 react 环境中获得与纯脚本标记相同的功能。

我已经尝试过这样的事情

import "d3-3d";

我听说这只是为了图书馆的副作用，但这没有用。将其导入为 d3_3d 并将 _3d 方法作为 d3 对象的属性放置。

提前致谢!

Answer 1

import * as d3 from 'd3'; 
import { _3d } from 'd3-3d'; 
d3._3d = _3d;