使用汇总将 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 }) 还不够。如何在捆绑包中获得实时绑定？非常感谢任何指导。

Answer 1

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

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 shorthand 对象文字语法的浏览器。

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

importing d3.event into a custom build using rollup

javascript

d3.js

rollupjs