使用汇总将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屋!