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

Question

我正在试验 d3 v4.0 的 alpha，并尝试在 jspm 设置中创建自定义构建。我似乎无法理解新的模块化构建是如何工作的。

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

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

如果我想安装多个模块和命名导出并让它们在 d3 命名空间下对我可用（即，将 d3-shape 与 d3-request 一起导入，并可以访问 d3.json 和 d3.line 在同一个 d3 全局中），正确的语法是什么？

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

Answer 1

我相信计划是在 D3 4.0 完成后提供整个库的 ES6 构建，以及自定义构建生成器，届时您将能够要做到这一点：

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

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

d3 v4.0 custom build with ES6 modules