在Rails 6中使用webpack提供jQuery用户界面全局功能
jQuery UI具有全局可用的方便函数，如正弦、圆环、弹性、回弹、弹跳等。但是当使用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');因为Sine还没有定义。在使用webpack时，有没有办法使这些jQuery用户界面功能在全球范围内可用？例如，$在全球范围内可用，jQuery也在全球范围内可用。$.ui也是可用的。
配置如下：
environment.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 = environmentapplication.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全局函数--正弦、Circ、弹性、Back、弹跳：
所有这些都失败了，Sine和任何其他类似的全局函数总是未定义的：
import {Sine} from 'jquery-ui/ui/effect'
// or
import {Sine} from 'jquery-ui'
// or
import {Sine} from 'webpack-jquery-ui'
console.log(Sine)这里怎么了？
回答 2
Stack Overflow用户
发布于 2020-06-27 15:16:13
正确的方法是在packs目录中定义一个新模块，并在ES6中复制、粘贴或重写所有需要的全局jQuery函数。从该模块导出函数并将其导入正在使用它的模块中。例如，我创建了带有以前全局jQuery函数的ES6模块：
app/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'就这样。一切都像魅力一样运作！
Stack Overflow用户
发布于 2020-06-25 06:49:11
您可能不想听这些，但我的感觉是，您的工作违背了模块化javascript的一般精神，这并不是为了(作为一个特性)鼓励这样的全局代码。
您可能会让它起作用，但这似乎是一种“老派”的方法，可以在全球范围内使用lib来编写JS。
过去，当我真的需要一些全局的东西时，我会在窗口上创建一个对象，比如JS链顶部的window.APP = {}，以及我真正想要成为全局的东西，比如事件发射器，以及来自服务器的ENV信息。我不知道我是否会推荐这种方法，它让我觉得代码有点难闻，但我还是在几个应用程序中这么做。
但我的一般感觉是，你在这里所感受到的痛苦是关于违背常规的。并不意味着你不应该这样做，但最好让你停下来考虑一下其他的方法。
也许您应该将其放在/packs中的自己的文件中并导入Sine。
话虽如此，我已经看到这可能会奏效，尽管我自己还没有用过：
import $ from 'jquery';
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.min.css';这可能会添加Sine on $
https://stackoverflow.com/questions/62554794
复制相似问题
腾讯云开发者
