使用汇总将d3.event导入自定义构建 [英] importing d3.event into a custom build using rollup

问题描述

我有一个文件 d3.custom.build.js 像这样（简化）：

I've got a file d3.custom.build.js like this (simplified):

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库交换到脚本标记时，一切正常。这绝对是一个构建问题。

I want to export to a plain old browser global named 'd3'. I'm calling rollup from a simple npm script. The good news is that almost everything works in the output file, except for one thing: d3.event in browser is always null. No, it's not an issue with events being hijacked on the page. When I swap in the standard full d3 4.0 library into the script tag everything works fine. It's definitely a build issue.

d3 docs 警告捆绑事件很棘手：

如果您使用Babel，Webpack或其他ES6-to-ES5捆绑包，请注意
d3.event的值在事件期间发生变化！导入
d3.event必须是实时绑定，因此您可能需要配置
bundler以从D3的ES6模块导入，而不是从生成的
UMD包中导入;并非所有捆绑商都观察到jsnext：main。还要注意
与window.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}）不够用。如何在捆绑中获得实时绑定？非常感谢任何指导。

It appears that setting nodeResolve({ jsnext: true }) isn't sufficing. How do I get a live binding in the bundle? Any guidance very appreciated.

推荐答案

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

You’re exporting an object, defined using ES2015 shorthand object literal syntax, as the default export. Here is the long form equivalent of what you’ve written:

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

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

Your object thus captures the value of event on load, which is null; it is not a live binding, and won’t reflect the current event.

一个修复方法是定义事件使用getter的属性：

One fix would be to define the event property using a getter:

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

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

Better would be to use named exports instead of a default export, and then Rollup will generate a live binding automatically:

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

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

This is not only shorter, but now you don’t depend on the browser supporting the ES2015 shorthand object literal syntax.

这篇关于使用汇总将d3.event导入自定义构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！