jquery importation par erreur webpack - Module introuvable: ne peut pas résoudre jquery

Question

Je suis nouveau et essayer de-typographique apprendre par l'exemple en ligne et d'obtenir des tutoriels commencé, je suis tutoriel de tout https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/ a bien fonctionné pour moi sauf quand j'ai essayé d'importer jquery et essayé de l'utiliser dans mon fichier de tapuscrit, il a commencé à donner une erreur pour le module non trouvé. Ce qui suit est mon gros morceaux de code que je suis en cours d'exécution:

mon fichier main.ts est

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

fichier webpack.config.js est

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') 
    } 
} 

mon fichier est tsconfig.json

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

Voici une erreur que je reçois lors de l'exécution de la commande '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 

Aussi, j'ai ajouté jquery comme module global par typages en exécutant

typings install dt~jquery --global --save 

et cela a fonctionné correctement. J'ai suivi chaque étape mentionné le tutoriel, mais a commencé à obtenir l'erreur indiquée. Peut-être qu'il me manque quelque chose mais incapable de le comprendre. J'ai cherché le problème et ai trouvé une solution (comme un ici webpack Module not found: Error: Can't resolve 'jquery') mais les solutions ne semblent pas être adaptées dans ma situation car je n'utilise pas le bower pour la gestion de la dépendance etc. Toute aide serait fortement appréciée. Merci

MISE à JOUR

J'ai ajouté maintenant jquery grâce à l'aide de 'NPM installer --save-dev @ types/jquery' et erreur détaillée est suivante

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

Vous essayez type importer définitions au lieu du module lui-même. L'erreur reflète cela et suggère que vous importiez jquery à la place.

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

Le module réel est jquery, cela signifie que vous devez importer en tant que tel.

import * as $ from 'jquery'; 

Bien sûr, vous devez d'abord l'avoir installé, ce qui pourrait avoir été votre problème initial. Vous pouvez l'installer avec:

npm install --save jquery 

Vous pourriez vous demander pourquoi vous avez besoin de deux paquets différents pour utiliser jQuery. La raison en est que jquery est un module JavaScript et TypeScript n'est généralement pas satisfait lorsqu'il ne contient aucune information de type pour un module et que jquery ne les fournit pas. Vous n'avez pas besoin des types pour utiliser le module, mais vous devez satisfaire le compilateur TypeScript. Parce qu'il serait fastidieux de créer vos propres définitions de type, il existe de nombreuses définitions de type pour les bibliothèques populaires qui sont faites par la communauté. Ils peuvent être trouvés dans le DefinitelyTyped repository et chacun d'eux est publié à npm comme @types/<package-name>.

Le didacticiel que vous utilisez suggère d'utiliser typings, mais cela n'est plus utilisé depuis TypeScript 2.0 (voir Deprecation Notice: Regarding TypeScript@2.0). Le tutoriel semble être obsolète, même au moment de l'écriture, et il ne couvre pas vraiment plus (ou plus en détail) que les documents officiels du webpack Webpack - TypeScript.