javascript - 使用汇总将 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 很棘手:

If you use Babel, Webpack, or another ES6-to-ES5 bundler, be aware that the value of d3.event changes during an event! An import of d3.event must be a live binding, so you may need to configure the bundler to import from D3’s ES6 modules rather than from the generated UMD bundle; not all bundlers observe jsnext:main. Also beware of conflicts with the window.event global.

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

Answer 1

您正在导出一个使用 ES2015 速记对象字面量语法定义的对象作为默认导出。这是您所写内容的等效长格式:

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

因此，您的对象在加载时捕获 event 的值，该值是 null；它不是实时绑定(bind)，不会反射(reflect)当前事件。

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

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

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

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

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