Question

我试图在React.js应用程序中使用jQuery UI生成Slider。这基本上是我使用jQuery UI的唯一地方，所以我不想简单地在应用程序的<head>中导入jQuery UI并将其加载到不会被使用的页面上

考虑到这一点，我从npm（npm install jquery jquery-ui --save）安装了jQuery和jQuery UI。然后我将这些导入到渲染滑块组件的文件中：

import $ from 'jquery'
import {slider} from 'jquery-ui'

当我构建这个时，终端有一大堆错误说TypeError: $.extend is not a function。此错误来自node_modules/jquery-ui/jquery-ui.js。当我删除jquery-ui导入时，它们会消失（但显然滑块不再起作用）。

当我在<head>中将jQuery和jQuery UI作为两个<script>文件包含在内时，它可以完美无缺地运行。但如上所述，我不想这样做，因为它们都很少使用。

我认为这是由于Webpack不了解jQuery中的$（可能还有更多），但我对Webpack没有足够的了解来修复它。我找到了this，但是对于从接受的答案中实施哪些选项（如果这是我上述错误的原因）表示感谢。感谢您对此提出的任何建议或帮助。

编辑：我正在使用erikras的React样板文件，因此我的webpack配置文件看起来与this基本相同。我添加了

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
}),

到Plugins: []数组的底部，但仍然会出现相同的错误。我还尝试添加imports-loader代码

{ 
  test: /vendor\/.+\.(jsx|js)$/,
  loader: 'imports?jQuery=jquery,$=jquery,this=>window'
}

但这似乎也没有效果。我已将这两个添加到dev.config.js和prod.config.js。我正在使用npm run dev在本地计算机（Mac OS X）上启动服务器。

Answer 1

（我知道这是一个老问题，但我认为无论如何都需要回答清楚）

我用它来导入sortable：

import $ from 'jquery'
import sortable from 'jquery-ui/ui/widgets/sortable'

所以我猜导入滑块：

import $ from 'jquery'
import slider from 'jquery-ui/ui/widgets/slider'

webpack还需要“loading＆＃39;部分要包含在从同一版本开始的进口加载器中（可能是3个，我正在使用它）：

{
  test: /jquery-ui\/.+\.js$/,
  use: {
    loader: 'imports-loader?jQuery=jquery,$=jquery,this=>window'
  }
}

Answer 2

Use imports-loader

npm install --save-dev imports-loader

{ test: /vendor\/.+\.(jsx|js)$/,
  loader: 'imports?jQuery=jquery,$=jquery,this=>window'
}

import "jquery-ui";

使用带有React.js和Webpack的jQuery UI

2 个答案: