找不到模块＆map; js＆＃39;

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" );

tsconfig：

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

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

Answer 1

我相信您的设置中存在两个问题，您获得的错误只是第一个问题，在解决之后您将需要设置webpack以识别TypeScript源代码中的依赖项。

考虑到您正确安装了模块及其打字...

1 - 获取tsc以编译图表测试

首先，在您的tsconfig.json中，您应该省略＆＃34;文件＆＃34;指令使编译器自动读取所有相关文件（包括打字）。然后只需添加一个条目＆＃34;排除＆＃34;对于不需要编译的每个文件夹（例如＆＃34; node_modules＆＃34;）。所以你的tsconfig.json应该是这样的：

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

正如@vintem在下面的答案中所发表的那样，你不需要require() chart.js作为一个模块，它的一个软件包最初设计为以老式的方式从浏览器中消费，所以一旦加载了lib，它将自动进入全局范围。

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能够使用ts-loader了解TypeScript代码中使用的依赖关系，您可以使用以下命令安装它：

npm install ts-loader --save-dev

如果您愿意，可以进行这些配置directly in your gulp file。

更新1

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

如果您收到类似＆＃34的错误，则无法找到图表模块＆＃34;这可能意味着您仍在尝试在代码中的某个位置导入该模块。您需要尝试直接使用 subject condition data #1 id1 cond1 0.12 #2 id1 cond1 0.43 #3 id1 cond2 1.26 #4 id2 cond1 1.96 #5 id2 cond2 0.24 #6 id2 cond2 0.62 ... 并且可能会收到错误，例如＆＃34;无法找到图表类＆＃34;，但这是一个完全不同的历史。

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

Answer 2

通过为chartjs定义打字的方式，您不需要导入它。它位于全球空间，所以您可以像这样使用它：

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

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

Answer 3

对我来说，这个错误是因为缺少依赖项 @types/chart.js。 如果您也是这种情况，请通过运行以下任一命令添加依赖项：

npm i -D @types/chart.js

或

yarn add -D @types/chart.js

这为我解决了错误！

Answer 4

因此，您完成npm install chart.js --save

只需在您的JavaScript文件中完成

import Chart from 'chart.js'

Answer 5

我遇到了同样的问题，我的问题是我跑步：

npm install chart.js --save 

在另一个文件中（不是带有ionic项目的文件）。 这可能对遇到相同问题的其他人很有用。