ES6导出脚本

Question

我在React中使用D3 v5，并且具有使用v3的可视化效果。 我正在为v5使用npm模块，但对于v3，我正在尝试导入D3以在该可视化中使用。

在我的组件中，我有：

import * as d3 from './lib/d3/v3/d3';

在d3文件夹的d3.js中，缩小的v3 d3脚本：

const d3 = !function(){function n(n){return n&&(n.ownerDocument||n....

export default d3;

但是我收到以下错误：

编译失败。

./src/components/d3/NetworkTopology/D3_NetworkTopology.js
Attempted import error: 'behavior' is not exported from './lib/d3/v3/d3' (imported as 'd3').

NetworkTopology.js：

  ...
  const zoom = d3.behavior
    .zoom()

在v4中删除了“行为”，因此在我看来，这是在拉D3 V5版本而不是V3。 如何设置为同时使用两个版本的D3？

我将导入更改为：

import d3 from './lib/d3/v3/d3';

但是出现了以下编译错误：编译失败。

./src/components/d3/NetworkTopology/lib/d3/v3/d3.js

  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions

并且我import * as d3 from './lib/d3/v3/d3';得到与import * as d3 from './lib/d3/v3/d3';相同的错误import * as d3 from './lib/d3/v3/d3'; 结合删除const并在d3.js中导出（只需使用原始的缩小文件即可）。

Answer 1

我认为这与d3的版本无关。 您的问题是带有最小化库的脚本具有单个export default d3 （名称default绑定到具有d3值的常量的导出），而您的组件将名称空间import * as d3 ，这意味着d3将是包含所有导出的模块对象-在您的情况下，仅default 。 因此d3.default.behaviour可以工作。 但是，您应该更改导入，以不使用名称空间对象，而是直接导入单个值：

import d3 from './lib/d3/v3/d3';
// which is short for
import { default as d3 } from './lib/d3/v3/d3';

Answer 2

你应该更新

    import d3 from './lib/d3/v3/d3';

Answer 3

尽管先前的答案使我可以使用以下方法解决问题顶部的原始错误：

从'./lib/d3/v3/d3导入d3

，最终导致出现ES-Lint错误，我通过添加来解决了该错误

/ *禁用eslint * /

但是，然后我得到了一个错误，这是由于Babel在D3缩小代码上插入“ use strict”而引起的。 由于Create React App不允许在不弹出应用程序的情况下修改Babel配置，因此我陷入了困境。 我曾考虑过在模板中放入脚本或通过AJAX调用从CDN中获取D3脚本，但是我不确定它是否可以在同一应用程序中与两个D3版本一起使用。

最终有效的方法如下。 我将早期版本的D3克隆到了应用程序根目录下的目录中，然后将其package.json中的名称修改为“ d3-v3”，并将目录重命名为“ d3-v3”。 范围内的npm软件包命名可能是软件包名称的首选。

然后我做了一个：

npm install file:./d3-v3

在我的React组件中，我将以下内容用于D3 v3

import * as d3 from 'd3-v3';

对于使用的v5：

import * as d3 from 'd3';