问题描述
直到 release 2.9.4，我使用 ChartJS 结合 @types/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>
但更新到 version 3.0.0 后，这不再起作用（我删除了 @types/chart.js，因为 chart.js 自该版本发布以来就提供了自己的类型）：
npx webpack serve --mode development
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 实际上有一个 constructor，我不太了解问题以及如何解决它。结合 Webpack 和 TypeScript 使用 ChartJS 版本 3 的预期方式是什么？
在此先感谢您提供的任何提示，让我在此处找到正确的方向！
解决方法
Chart.js 3 是 tree-shakeable，因此需要导入和注册您将要使用的控制器、元素、比例和插件。
请查看 Chart.js 文档中的 Bundlers (Webpack,Rollup,etc.)。