Javascript 使用webpack、gulp和typescript加载jQuery插件

我似乎无法找到加载相互依赖的第三方库的正确方法。我将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");

用于生成输出的gulpfile：

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"))
});

我的tsconfig.json文件：

{
"compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs"
},
"exclude": [
    "node_modules"
]
}

下面是我从Chrome开发者控制台得到的错误

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

---

通常，对于我使用的网页中的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验证

看起来像是在检查

define

此处有更多有关填隙的信息：

module: {                                
  rules: [
    {  test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
  ]
},
plugins: [
  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.jQuery': 'jquery'
  }),
]