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

Question

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

Answer 1

出于某种原因,jquery-ui没有与webpack玩得很好.我不得不要求jquery-ui-bundle.

npm i -S jquery-ui-bundle

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

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

Answer 2

jquery-ui-dist并且jquery-ui-bundle似乎没有由jquery-ui团队维护.在jquery-ui jquery-uiv1.12 之后可以使用来自npm 的官方包和webpack.

通过更新package.json和更新jquery-ui到1.12 npm install.

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

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

如果您已经使用require("jquery-ui")过,则需要使用每个小部件的单独导入替换它.我认为新方法更好,因为它只捆绑我们需要使用的小部件的代码.

请参阅有关使用1.12官方npm软件包的文档.

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中包含两个别名

1. node_modules文件夹
2. 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包不是预先构建的,因此不包含jquery-ui.js; 包将需要在使用之前构建或者包含/单独使用的所有小部件.

我获得整个软件包工作的最快方法是首先下载可分发版本:

npm install jquery-ui-dist --save

我需要添加别名jquery-ui-dist以避免"无法找到模块"错误(使用只是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'); 

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

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

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

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

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

它将提供模块名称'jquery'.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.