通过webpack错误导入jquery - 找不到模块:无法解析jquery

Question

我是打字稿的新手,并试图通过在线示例和入门教程来学习它,我正在关注https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/的教程, 除了当我工作正常我试图导入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();

webpack.config.js文件是

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

另外,我通过运行打字将jquery添加为全局模块

typings install dt~jquery --global --save

它工作正常.我按照教程中提到的每一步都开始,但是开始得到规定的错误.可能是我错过了一些但无法弄明白的东西.我已经搜索了问题并找到了一些解决方案(比如这里没有找到webpack模块:错误:无法解析'jquery')但是解决方案似乎不适合我的情况,因为我没有使用bower for依赖管理等任何帮助都将受到高度赞赏.谢谢

UPDATE

我现在通过使用'npm install --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

Answer 1

您正在尝试导入类型定义而不是模块本身.错误反映了这一点,并建议您导入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编译器.因为创建自己的类型定义会很繁琐,所以社区制作的流行库有很多类型定义.它们可以在DefinitelyTyped存储库中找到,并且每个存储库都以npm的形式发布@types/<package-name>.

您正在使用的教程建议使用typings,但自TypeScript 2.0以来不再使用该教程(请参阅弃用说明:关于TypeScript@2.0).即使在撰写本文时,该教程似乎已经过时,并且它实际上并没有比官方webpack文档Webpack-TypeScript更多(或更详细).