任何想法如何处理?我的意思是jquery-ui似乎不是amd而且我不知道如何管理它,任何想法?
答案 0 :(得分:60)
出于某些原因jquery-ui
与网络包没有好玩。我不得不要求jquery-ui-bundle
。
npm i -S jquery-ui-bundle
然后在jquery之后需要它,例如
require('jquery');
require('jquery-ui-bundle');
答案 1 :(得分:50)
jquery-ui-dist
和jquery-ui-bundle
。在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")
之前需要将其替换为每个小部件的单独导入。我认为新方法更好,因为它只会捆绑我们需要使用的小部件的代码。
使用1.12官方npm包查看documentation。
答案 2 :(得分:31)
你很幸运我昨天这样做了,这很容易。
npm install --save jquery jquery-ui
确保你有jquery别名来解决webpack.config.js中的插件
...
plugins: [
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
}),
...
然后在webpack.config.js中包含两个别名
``````
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");
答案 3 :(得分:12)
接受的答案对我不起作用,因为NPM上的jQuery-ui包没有预先构建,因此不包含tsc
;包需要在使用前构建,要么包含/单独使用的所有小部件。
我得到整个软件包的最快方法是首先下载可分发版本:
jquery-ui.js
我需要为npm install jquery-ui-dist --save
添加别名,以避免“无法找到模块”错误(仅使用jquery-ui-dist
将无法正常工作,因为.js文件名不同),通过将其添加到require('jquery-ui-dist')
:
webpack.config.js
最后,您可以在加载模块的.js文件中使用它:
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
},
或者,您可以通过在webpack.config.js中使用ProvidePlugin来避免在加载模块时必须var jQuery = require('jquery');
require('jquery-ui');
脚本,并且必须将jQuery声明为变量:
require
答案 4 :(得分:9)
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) {
...
}
});
而不是使用:
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.
答案 5 :(得分:0)
对我来说有效的步骤(在Rails 5.1.6项目中)与上述任何步骤都不相同:
安装jquery和jquery-ui:yarn add jquery
和yarn add jquery-ui
将以下内容添加到webpack配置中(即/config/webpack/environment.js
中)以全局设置$以及jquery和jQuery:
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
在包的顶部(例如,/javascript/packs/application.js
的顶部,需要您想要的单个jquery-ui软件包)
require("jquery-ui/ui/widgets/sortable")
然后,您可以在背包中的任何地方打电话给$('.selector').sortable()
。
答案 6 :(得分:0)
使用以下方式在您的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",
}
对我有用