ES6 导出脚本答案

【问题标题】：ES6 export of a scriptES6 导出脚本
【发布时间】：2018-11-07 20:22:23
【问题描述】：

我在 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'; 相同的错误，并在 d3.js 中删除 const 和导出（只需使用原始缩小文件）。

【问题讨论】：

我不确定a question I asked earlier 是否有帮助。尽量不要导出 d3 并直接使用它，因为它似乎是所有 d3 组件的全局变量。
@jrook，我试过了，但得到了一堆编译错误（最后更新了问题。）

标签： javascript reactjs d3.js ecmascript-6

【解决方案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';

【讨论】：

我切换了，但现在出现编译错误（问题在最后更新。）
@user994165 不确定，但似乎与导入无关。在缩小的脚本上运行 linter 可能会出现问题？

【解决方案2】：

你应该更新

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

【讨论】：

我切换了，但现在出现编译错误（问题在最后更新。）
请用一些解释来支持你的回答。

【解决方案3】：

虽然之前的答案让我绕过了问题顶部的原始错误，但通过使用：

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

，我最终得到了 ES-Lint 错误，我通过添加解决了这个问题

/* eslint-disable */

但是，由于 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';

【讨论】：