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

Question

我正在开发angular 2，其中我希望从jQuery ui中使用Jquery。每个模块通过访问全局变量将自身添加到jQuery中。我几乎花了几个小时在Github和Stackoverflow (以及其他随机网站)的每个角落寻找解决方案，但到目前为止，还没有一个有效的解决方案。

我尝试过的方法：

用于$、jQuery和window.jQuery的ProvidePlugin，公开加载器导入加载器在堆栈中的不同位置需要jQuery的各种其他组合我显然遗漏了一些东西。每次我编写导入"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-将jquery作为脚本导入你的index.html .This应该是直截了当的。

2-通过webpack导入；

在你的webpack共同的；

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来安装它:定义如下：

Jquery Typings

在您的app.ts (根组件)中

  declare var jQuery : JQueryStatic;

看看我的另一个to answer