时间戳

首页 > 解决方案 > ES6 导出脚本

javascript - ES6 导出脚本

问题描述

我在 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 和导出（只需使用原始的缩小文件）。

标签： javascriptreactjsd3.jsecmascript-6

解决方案

我认为这与 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';

推荐阅读