Javascript 通过网页包导入jquery错误-未找到模块：can'；不解析jquery

我是typescript的新手，试图通过在线示例和入门教程来学习它，我将遵循 除了我尝试导入jquery并尝试在我的typescript文件中使用它时，它开始为找不到的模块给出错误，其他一切都很正常。 以下是我正在运行的代码块：

我的main.ts文件是

import * as $ from 'jquery'
import {MustHaveCoffee} from './getcoffee'
class SweetSweetClass{
    constructor(){
        console.log("Even sweeter");
        $('body').css('background-color', 'red');//here error occures
    }
}
let basil = new SweetSweetClass();
let coffee = new MustHaveCoffee();

var path = require('path');
module.exports = {
    entry: './main.ts',
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    module:{
        loaders: [
            { test:/\.ts$/, loader: 'ts-loader' }
        ]
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

webpack.config.js文件为

import * as $ from 'jquery'
import {MustHaveCoffee} from './getcoffee'
class SweetSweetClass{
    constructor(){
        console.log("Even sweeter");
        $('body').css('background-color', 'red');//here error occures
    }
}
let basil = new SweetSweetClass();
let coffee = new MustHaveCoffee();

var path = require('path');
module.exports = {
    entry: './main.ts',
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    module:{
        loaders: [
            { test:/\.ts$/, loader: 'ts-loader' }
        ]
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

我的tsconfig.json文件是

{
    "compilerOptions":{
        "module":"commonjs",
        "outDir":"dist/",
        "noImplicitAny":true,
        "removeComments":true,
        "preserveConstEnums":true
    }, 
    "include":[
        "./typings/*"
    ],
    "exclude":[
        "node_modules",
        "**/*.spec.ts"
    ]
}

以下是我在运行“webapack”命令时遇到的错误

E:\learning-typescript-by-examples>webpack
ts-loader: Using typescript@2.4.1 and E:\learning-typescript-by-examples\tsconfig.json
Hash: 3a411aca489fbed8710d
Version: webpack 3.0.0
Time: 1659ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.34 kB       0  [emitted]  main
[0] ./main.ts 402 bytes {0} [built]
[1] ./getcoffee.ts 235 bytes {0} [built]

ERROR in ./main.ts
Module not found: Error: Can't resolve 'jquery' in 'E:\learning-typescript-by-examples'
@ ./main.ts 3:8-25

此外，我还通过运行

typings install dt~jquery --global --save

它工作正常。 我遵循了教程中提到的每一个步骤，但开始得到声明的错误。可能是我错过了什么，但却无法找到答案。我已经搜索了这个问题并找到了一些解决方案（如这里的一个），但这些解决方案似乎不适合我的情况，因为我没有使用bower进行依赖关系管理等。如果您有任何帮助，我们将不胜感激。谢谢

更新

我现在通过使用“npm安装--save dev@types/jquery”添加了jquery，详细错误如下

ts-loader: Using typescript@2.4.1 and E:\learning-typescript-by-examples\tsconfig.json
Hash: d72ca1c2dd5c6319254c
Version: webpack 3.0.0
Time: 2233ms
Asset     Size  Chunks             Chunk Names
bundle.js  3.35 kB       0  [emitted]  main
[0] ./main.ts 410 bytes {0} [built] [2 errors]
[1] ./getcoffee.ts 235 bytes {0} [built]


ERROR in ./main.ts
(1,20): error TS2306: File 'E:/learning-typescript-by-examples/node_modules/@types/jquery/index.d.ts' is not a module.

ERROR in ./main.ts
(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'.

ERROR in ./main.ts

Module not found: Error: Can't resolve '@types/jquery' in 'E:\learning-typescript-by-examples'

resolve '@types/jquery' in 'E:\learning-typescript-by-examples'

  Parsed request is a module

  using description file: E:\learning-typescript-by-examples\package.json (relative path: .)

    Field 'browser' doesn't contain a valid alias configuration

  after using description file: E:\learning-typescript-by-examples\package.json (relative path: .)

    resolve as module

      E:\node_modules doesn't exist or is not a directory
      looking for modules in E:\learning-typescript-by-examples\node_modules

        using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)

          Field 'browser' doesn't contain a valid alias configuration
        after using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)

          using description file: E:\learning-typescript-by-examples\node_modules\@types\jquery\package.json (relative path: .)
            no extension

              Field 'browser' doesn't contain a valid alias configuration

             E:\learning-typescript-by-examples\node_modules\@types\jquery is not a file
            .webpack.js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.webpack.js doesn't exist
            .web.js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.web.js doesn't exist
            .ts

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.ts doesn't exist
            .js

              Field 'browser' doesn't contain a valid alias configuration

              E:\learning-typescript-by-examples\node_modules\@types\jquery.js doesn't exist
            as directory
              existing directory

                using path: E:\learning-typescript-by-examples\node_modules\@types\jquery\index

                  using description file: E:\learning-typescript-by-examples\node_modules\@types\jquery\package.json (relative path: ./index)
                    no extension

                      Field 'browser' doesn't contain a valid alias configuration

                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index doesn't exist
                    .webpack.js

                      Field 'browser' doesn't contain a valid alias configuration

                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.webpack.js doesn't exist
                    .web.js

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.web.js doesn't exist
                    .ts

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.ts doesn't exist
                    .js

                      Field 'browser' doesn't contain a valid alias configuration
                      E:\learning-typescript-by-examples\node_modules\@types\jquery\index.js doesn't exist

[E:\node_modules]

[E:\learning-typescript-by-examples\node_modules\@types\jquery]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.webpack.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.web.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.ts]

[E:\learning-typescript-by-examples\node_modules\@types\jquery.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.webpack.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.web.js]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.ts]

[E:\learning-typescript-by-examples\node_modules\@types\jquery\index.js]
@ ./main.ts 3:8-32

---

您正在尝试导入类型定义，而不是模块本身。该错误反映了这一点，并建议您改为导入

jquery

(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'.

实际模块是

jquery

，这意味着您需要将其导入

import * as $ from 'jquery';

当然，您需要先安装它，这可能是您最初的问题。您可以通过以下方式安装它：

npm install --save jquery

您可能想知道为什么需要两个不同的包来使用jQuery。原因是

jquery

是一个JavaScript模块，当TypeScript没有模块的任何类型信息，并且

jquery

没有提供这些信息时，TypeScript通常不高兴。您不需要类型来使用模块，但您需要以某种方式满足TypeScript编译器的要求。因为创建自己的类型定义会很繁琐，所以社区为流行库创建了许多类型定义。可以在中找到它们，并将它们作为

@types/

发布到npm

---

您正在使用的教程建议使用

打字

，但自从TypeScript2.0以来就不再使用了（请参阅）。本教程似乎已经过时，即使在撰写本文时也是如此，而且它实际上没有涵盖比官方网页文档更多（或更详细）的内容。

您是否安装了

jquery

？打字不是程序包，而是TypeScript的类型。如果您这样做了，您可以尝试使用，为此您可能还需要

@types/node

。你可以用npm安装来安装它们——保存dev@types/jquery@types/node。谢谢@MichaelJungo的回复，我已经遵循了你给出的解决方案，现在详细的错误不同了，我正在用这些信息更新我的问题，因为我无法在评论中粘贴长消息。请检查一下。