需要在全局级别使用 jQuery 才能与 Jquery UI 模块一起使用

Question

我正在研究 Angular 2，我想在其中需要来自 Jquery ui 的 jQuery。每个模块通过访问全局变量将自己添加到 jQuery。我花了几个小时搜索 Github 和 Stackoverflow（以及其他随机网站）的几乎每个角落，寻找解决方案，但到目前为止，还没有一个有效。

我尝试过的方法：

为 $、jQuery 和 window.jQuery 提供插件， 暴露装载机 进口装载机 在我的堆栈中的不同位置需要 jQuery 的各种其他组合 我显然在这里遗漏了一些东西。每次我写 import "jquery-ui" 时，我都会得到 "jQuery is not defined

谢谢。

我的 webpack.config.js（用于开发）

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');


var commonConfig = {
  resolve: {
    extensions: ['', '.ts', '.js'],
    alias: {
      'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
    }
  },
  module: {
    loaders: [
      // TypeScript
      { test: /\.ts$/, loaders: ['ts-loader'] },

      { test: /\.css$/, loaders: ['style','css'] },
      {
        test: /\.html/,
        loader: 'html',
        query: {
          minimize: true,
          removeAttributeQuotes: false,
          caseSensitive: true,
          // Teach html-minifier about Angular 2 syntax
          customAttrSurround: [
            [/#/, /(?:)/],
            [/\*/, /(?:)/],
            [/\[?\(?/, /(?:)/]
          ],
          customAttrAssign: [/\)?\]?=/]
        }
      },
      { test: /\.scss$/, loaders: ['to-string', 'css', 'postcss', 'resolve-url', 'sass?sourceMap'] },
      { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
    ]
  },
  'uglify-loader': {
    mangle: false
  },
  postcss: function () {
    return [autoprefixer];
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.DefinePlugin({
      ENV: JSON.stringify(process.env.ENV)
    })
  ],
  devtool: process.env.ENV == 'dev'? 'source-map' : null
};

module.exports=commonConfig;

Answer 1

几种处理方法：

1- 在 index.html 中将 jquery 作为脚本导入。这应该很简单。

2- 通过 webpack 导入；

在你的 webpack common 中；

alias: {
  "jquery-ui": "jquery-ui/jquery-ui.js"
}
.
.
.
plugins: [
  new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery'
    })
  , and the rest of you plugins 
 ]

在你的打字中：

1- 下载源代码并将其放在您的文件夹中的某个地方

2- 或者使用typings install 来安装它：这里是定义：

Jquery Typings

在你的 app.ts 中（根组件）

  declare var jQuery : JQueryStatic;

看看我的另一个answer