【问题标题】:d3 v4.0 custom build with ES6 modules带有 ES6 模块的 d3 v4.0 自定义构建
【发布时间】:2016-08-29 20:43:54
【问题描述】:

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

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

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

如果我想安装多个模块和命名导出,并在 d3 命名空间下让它们全部可用(即,在 d3-request 旁边导入 d3-shape,并同时访问 d3.json 和 d3.line d3 global),这个的正确语法是什么?

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

【问题讨论】:

    标签: d3.js systemjs jspm rollupjs


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

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

    【讨论】:

    • 太棒了,感谢您对可用方法的澄清!期待完整的 ES6 版本。
    • D3 4.0 已发布。 Demo
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-05
    • 2018-03-20
    • 2019-05-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多