use*_*973 6 javascript typescript webpack chart.js chart.js3
直到版本 2.9.4为止，我将 ChartJS 与@types/chart.js结合使用来获取 TypeScript 支持的所有类型。我使用 Webpack 和 TypeScript 的最小工作示例如下所示：
包.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/,
},
],
},
};
主要.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],
}]
},
});
索引.html：
<!DOCTYPE html>
<html>
<body>
<canvas id="chart"></canvas>
<script src="main.js"></script>
</body>
</html>
但更新到版本 3.0.0后，这不再起作用（我删除了@types/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实际上有一个构造函数，我真的不明白这个问题以及如何解决它。将 ChartJS 版本 3 与 Webpack 和 TypeScript 结合使用的预期方式是什么？
预先感谢您提供的任何提示，引导我在这里找到正确的方向！