我正在尝试使用SystemJS和TypeScript设置最新版本的d3,但似乎有些谜题在我身边并不合适 .
Summary
基本上,在我将所有依赖项和@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'
Code
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"
}
}