Travis CI，Mocha 测试，Webpack 编译错误：找不到模块：'jQuery'答案

【问题标题】：Travis CI, Mocha Test, Webpack Compilation Error: Module not found: 'jQuery'Travis CI，Mocha 测试，Webpack 编译错误：找不到模块：'jQuery'
【发布时间】：2018-02-03 06:20:21
【问题描述】：

我一直在尝试使用 mocha-webpack 和 Travis CI 为我的存储库设置自动化测试。我的测试在我的本地机器上运行良好，但他们还不能通过 Travis 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"

开发依赖

"@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

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"

tsconfig.json

{
    "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/*"
    ]
}

【问题讨论】：

标签： jquery typescript webpack mocha.js travis-ci

【解决方案1】：

我通过一些实验弄明白了。

我的 webpack.config.js 已将 jquery 定义为外部：

externals: ["jquery", "moment"]

这导致模块从环境中移除。但是，我似乎能够通过 ProvidePlugin 让它在我的本地机器上运行：

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

注意 jQuery 中的大写 Q。对于我的本地环境，jQuery（它没有被删除，因为它没有在 externals 行中定义）被定义为 jquery 模块，但是在 travis-ci 上，它无处可寻。我仍然不确定为什么“jQuery”首先对我有用。

通过从配置中删除 externals 行，并将 jQuery 更改为全部小写，它解决了我的问题：

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

【讨论】：