找不到模块“chart.js”

Question

我有一个运行 webpack、typescript 和 gulp 的 webapp。我想使用 chart.js 库并且我已经安装了 chart.js npm 包。我试图在其中一个 JS 文件上定义 chart.js，我得到了这个：error TS2307: Cannot find module 'chart.js'

我的 JS 文件如下所示：

import Chart = require( "chart.js" );

配置：

{
  "compilerOptions": {
    "module": "commonjs"
  },
  "files": [
    "typings/tsd.d.ts"
  ]
}

重要提示：请 注意，chart.js 定义文件没有正确的模块声明。左边是accounting JS 库，它明确定义了模块并且可以工作。我猜这就是问题所在。如何使用声明的变量或将其导入另一个 JS 文件？

Answer 1

我相信您的设置中有两个问题，您遇到的错误只是第一个，解决后您需要设置 webpack 以识别来自 TypeScript 源代码的依赖项。

考虑到您已正确安装模块及其类型...

1 - 获取 tsc 来编译您的图表测试

首先，tsconfig.json您应该省略“files”指令，以便编译器自动读取所有相关文件（包括类型）。然后只需为每个不需要编译的文件夹（例如“node_modules”）添加一个关于“排除”的条目。所以你的 tsconfig.json 应该是这样的：

{
  "compilerOptions": {
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

正如@vintem 在下面的答案中发布的那样，您不需要将require()chart.js 作为模块，它最初设计为以老式方式从浏览器使用的包，因此一旦lib 已加载。

2 - 配置 webpack 以使用 tsc

在项目根目录中为您的 webpack 构建创建一个配置文件，webpack.config.js内容如下：

module.exports = {
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}

这使 webpack 使用ts-loader了解您的 TypeScript 代码中使用的依赖项，您可以使用以下命令安装它：

npm install ts-loader --save-dev

如果您愿意，可以直接在您的 gulp 文件中进行这些配置。

更新 1

当您从全局范围使用时，嗯……您只需使用它，就像下面@vintem 的回答一样。但是，您需要删除自己编写定义的尝试，并确保/// ref下载的图表定义在文件中typings/tsd.d.ts，否则您将覆盖/混合这些定义并弄得一团糟……tsc您会自动查看打字文件夹并为您找到一切。

如果您收到“找不到图表模块”之类的错误，则可能意味着您仍在尝试在代码中的某处导入该模块。您需要尝试直接使用它，new Chart(...)并且可能会收到“找不到图表类”之类的错误，但这是一个完全不同的历史。

祝你好运，请在上述程序中尝试一下，如果您有任何进展，请告诉我。

Answer 2

我遇到了同样的问题，我的问题是我运行：

npm install chart.js --save 

在不同的文件中（不是离子项目的文件）。这对于其他有同样问题的人可能有用。

Answer 3

通过为 Chartjs 定义类型的方式，您不需要导入它。它位于全局空间中，因此您可以像这样使用它：

let myChart = new Chart(new CanvasRenderingContext2D());

当然，您仍然需要在页面中添加对 Chartjs 的引用，以便全局可用。