我似乎无法找出正确的方法来加载相互依赖的第三方库。我将TypeScript和Gulp与Webpack或SystemJS一起用于我的模块加载器,在本例中,这两个模块都有类似的错误。如果我只使用jQuery,我的应用程序代码可以工作,但是如果我尝试使用jQuery插件,比如jQuery验证,我会从Webpack和SystemJS中得到类似的错误,关于jQuery未定义。
这两种设置都有很多配置,我将在这里演示我最近的Webpack尝试:
我的main.ts
文件:
import * as $ from "jquery";
// if I comment out these two imports, the '$("body").css...' line works
import "../bower_components/jquery-validation/dist/jquery.validate";
import "../bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive";
$("body").css("color", "red");
var gulp = require('gulp'),
webpack = require("gulp-webpack");
gulp.task("tsc-webpack", function () {
return gulp.src("app/main.ts")
.pipe(webpack({
output: {
filename: "main.js"
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" }
]
}
}))
.pipe(gulp.dest(appDir + "js"))
});
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
Uncaught ReferenceError: jQuery is not defined
at Object.<anonymous> (main.js:12312)
at __webpack_require__ (main.js:20)
at Object.<anonymous> (main.js:51)
at __webpack_require__ (main.js:20)
at Object.defineProperty.value (main.js:40)
at main.js:43
(function ($) {
var $jQval = $.validator,
// ...
$(function () {
$jQval.unobtrusive.parse(document);
});
}(jQuery));
对于我使用的webpack中的jquery,通常:
module: {
rules: [
{ test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
]
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
}),
]
Webpack应该识别AMD/CommonJS,jQuery-validation
看起来像是检查define
。
这里有更多关于垫片的信息:https://webpack.js.org/guides/shimming/
我不知道如何正确地连接这个插头,有人能帮助我吗? webpack.config.js如下所示;https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245 我希望这条线能解决问题;
我一直试图通过WebPack加载一个jquery插件。这个插件被打包为一个npm模块,在它的依赖项中只包括jQuery。我认为webpack会加载jquery实例,而不是使用我在全局上提供ProvidePleugin的实例。我尝试了另一篇stackoverflow文章(在webpack中管理jQuery插件依赖项)中提供的所有解决方案,但它们没有成功;结果总是一样的:“TERMINAL()不是函数
我正在尝试将bootstrap-daterangepicker与WebPack一起使用。在我的视图文件中,我有以下内容: 在中:
本文向大家介绍webpack 和 gulp 对比相关面试题,主要包含被问及webpack 和 gulp 对比时的应答技巧和注意事项,需要的朋友参考一下 Gulp就是为了规范前端开发流程,实现前后端分离、模块化开发、版本控制、文件合并与 压缩、mock数据等功能的一个前端自动化构建工具。说的形象点,“Gulp就像是一个产品的 流水线,整个产品从无到有,都要受流水线的控制,在流水线上我们可以对产品进行
我正在做一个基于前端模板的项目。 我如何添加其他jQuery插件以类似jQuery的方式工作?(当输入使用$时自动包括在内) 我公开jQuery的方法是创建ProvidePleugin:
Gulp Webpack Boilerplate �� Overview A modern JavaScript starter toolkit for web-development using Gulp task runner and Webpack bundler. Ideal for fast building static HTML sites or templates. It spee