d3 4.0 - 導入語句給出__moduleExports包裝

Question

我在D3 4.0和Ionic2/Angular2項目中的導入語句有問題。

我相信我正在使用正確的導入語句，並且編譯所有內容。

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$1 = unwrapExports(d3Request); 

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

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

然而，在運行時xml功能上不存在d3Request$2.xml。它只存在於d3Request$2.__moduleExports.xml，但代碼不能編譯到那。是什麼賦予了？

我也試過import d3Request from 'd3-request'這也編譯，但仍然無法正常工作。結果在：

var d3Request$1 = unwrapExports(d3Request); 

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

但是，這仍然不起作用，因爲d3Request$1最終未定義。 d3Request.xml存在，但代碼不能編譯，編譯爲d3Request$1.xml！

Answer 1

unwrapExports(...)和__moduleExports表示您正在導入CommonJS文件（並將其轉換爲rollup-plugin-commonjs），而不是ES模塊版本。奇怪的是，它不起作用，但無論如何 - 您可以通過導入正確的文件完全繞過轉換。

沒有看到你的Rollup配置文件，這是不可能的，但我猜你正在使用rollup-plugin-node-resolve？如果是這樣，解決方案是確保設置jsnext: true選項，以便彙總可以找到this file而不是this file。