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


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

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

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这样的每个小部件。

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

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

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

相关讨论

由于某些原因，jquery-ui与webpack的配合不好。我不得不要求jquery-ui-bundle代替。

npm i -S jquery-ui-bundle

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

1
2
require('jquery');
require('jquery-ui-bundle');
相关讨论

幸运的是，我昨天才这样做，这很容易。

1
npm install --save jquery jquery-ui

确保您拥有要使用webpack.config.js中的插件解析的jquery别名

1
2
3
4
5
6
7
8
...
plugins: [
    new webpack.ProvidePlugin({
     "$":"jquery",
     "jQuery":"jquery",
     "window.jQuery":"jquery"
    }),
...

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

  • node_modules文件夹
  • jquery-ui文件夹

    • ````

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

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

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

    如果您需要使用主题，请配置css-loader和file-loader。不要忘记npm安装那些装载程序。

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

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

    1
    2
    require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
    require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");
    相关讨论

    webpack-jquery-ui

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

    1
     yarn add webpack-jquery-ui

    jQuery UI插件启动时，它将检查是否提供了jquery，因此

    将此代码添加到webpacker配置文件(shared.js-如果与Rails 5一起使用)

    1
    2
    3
    4
    5
    6
    7
    8
    plugins: [
      new webpack.ProvidePlugin({
          $:"jquery",
          jQuery:"jquery",
         "window.jQuery":"jquery'",
         "window.$":"jquery"
      })
    ]

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

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

    修复jquery.ajax中的ActionController::InvalidAuthenticityToken

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

    为此，通常可以使用$('[name="csrf-token"]')[0].content从标题中获取它

    因此，您的请求将类似于：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var that = this;
    $.ajax({
      url: navigator_item.url,
      data: { authenticity_token: $('[name="csrf-token"]')[0].content},
      method: 'DELETE',
      success: function(res) {
       ...
      }
    });

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

    而不是使用：

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

    您应该在Webpack配置文件的别名中添??加'jquery'：'jquery / src / jquery'：

    1
    2
    3
    4
    5
    6
    module.exports = {
      resolve: {
        alias: {
            'jquery': 'jquery/src/jquery'
        }
      }

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

    然后在您的app.js文件中编写：

    1
    2
    3
    4
    5
    6
    7
    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.
    相关讨论

    接受的答案对我不起作用，因为NPM上的jQuery-ui包不是预先构建的，因此不包含jquery-ui.js；该软件包将需要在使用前构建，或者单独包含/使用的所有小部件。

    使整个程序包正常运行的最快方法是首先下载可分发的版本：

    1
    npm install jquery-ui-dist --save

    我需要为jquery-ui-dist添加一个别名，以避免出现"找不到模块"错误(仅使用require('jquery-ui-dist')无效，因为.js文件名不同)，方法是将其添加到webpack.config.js中：

    1
    2
    3
    4
    5
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    },

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

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

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

    1
    2
    3
    4
    5
    6
    7
     plugins: [
        new webpack.ProvidePlugin({
            'jQuery': 'jquery',
            '$': 'jquery',
            'global.jQuery': 'jquery'
        })
    ],
    相关讨论

    对我有用的步骤(在Rails 5.1.6项目中)与上述任何步骤都不相同：

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    environment.plugins.prepend(
      'Provide',
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        jquery: 'jquery'
      })
    )

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

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

    然后，您可以在包中的任意位置调用$('.selector').sortable()。

    使用以下命令在您的node_modules中添加jquery；

    1
    npm install --save jquery jquery-ui

    并在您的webpack.config.js中添加外部组件，例如；

    ...

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

    它对我有用