Question

许多现代JavaScript库正在从单块更新到模块化的npm包;一些例子是lodash和d3。

这在保持构建规模下降方面很好，但是对于导入有点尴尬。加载整个库时，我写道：

import d3 from 'd3';

let csv = d3.csv()...
let xScale = d3.scale()...

当加载单个模块而不是整个包时，我写道：

import d3_scale from 'd3-scale';
import d3_request from 'd3-request';

let csv = d3_request.csv()...
let xScale = d3.scale.scaleLinear()...

是否有一种语法可以让我合并我的导入，这样我就可以从一个对象（例如d3.csv()，d3.scaleLinear()）中对每个包进行所有函数调用？

Answer 1

当我写这个问题时，我想出了答案。自橡胶回避。

spread operator看起来相当不错：

import * as d3_request from 'd3-request';
import * as d3_scale from 'd3-scale';
const d3 = {
    ...d3_request,
    ...d3_scale
};

d3.csv('path/to.csv', (error, data) => {
    let xScale = d3.scale()...
});

Answer 2

另一种方法是像这样做

创建文件d3-modules.js：

export * from 'd3-request';
export * from 'd3-scale';

然后将该文件导入您需要的位置：

import * as d3 from "./d3-modules.js";

实际上d3是如何自己做的：https://github.com/d3/d3/blob/635d44786dd4322d0c89dd98546bff91d7cce0fe/index.js

可以合并或嵌套ES6导入？

2 个答案: