jquery-ui和webpack，如何管理成模块？

Question

知道如何处理吗？我的意思是 jquery-ui 似乎不是 amd，我不知道如何管理它，知道吗？

Answer 1

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

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"),

确保 jquery 首先加载到您的应用程序启动文件中。

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

如果您需要使用主题，请配置 css-loader 和 file-loader。不要忘记 npm install 那些加载器。

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 2

出于某种原因 jquery-ui 与 webpack 的配合不佳。我不得不要求 jquery-ui-bundle 相反。

npm i -S jquery-ui-bundle

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

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

Answer 3

接受的答案对我不起作用，因为 NPM 上的 jQuery-ui 包不是 pre-built，因此不包含 jquery-ui.js;该软件包在使用前需要 built 或所有小部件单独 included/used。

Qui我让整个包工作的最简单方法是首先下载可分发版本：

npm install jquery-ui-dist --save

我需要为 jquery-ui-dist 添加别名以避免出现 'Cannot find module' 错误（仅使用 require('jquery-ui-dist') 是行不通的，因为 .js 文件名不同），方法是添加这对 webpack.config.js:

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

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

var jQuery = require('jquery');
require('jquery-ui');

或者，通过在 webpack.config.js 中使用 ProvidePlugin，您可以避免在加载模块时必须 require 脚本，并且必须将 jQuery 声明为变量：

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

Answer 4

jquery-ui-dist 和 jquery-ui-bundle 似乎不是由 jquery-ui 团队维护的。在 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")，则需要将其替换为每个小部件的单独导入。我认为新方法更好，因为它只会捆绑我们需要使用的小部件的代码。

请参阅 documentation 使用 1.12 官方 npm 包。

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

您必须为所有 PUT、POST 和 DELETE 请求传递一个 authenticity_token 参数。

要做到这一点，您通常可以使用 $('[name="csrf-token"]')[0].content

从 header 中获取它

所以你的请求应该是这样的：

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({...

你应该添加 'jquery': 'jquery/src/jquery' 到 webpack 配置文件中的别名:

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

它将提供模块名称'jquery'。 jQuery UI 在初始化时检查此名称。

然后在你的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 中）以全局设置 $ and jquery and jQuery:

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

Require 任何你想要的 jquery-ui 包裹，在你的包裹的顶部（例如在 /javascript/packs/application.js 的顶部：

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", 
}

对我有用

Answer 8

您应该导入所有这些并检查哪些是您真正需要的。

require('jquery-ui/ui/core.js');
require('jquery-ui/ui/data.js');
require('jquery-ui/ui/form.js');
require('jquery-ui/ui/form-reset-mixin.js');
require('jquery-ui/ui/focusable.js');
require('jquery-ui/ui/disable-selection.js');
require('jquery-ui/ui/plugin.js');
require('jquery-ui/ui/labels.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/scroll-parent.js');
require('jquery-ui/ui/tabbable.js');
require('jquery-ui/ui/unique-id.js');
require('jquery-ui/ui/widget.js');
require('jquery-ui/ui/widgets/accordion.js');
require('jquery-ui/ui/widgets/autocomplete.js');
require('jquery-ui/ui/widgets/button.js');
require('jquery-ui/ui/widgets/checkboxradio.js');
require('jquery-ui/ui/widgets/controlgroup.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/draggable.js');
require('jquery-ui/ui/widgets/droppable.js');
require('jquery-ui/ui/widgets/menu.js');
require('jquery-ui/ui/widgets/mouse.js');
require('jquery-ui/ui/widgets/progressbar.js');
require('jquery-ui/ui/widgets/resizable.js');
require('jquery-ui/ui/widgets/selectable.js');
require('jquery-ui/ui/widgets/selectmenu.js');
require('jquery-ui/ui/widgets/slider.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/spinner.js');
require('jquery-ui/ui/widgets/tabs.js');
require('jquery-ui/ui/widgets/tooltip.js');
require('jquery-ui/ui/effect.js');
require('jquery-ui/ui/effects/effect-blind.js');
require('jquery-ui/ui/effects/effect-bounce.js');
require('jquery-ui/ui/effects/effect-clip.js');
require('jquery-ui/ui/effects/effect-drop.js');
require('jquery-ui/ui/effects/effect-explode.js');
require('jquery-ui/ui/effects/effect-fade.js');
require('jquery-ui/ui/effects/effect-fold.js');
require('jquery-ui/ui/effects/effect-highlight.js');
require('jquery-ui/ui/effects/effect-puff.js');
require('jquery-ui/ui/effects/effect-pulsate.js');
require('jquery-ui/ui/effects/effect-scale.js');
require('jquery-ui/ui/effects/effect-shake.js');
require('jquery-ui/ui/effects/effect-size.js');
require('jquery-ui/ui/effects/effect-slide.js');
require('jquery-ui/ui/effects/effect-transfer.js');
require('jquery-ui/ui/vendor/jquery-color/jquery.color.js');

jquery-ui和webpack，如何管理成模块？

jquery-ui and webpack, how to manage it into module?

jquery-ui

webpack

webpack-jquery-ui

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