需要在全局级别使用jQuery来使用Jquery UI模块

时间:2016-07-23 20:51:15

标签: jquery jquery-ui typescript angular webpack

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

我尝试过的方法:

$,jQuery和window.jQuery的ProvidePlugin, 暴露装载机 进口装载机 在我的堆栈中的不同位置需要jQuery的各种其他组合 我在这里显然遗漏了一些东西。每次我写入导入“jquery-ui”时,我都会得到“jQuery未定义

感谢。

我的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;

1 个答案:

答案 0 :(得分:1)

处理此问题的几种方法:

1-将jquery导入index.html中的脚本。这应该是直截了当的。

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 install来安装它:这里是定义:

Jquery Typings

在你的app.ts(根组件)里面

  declare var jQuery : JQueryStatic;

看看我的另一个answer