Travis CI,Mocha Test,Webpack编译错误:未找到模块:' jQuery'

时间:2017-08-25 08:30:11

标签: jquery typescript webpack mocha travis-ci

我一直在尝试使用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"

dev dependencies

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

1 个答案:

答案 0 :(得分:1)

我通过一些实验得出结论。

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

externals: ["jquery", "moment"]

这导致模块从环境中删除。但是,我似乎能够通过ProvidePlugin在本地盒子上运行它:

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

注意jQuery中的大写Q.对于我的本地环境,jQuery(未被删除,因为它没有在外部行中定义)被定义为jquery模块,但是在travis-ci上,它无处可寻。我仍然不确定为什么“jQuery”首先为我工作。

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

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