找不到模块“chart.js”

Question

我有一个网络应用程序，运行webpack，打字记录和吞咽。我想使用chart.js库，我已经安装了chart.js npm包。我试图在其中一个JS文件上定义chart.js，我得到了以下内容：error TS2307: Cannot find module 'chart.js'

我的JS文件如下所示：

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

tsconfig：

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

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

​

Answer 1

使用为chartjs定义类型的方式，您不需要导入它。它位于全局空间，所以您可以这样使用它：

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

当然，您仍然需要在页面中添加对chartjs的引用，这样它就可以在全球范围内使用。

Answer 2

我相信在您的设置中有两个问题，您所得到的错误只是第一个问题，在解决之后，您需要安装webpack才能从TypeScript源代码中识别您的依赖项。

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

1-让tsc编译图表测试

首先，在您的tsconfig.json中，您应该省略“file”指令，以便编译器自动读取所有相关文件(包括类型)。然后，为每个不需要编译的文件夹(例如"node_modules")添加一个“排除”条目。因此，您的tsconfig.json应该如下所示：

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

正如@vintem在下面的答案中所发布的，您不需要将require() chart.js作为一个模块，它最初是设计用来以老式方式从浏览器中使用的包，因此一旦加载库，它就会自动进入全局范围。

2-配置webpack使用tsc

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

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能够理解TypeScript代码中使用的依赖项(使用T-装载机 )，您可以用以下方式安装它：

npm install ts-loader --save-dev

如果您愿意，可以将这些配置设置为直接在你的文件里。

更新1

当你在全球范围内使用的时候.您只需使用它，就像下面@vintem的答案中所示。但是，您需要删除自己编写定义的尝试，只需确保下载的图表定义的/// ref位于文件typings/tsd.d.ts上，否则您将覆盖/混合这些定义并造成很大的混乱……tsc自动查找键入文件夹，并为您查找所有内容。

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

祝您好运，请您在上述程序中试一试，并告诉我您是否有任何进展。

Answer 3

我也有同样的问题，我的问题是我跑：

npm install chart.js --save 

在不同的文件中(而不是离子项目的文件)。对于其他有同样问题的人来说，这可能是有用的。