使用汇总将 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 docs 警告说捆绑event 很棘手：

如果您使用 Babel、Webpack 或其他 ES6-to-ES5 捆绑器，请注意 d3.event 的值在事件期间发生变化！一个进口 d3.event 必须是实时绑定，因此您可能需要配置 bundler 从 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
}

因此，您的对象在加载时捕获了event 的值，该值为空；它不是实时绑定，不会反映当前事件。

一种解决方法是使用 getter 定义 event 属性：

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

最好使用命名导出而不是默认导出，然后 Rollup 将自动生成实时绑定：

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

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