带有SystemJS和TypeScript的D3 v4

Question

我正在尝试使用SystemJS和TypeScript设置最新版本的d3，但似乎有些谜题在我身边并不合适。

摘要

基本上，在我将所有依赖项和@types安装到node_modules后，我配置了SystemJS来加载这些依赖项。

现在行为完全奇怪，如：

• 使用import * as d3 from 'd3';我收到ModuleNamespace
• 使用import d3 from 'd3';我收到了正确的d3对象，但TS抱怨：
  • Module '"ABSOLUTE_PATH/node_modules/@types/d3/index"' has no default export.' at: '2,8' source: 'ts'

代码

systemjs.config.js

(function () {
  SystemJS.config({
    paths: {
      'npm:': 'node_modules/'
    },
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts',
        meta: {
          '*.ts': {
            loader: 'ts'
          }
        }
      },
      ts: {
        main: 'plugin.js'
      },
      typescript: {
        main: 'lib/typescript.js',
        meta: {
          'lib/typescript.js': {
            exports: 'ts'
          }
        }
      },

      'd3': { "main": 'build/d3.min.js', "defaultExtension": "js"},
      'd3-array': { "main": 'build/d3-array.min.js', "defaultExtension": "js"},
      'd3-axis': { "main": 'build/d3-axis.min.js', "defaultExtension": "js"},
      'd3-collection': { "main": 'build/d3-collection.js', "defaultExtension": "js"},
      'd3-color': { "main": 'build/d3-color.min.js', "defaultExtension": "js"},
      'd3-dispatch': { "main": 'build/d3-dispatch.min.js', "defaultExtension": "js"},
      'd3-ease': { "main": 'build/d3-ease.min.js', "defaultExtension": "js"},
      'd3-format': { "main": 'build/d3-format.min.js', "defaultExtension": "js"},
      'd3-interpolate': { "main": 'build/d3-interpolate.min.js', "defaultExtension": "js"},
      'd3-path': { "main": 'build/d3-path.min.js', "defaultExtension": "js"},
      'd3-scale': { "main": 'build/d3-scale.min.js', "defaultExtension": "js"},
      'd3-selection': { "main": 'build/d3-selection.min.js', "defaultExtension": "js"},
      'd3-shape': { "main": 'build/d3-shape.min.js', "defaultExtension": "js"},
      'd3-time': { "main": 'build/d3-time.min.js', "defaultExtension": "js"},
      'd3-time-format': { "main": 'build/d3-time-format.min.js', "defaultExtension": "js"},
      'd3-timer': { "main": 'build/d3-timer.min.js', "defaultExtension": "js"},
      'd3-transition': { "main": 'build/d3-transition.min.js', "defaultExtension": "js"}

    },
    map: {
      app: 'src',

      'ts':                        'npm:plugin-typescript/lib',
      'typescript':                'npm:typescript',

      'd3':                        'npm:d3',
      'd3-array': 'npm:d3-array/',
      'd3-axis': 'npm:d3-axis/',
      'd3-collection': 'npm:d3-collection/',
      'd3-color': 'npm:d3-color/',
      'd3-dispatch': 'npm:d3-dispatch/',
      'd3-ease': 'npm:d3-ease/',
      'd3-format': 'npm:d3-format/',
      'd3-interpolate': 'npm:d3-interpolate/',
      'd3-path': 'npm:d3-path/',
      'd3-scale': 'npm:d3-scale/',
      'd3-selection': 'npm:d3-selection/',
      'd3-shape': 'npm:d3-shape/',
      'd3-time': 'npm:d3-time/',
      'd3-time-format': 'npm:d3-time-format/',
      'd3-timer': 'npm:d3-timer/',
      'd3-transition': 'npm:d3-transition/'
    },
    typescriptOptions: {
      module: "system",
      typeCheck: true,
      tsconfig: true
    },
    transpiler: 'ts'
  });
})();

tsconfig.json

{
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "rootDir": ".",
      "baseUrl": ".",
      "moduleResolution": "node"
   }
}

的package.json

{
  "name": "testing",
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "@types/d3": "^4.5.0",
    "lite-server": "^2.2.2",
    "plugin-typescript": "^6.0.4",
    "typescript": "^2.1.6"
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "d3": "^4.6.0",
    "systemjs": "^0.20.9"
  }
}