使用ES6模块进行d3 v4.0自定义构建

时间:2016-05-04 12:03:44

标签: d3.js systemjs jspm rollupjs

我正在尝试使用d3 v4.0的alpha版本,并尝试在jspm设置中创建自定义版本。我似乎无法理解新模块化构建的工作方式。

如果我想从模块导入命名导出,即从d3-request导入json,我可以执行以下操作: 通过jspm / npm安装模块后import {json} from "d3-request";

如果我想安装整个库,同样import d3 from "d3";

如果我想安装多个模块并命名导出并在d3命名空间下将它们全部提供给我(即,在d3-request旁边导入d3-shape,并且可以访问d3.json和d3.line d3 global),这是什么语法?

我意识到当使用这些模块的独立版本时,会导出d3_shape等全局变量。这是为了在将这些模块与我的应用程序捆绑在一起时为每个模块设置单独的命名空间吗?

1 个答案:

答案 0 :(得分:8)

相信计划是在D3 4.0完成后提供整个库的ES6版本,以及自定义构建生成器,此时您将能够执行此操作:< / p>

import { json, line } from 'd3';

json( 'file.json', ( err, data ) => ... );

(请注意,执行此操作时没有d3变量 - 您直接使用命名导入。)

目前,d3软件包是版本3,它没有ES6版本,因此在此期间有两个选项 - 安装所需的模块并从中单独导入...

import { json } from 'd3-request';
import { line } from 'd3-shape';

json( 'file.json', ( err, data ) => ... );

...或创建自己的自定义构建:

// src/my-d3.js
export { json } from 'd3-request';
export { line } from 'd3-shape';

// src/app.js
import { json, line } from './my-d3.js';

其中,我赞成第一个 - 它更明确,并且可能不太可能导致未使用的代码最终出现在您的构建中。