Travis CI,摩卡测试,Webpack编译错误:找不到模块:'jQuery'
问题描述:
我一直在尝试使用mocha-webpack和Travis CI为我的资源库设置自动化测试。我的测试在我的本地机器上运行良好,但他们还没有通过Travis CI完成。我一直无法弄清楚这最后一个错误:Travis CI,摩卡测试,Webpack编译错误:找不到模块:'jQuery'
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试图通过我的WebPack加入到解决jQuery的模块(我假设进口.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/*"
]
}
答
我想通了,通过一些试验。
我webpack.config.js已定义的jquery作为外部:
externals: ["jquery", "moment"]
这导致能够从环境中除去该模块。但是,我似乎能够得到它通过ProvidePlugin在我的本地框运行:
new webpack.ProvidePlugin({
$: "jQuery",
jQuery: "jQuery"
})
注意jQuery中的大写Q值。对于我的本地环境,jQuery(未被删除,因为它没有在外部行中定义)被定义为jquery模块,但是在travis-ci中,它并没有找到。我仍然不确定为什么“jQuery”首先为我工作。
通过从配置中的外部线路,并改变了jQuery是所有小写字母,它解决了我的问题:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})