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';