d3.js - 使用 Visual Studio Code 汇总 @types/d3

Question

我的图书馆项目使用...

• typescript
• 汇总
• D3
• @类型/d3

package.json 文件具有这些依赖项

"dependencies": {
  "@types/d3": "^4.4.0"  /* also tried moving this to devDeps */
},
"devDependencies": {
  "cssnano": "^3.10.0",
  "postcss-cssnext": "^2.9.0",
  "postcss-nested": "^1.0.0",
  "postcss-simple-vars": "^3.0.0",
  "rollup": "^0.40.1",
  "rollup-plugin-commonjs": "^7.0.0",
  "rollup-plugin-livereload": "^0.4.0",
  "rollup-plugin-node-resolve": "^2.0.0",
  "rollup-plugin-postcss": "^0.2.0",
  "rollup-plugin-serve": "^0.1.0",
  "rollup-plugin-typescript": "^0.8.1",
  "rollup-plugin-uglify": "^1.0.1",
  "rollup-watch": "^3.1.0"
}

我的 rollup.config.js 文件配置了这些插件...

plugins: [
    typescript(),
    postcss({
        extension: ['.css'],
        plugins: [
            simplevars(),
            nested(),
            cssnext({ warnForDuplicates: false }),
            cssnano(),
        ],
    }),
    nodeResolve({
        jsnext: true,  //use jsnext if the node package supports it
        main: true,    //look for main file
        browser: true, //if there is a browser version, use it
    }),
    commonjs(),
    //uglify(),
    serve({
        contentBase: 'build',
        port: '80',
    }),
    livereload(),
]

Rollup 构建得很好。但是，在编辑器中，VSCode 在 d3 符号上显示错误。当我将鼠标悬停在它上面时，我看到这个错误...

[ts] 'd3' refers to a UMD global, but the current file is a module. Consider adding an import instead.

我可以添加此导入以使错误在编辑器中消失。

import d3 from '@types/d3';

但是，汇总失败并显示...

Could not resolve '@types/d3' from '...'

有没有办法配置 vscode 不显示该错误，这样它就不会掩盖真正的错误？

是否有其他方法可以在汇总项目中配置 D3 类型定义？

Answer 1

您只定义了 d3 的 TypeScript 类型。您仍然需要指定 d3 作为依赖项。

package.json

"dependencies": {
  "@types/d3": "4.8.0",
  "d3": "4.8.0"
}

您现在可以导入 d3:

import * as d3 from "d3";