d3 4.0 - import 语句给出 __moduleExports 包装器

Question

我在 D3 4.0 和 Ionic2/Angular2 项目中遇到导入语句问题。

我相信我使用了正确的 import 语句，并且一切都可以编译。

import * as d3Request from 'd3-request'; 

export class HomePage { 

  constructor() {

    d3Request.xml('assets/mysvg.svg')
      .mimeType("image/svg+xml")
      .get(function(error, xml) {
        if (error) throw error;
        document.body.appendChild(xml.documentElement);
      });
   }
}

编译为：

var d3Request = unwrapExports(d3Request);

var d3Request = Object.freeze({
    default: d3Request,
    __moduleExports: d3Request
});

...
 d3Request.xml('assets/mysvg.svg')
    .mimeType("image/svg+xml")
    .get(function (error, xml) {
       if (error) throw error;
       document.body.appendChild(xml.documentElement);
    });

但是，在运行时 xml 函数在 d3Request.xml 上不存在。它只存在于 d3Request.__moduleExports.xml 上，但代码不会编译成那个。给出了什么？

我也尝试了 import d3Request from 'd3-request'，它也可以编译，但仍然无法正常工作。结果：

var d3Request = unwrapExports(d3Request);

...
d3Request.xml('assets/emojis/laughing.svg')
   .mimeType("image/svg+xml")...

但是，这仍然不起作用，因为 d3Request 最终未定义。 d3Request.xml 存在但代码没有编译成那个，它编译成 d3Request.xml!

Answer 1

unwrapExports(...) 和 __moduleExports 表示您正在导入 CommonJS 文件（并使用 rollup-plugin-commonjs 对其进行转换），而不是 ES 模块版本。奇怪的是它不起作用，但没关系 – 您可以通过导入正确的文件完全绕过转换。

没有看到你的 Rollup 配置文件就无法确定，但我猜你正在使用 rollup-plugin-node-resolve? If so, the solution is to ensure that the jsnext: true option is set, so that Rollup can find this file rather than this file。

d3 4.0 - import 语句给出 __moduleExports 包装器

d3 4.0 - import statement gives __moduleExports wrapper

d3.js

typescript

rollupjs

ionic2

es6-modules