0

jQuery UI 具有全局可用的便捷函数，例如 Sine、Circ、Elastic、Back、Bounce 等。但是当使用 webpack 包含 jQuery UI 时，全局函数变得不可用。以下代码失败：

function setup_sidebar_menu()
{
    var $ = jQuery,
        $items_with_submenu   = public_vars.$sidebarMenu.find('li:has(ul)'),
        submenu_options       = {
            submenu_open_delay: 0.25,
            submenu_open_easing: Sine.easeInOut,
            submenu_opened_class: 'opened'
        },
        root_level_class      = 'root-level',
        is_multiopen          = public_vars.$mainMenu.hasClass('multiple-expanded');

因为正弦是未定义的。使用 webpack 时，有什么方法可以让这些 jQuery UI 函数在全球范围内可用？例如，$ 全局可用，jQuery 也全局可用。$.ui 也可用。

配置如下：

环境.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    JQuery: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'], // for Bootstrap 4
}))

module.exports = environment

应用程序.js

var jQuery = require("jquery")
// import jQuery from "jquery";
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

import 'webpack-jquery-ui'

正如我所说，jQueryUI 库已正确加载并通过 $.ui 可用，问题涉及全局函数。

在此处输入图像描述

更新： 似乎正确的解决方案是在packs目录中从头开始创建新的 js 脚本文件并重新编写有效的 ES6 / ES7。这种方法出现的问题是无法导入 jquery-ui 全局函数 Sine、Circ、Elastic、Back、Bounce：

全部失败，Sine 和任何其他类似的全局函数始终未定义：

import {Sine} from 'jquery-ui/ui/effect'
// or
import {Sine} from 'jquery-ui'
// or 
import {Sine} from 'webpack-jquery-ui'

console.log(Sine)

这里有什么问题？

4

2 回答 2

0

你可能不想听到这个，但我的感觉是你有点违背模块化 javascript 的一般精神，这并不意味着（作为一个特性）鼓励像这样的全局代码。

你可能可以让它工作，但它看起来很像一种“老派”的编写 JS 的方法，其中库在全球范围内可用。

在过去，当我真的需要一些全局的东西时，我会在窗口上创建一个对象，比如window.APP = {}在 JS 链的顶部，然后将我真正想要全局的东西塞进去，比如事件发射器和来自的 ENV 信息服务器。我不知道我是否会推荐这种方法，我觉得代码有点臭，但我仍然在几个应用程序中这样做了。

但我的一般感觉是，你在这里感受到的痛苦是违背常规的。并不意味着你不应该，但不妨让你停下来考虑如何做到这一点。

也许你应该把它放在它自己的文件中/packs并导入Sine？

也就是说，我已经看到这可能有效，尽管我自己没有使用过：

import $ from 'jquery';
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.min.css';

这可能会增加Sineon $?

于 2020-06-25T06:49:11.543 回答
0

正确的方法是在packs目录中定义一个新模块，然后在 ES6 中复制粘贴或重写所有需要的全局 jQuery-UI 函数。从该模块导出函数，然后将其导入使用它的模块。例如，我创建了具有以前全局 jQuery-UI 函数的 ES6 模块：

应用程序/javascript/packs/jquery-ui-es6-migrations.js

const Sine = (p) => {
  return 1 - Math.cos( p * Math.PI / 2 );
}

const Circ = (p) => {
  return 1 - Math.sqrt( 1 - p * p );
}

const Elastic = (p) => {
  return p === 0 || p === 1 ? p :
    -Math.pow( 2, 8 * ( p - 1 ) ) * Math.sin( ( ( p - 1 ) * 80 - 7.5 ) * Math.PI / 15 );
}

const Back = (p) => {
  return p * p * ( 3 * p - 2 );
}

const Bounce = (p) => {
  var pow2,
    bounce = 4;

  while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
  return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
}

export {Sine, Circ, Elastic, Back, Bounce}

在另一个 ES6 模块中简单地导入这些函数：

import {Sine, Circ, Elastic, Back, Bounce} from './jquery-ui-es6-migrations'

而已。一切都像魅力一样！

于 2020-06-27T15:16:13.540 回答