使用汇总将d3.event导入自定义构建

Question

我有一个d3.custom.build.js这样的文件(简化):

import { range } from 'd3-array';
import { select, selectAll, event } from 'd3-selection';
import { transition } from 'd3-transition';

export default {
    range,
    select,
    selectAll,
    event,
    transition
};

和rollup.config.js这样的:

import nodeResolve from 'rollup-plugin-node-resolve';

export default {
    entry: './js/vendor/d3-custom-build.js',
    dest: './js/vendor/d3-custom-built.js',
    format: 'iife',
    globals: {
        d3: 'd3'
    },
    moduleId: 'd3',
    moduleName: 'd3',
    plugins: [nodeResolve({ jsnext: true })]
};

我想导出一个名为'd3'的普通旧浏览器.我正在从简单的npm脚本调用汇总.好消息是几乎所有东西都在输出文件中工作,除了一件事:d3.event在浏览器中总是为空.不,这不是在页面上被劫持的事件的问题.当我将标准的完整d3 4.0库交换到脚本标记时,一切正常.这绝对是一个构建问题.

该D3文档警告说,捆绑event是棘手:

如果您使用Babel,Webpack或其他ES6到ES5捆绑包,请注意d3.event的值在事件期间会发生变化!导入d3.event必须是实时绑定,因此您可能需要将捆绑程序配置为从D3的ES6模块而不是从生成的UMD包导入; 并非所有捆绑商都观察到jsnext:main.还要注意与window.event全局的冲突.

设置似乎nodeResolve({ jsnext: true })不够.如何在捆绑中获得实时绑定？任何指导非常感谢.

Answer 1

您正在导出使用ES2015速记对象文字语法定义的对象作为默认导出.这是与你所写的相同的长形式:

export default {
  range: range,
  select: select,
  selectAll: selectAll,
  event: event,
  transition: transition
}

因此,您的对象捕获eventon load 的值,该值为null; 它不是实时绑定,也不会反映当前事件.

一个修复方法是event使用getter 定义属性:

export default {
  range,
  select,
  selectAll,
  get event() { return event; },
  transition
}

更好的方法是使用命名导出而不是默认导出,然后Rollup将自动生成实时绑定:

export {
  range,
  select,
  selectAll,
  event,
  transition
}

这不仅更短,而且现在您不依赖于支持ES2015速记对象文字语法的浏览器.