Travis CI、Mocha Test、Webpackコンパイルエラー：モジュールが見つかりません： 'jQuery'

Question

私はmocha-webpackとTravis CIを使ってリポジトリの自動テストを設定しようとしています。私のテストは私のローカルマシン上でうまく動作しますが、トラビスCIをまだ完成させることはできませんでした。私はこの最後のエラーを把握することができていない：

WEBPACK Failed to compile with 1 error(s) 
Error in ./src/ts/myfile.ts 
Module not found: 'jQuery' in '/home/travis/build/myname/myrepo/src/ts' 

エラーメッセージのオフに基づいて、WebPACKのはjQueryのモジュールを解決しようとしているように見えます（私は輸入が私のWebPACKを介して追加されると仮定しています.ProvidePlugin呼び出し、myfile.tsにjqueryのインポートがないため）、node_modulesで探すのではなく、自分のファイルに入れます。

テストスクリプト

mocha-webpack --webpack-config webpack.config.js --require jsdom-global/register 

依存性

"jquery": "^3.2.1" 

DEV依存

"@types/chai": "^4.0.4" 
"@types/jquery": "3.2.0" 
"@types/mocha": "^2.2.42" 
"chai": "^4.1.1" 
"css-loader": "^0.28.5" 
"jsdom": "^11.2.0", 
"jsdom-global": "^3.0.2" 
"mocha": "^3.5.0" 
"mocha-typescript": "^1.1.7" 
"mocha-webpack": "^1.0.0-rc.1" 
"sass-loader": "^6.0.6" 
"ts-loader": "^2.3.3" 
"typescript": "^2.4.2" 
"webpack": "^3.5.5" 

webpack.config.js

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "noImplicitAny": true, 
     "removeComments": true, 
     "sourceMap": true, 
     "target": "es5", 
     "lib": ["es2016", "dom"], 
     "typeRoots": [ 
      "node_modules/@types" 
     ], 
     "experimentalDecorators": true // For the decorators in Mocha tests. 
    }, 
    "compileOnSave": true, 
    "include": [ 
     "src/**/*", 
     "test/*" 
    ] 
} 

Answer 1

tsconfig.json

const webpack = require("webpack"); 
module.exports = { 
    target: "node", 
    externals: ["jquery", "moment"], 
    resolve: { 
    extensions: [".ts", ".js"] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.ts$/, loader: "ts-loader" }, 
     { test: /\.scss$/, loaders: ['css-loader/locals?modules', 'sass-loader'] }  
    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jQuery", 
     jQuery: "jQuery" 
    }) 
    ] 
} 

トラヴィス

language: node_js 
node_js: 
    - "node" 

cache: 
    directories: 
    - "node_modules" 

私はいくつかの実験を通してそれを考え出しました。

私webpack.config.jsは、外部とのjQueryを定義していた：これは、モジュールは、環境から削除される原因となった

externals: ["jquery", "moment"] 

。しかし、私は、一見それはProvidePluginを通じて私の地元のボックス上で実行するために取得することができた：

new webpack.ProvidePlugin({ 
    $: "jQuery", 
    jQuery: "jQuery" 
}) 

はjQueryのでは大文字のQを注意してください。私のローカル環境では、jQueryモジュール（externals行に定義されていないので削除されなかった）はjqueryモジュールとして定義されていましたが、travis-ciではどこにも見つかりませんでした。私はまだ、なぜ "jQuery"が私のために働いたのかはまだ分かりません。設定から見た目の行を削除し、すべて小文字であることをjQueryのを変更することにより

は、それは私の問題を修正：

new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery" 
})