文章/答案/技术大牛

发布

社区首页 >问答首页 >ChartJS v3与TypeScript和Webpack的结合使用

问ChartJS v3与TypeScript和Webpack的结合使用
EN

Stack Overflow用户

提问于 2021-04-04 22:43:43

回答 1查看 6.4K关注 0票数 6

在2.9.4版之前，我使用ChartJS和@type/chart.js相结合来获得TypeScript支持的所有类型。我使用Webpack和TypeScript的最小示例如下：

package.json:

{
  "devDependencies": {
    "@types/chart.js": "^2.9.31",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.3",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "chart.js": "^2.9.4"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
  },
}

webpack.config.json:

module.exports = {
  entry: {
    main: "./main.ts",
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

main.ts:

import Chart from "chart.js";

new Chart("chart", {
  type: 'line',
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3'],
    datasets: [{
      label: "Dataset 1",
      data: [1, 2, 3],
    }]
  },
});

index.html:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="chart"></canvas>
    <script src="main.js"></script>
  </body>
</html>

但是，在更新到3.0.0版之后，它不再工作了(我删除了@type/chart.js，因为自该版本发布以来，chart.js就发布了自己的类型)：

npx webpack服务模式开发

ERROR in [...]/chartjs/main.ts
./main.ts 3:4-9
[tsl] ERROR in [...]/chartjs/main.ts(3,5)
      TS2351: This expression is not constructable.
  Type 'typeof import("[...]/chartjs/node_modules/chart.js/types/index.esm")' has no construct signatures.

但是，由于内置类Chart实际上有一个构造函数，所以我并不真正理解这个问题以及如何修复它。与Webpack和TypeScript一起使用ChartJS版本3的打算是什么？

谢谢你给我的任何建议，让我走到正确的方向！

javascript

typescript

webpack

chart.js

chart.js3

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-05 13:42:31

Chart.js 3是树摇动，因此有必要导入和注册将要使用的控制器、元素、缩放和插件。

请从打包机(Webpack，卷轴等)文档中查看Chart.js。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66946501

复制

相似问题

问ChartJS v3与TypeScript和Webpack的结合使用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ChartJS v3与TypeScript和Webpack的结合使用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ChartJS v3与TypeScript和Webpack的结合使用
EN