Question

任何想法如何处理？我的意思是jquery-ui似乎不是amd而且我不知道如何管理它，任何想法？

Answer 1

出于某些原因jquery-ui与网络包没有好玩。我不得不要求jquery-ui-bundle。

npm i -S jquery-ui-bundle

然后在jquery之后需要它，例如

require('jquery');
require('jquery-ui-bundle');

Answer 2

jquery-ui团队似乎没有维护

jquery-ui-dist和jquery-ui-bundle。在jquery-ui v1.12之后可以使用来自npm的官方jquery-ui包和webpack。

通过更新package.json和npm install将jquery-ui更新为1.12。

然后你可以像这样require每个小部件。

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

如果您在使用require("jquery-ui")之前需要将其替换为每个小部件的单独导入。我认为新方法更好，因为它只会捆绑我们需要使用的小部件的代码。

使用1.12官方npm包查看documentation。

Answer 3

你很幸运我昨天这样做了，这很容易。

npm install --save jquery jquery-ui

确保你有jquery别名来解决webpack.config.js中的插件

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

然后在webpack.config.js中包含两个别名

node_modules文件夹
jquery-ui文件夹

``````

resolve : {
    alias: {
      // bind version of jquery-ui
      "jquery-ui": "jquery-ui/jquery-ui.js",      
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),

确保首先在app启动文件中加载jquery。

var $ = require("jquery"),
        require("jquery-ui");

如果需要使用主题配置css-loader和文件加载器。别忘了npm安装那些装载机。

module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.(jpe?g|png|gif)$/i, loader:"file" },

并在您的应用启动文件中使用。

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");

Answer 4

接受的答案对我不起作用，因为NPM上的jQuery-ui包没有预先构建，因此不包含tsc;包需要在使用前构建，要么包含/单独使用的所有小部件。

我得到整个软件包的最快方法是首先下载可分发版本：

jquery-ui.js

我需要为npm install jquery-ui-dist --save添加别名，以避免“无法找到模块”错误（仅使用jquery-ui-dist将无法正常工作，因为.js文件名不同），通过将其添加到require('jquery-ui-dist')：

webpack.config.js

最后，您可以在加载模块的.js文件中使用它：

resolve: {
    alias: {
        'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    }
},

或者，您可以通过在webpack.config.js中使用ProvidePlugin来避免在加载模块时必须var jQuery = require('jquery'); require('jquery-ui');脚本，并且必须将jQuery声明为变量：

require

Answer 5

的WebPack-jQuery的UI

webpack-jquery-ui - 使用此插件，例如如果您使用Rails 5，请运行

 yarn add webpack-jquery-ui

当jQuery UI插件启动时，它会检查是否提供了jquery，所以

将此代码添加到您的webpacker配置文件（shared.js - 如果您将其与Rails 5一起使用）

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery'",
      "window.$": "jquery"
  })
]

将这些行添加到您的应用代码中。

require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

修复ActionController::InvalidAuthenticityToken

中的jquery.ajax

您必须在所有authenticity_token，PUT和POST请求中传递DELETE参数。

为此，您通常可以使用$('[name="csrf-token"]')[0].content

从标题中获取它

所以你的请求看起来像是：

var that = this;
$.ajax({
  url: navigator_item.url,
  data: { authenticity_token: $('[name="csrf-token"]')[0].content},
  method: 'DELETE',
  success: function(res) {
   ...
  }
});

我以另一种方式将jQuery包含到我的应用程序中

而不是使用：

plugins: [
new webpack.ProvidePlugin({...

你应该添加＆＃39; jquery＆＃39;：＆＃39; jquery / src / jquery＆＃39;到webpack配置文件中的别名：

module.exports = {
  resolve: {
    alias: {
        'jquery': 'jquery/src/jquery'
    }
  }

它将提供模块名称＆＃39; jquery＆＃39;。 jQuery UI在init上检查此名称。

然后在app.js文件中写下：

import $ from 'jquery'

import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.

window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.

Answer 6

对我来说有效的步骤（在Rails 5.1.6项目中）与上述任何步骤都不相同：

安装jquery和jquery-ui：yarn add jquery和yarn add jquery-ui

将以下内容添加到webpack配置中（即/config/webpack/environment.js中）以全局设置$以及jquery和jQuery：

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery'
  })
)

在包的顶部（例如，/javascript/packs/application.js的顶部，需要您想要的单个jquery-ui软件包）

require("jquery-ui/ui/widgets/sortable")

然后，您可以在背包中的任何地方打电话给$('.selector').sortable()。

Answer 7

使用以下方式在您的node_modules中添加jquery：

npm install --save jquery jquery-ui

并在webpack.config.js中添加外部元素，例如；

...

  externals: {
// require("jquery") is external and available
//  on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js", 
}

对我有用

jquery-ui和webpack，如何将其管理到模块中？

7 个答案:

的WebPack-jQuery的UI

我以另一种方式将jQuery包含到我的应用程序中