Magento 2:时刻未定义
Magento 2: moment is not defined
我正在尝试在我的 Magento 2 网站上使用 Shipping Time JS 插件,它需要 moment.js 和 jQuery 才能工作,但它不工作。我在第 49 行的 shiptime.js 中收到 ReferenceError: moment is not defined 如下:
try {
if (moment === undefined || $ === undefined ) throw Error("please include jquery & moment.js");
} catch (e) {
console.log(e);
}
==============
我的require.js
这是我的 requirejs-config.js 的样子,它位于 app/design/frontend/##/##/requirejs-config.js:
var config = { // eslint-disable-line no-unused-vars
packages: [{
name: 'momentjs',
location: 'js/',
main: 'moment'
}],
map: {
'*': {
'menu': 'Magento_Theme/js/disable-menu',
'shippingtime': 'js/shiptime'
}
},
shim: {
'momentjs': {
deps: ['jquery']
},
'shippingtime': {
deps: ['jquery',',momentjs']
}
}
};
jQuery 在其他地方加载并且肯定正在加载(我有各种其他 jQuery 库都在工作)。
==============
调试
我最初认为 moment.js/shiptime.js 文件没有被加载,但是当我检查源和网络面板时它们被加载了。为了进一步测试这一点,我执行了以下操作以查看 moment.js 是否会输出任何内容:
require(['momentjs'], function (moment) {
console.log(moment().format('LLLL'));
});
这确实在控制台中输出了日期,所以 moment.js 肯定正在加载,这是我的 shiptime.js 文件代码,它不起作用并给我上面提到的错误:
require(['jquery', 'shippingtime', 'momentjs'], function (moment) {
jQuery(document).ready(function () {
jQuery(function($) {
jQuery('.shipping-time').shipTime();
});
});
});
如有任何建议,我们将不胜感激!
自从我与 requirejs
一起工作以来已经有一段时间了,但是由于没有比我更聪明的人插话,所以我很乐意帮助您继续进行故障排除。将 jQuery
与 requirejs
一起使用可能会很棘手,尤其是对于像 Magento 这样的大型复杂平台。
如果无法看到您的所有代码,我会考虑并调查以下内容:
- 如有必要,您是否以无冲突的方式正确初始化
jQuery
- 您是否按预期使用
require()
与 define()
- 您是否熟悉使用
requirejs
时 Magento
所面临的独特挑战
- 您是否阅读并遵循了有关将
moment
与 requirejs
一起使用的复杂性的建议
这里有一些对应的读物:
- On No-Conflict
- require() vs define() plus other good insights
- On Magento 2 with RequireJS
- 关于 Moment 和 RequireJS 的复杂性
最后一件事要尝试:
在您的最终代码示例中,您将 moment
传递给函数而不是 jQuery
。您是否尝试过以下方式:
require(['jquery', 'momentjs', 'shippingtime'], function($, moment) {
$(document).ready(function() {
$('.shipping-time').shipTime();
});
});
我正在尝试在我的 Magento 2 网站上使用 Shipping Time JS 插件,它需要 moment.js 和 jQuery 才能工作,但它不工作。我在第 49 行的 shiptime.js 中收到 ReferenceError: moment is not defined 如下:
try {
if (moment === undefined || $ === undefined ) throw Error("please include jquery & moment.js");
} catch (e) {
console.log(e);
}
==============
我的require.js
这是我的 requirejs-config.js 的样子,它位于 app/design/frontend/##/##/requirejs-config.js:
var config = { // eslint-disable-line no-unused-vars
packages: [{
name: 'momentjs',
location: 'js/',
main: 'moment'
}],
map: {
'*': {
'menu': 'Magento_Theme/js/disable-menu',
'shippingtime': 'js/shiptime'
}
},
shim: {
'momentjs': {
deps: ['jquery']
},
'shippingtime': {
deps: ['jquery',',momentjs']
}
}
};
jQuery 在其他地方加载并且肯定正在加载(我有各种其他 jQuery 库都在工作)。
==============
调试
我最初认为 moment.js/shiptime.js 文件没有被加载,但是当我检查源和网络面板时它们被加载了。为了进一步测试这一点,我执行了以下操作以查看 moment.js 是否会输出任何内容:
require(['momentjs'], function (moment) {
console.log(moment().format('LLLL'));
});
这确实在控制台中输出了日期,所以 moment.js 肯定正在加载,这是我的 shiptime.js 文件代码,它不起作用并给我上面提到的错误:
require(['jquery', 'shippingtime', 'momentjs'], function (moment) {
jQuery(document).ready(function () {
jQuery(function($) {
jQuery('.shipping-time').shipTime();
});
});
});
如有任何建议,我们将不胜感激!
自从我与 requirejs
一起工作以来已经有一段时间了,但是由于没有比我更聪明的人插话,所以我很乐意帮助您继续进行故障排除。将 jQuery
与 requirejs
一起使用可能会很棘手,尤其是对于像 Magento 这样的大型复杂平台。
如果无法看到您的所有代码,我会考虑并调查以下内容:
- 如有必要,您是否以无冲突的方式正确初始化
jQuery
- 您是否按预期使用
require()
与define()
- 您是否熟悉使用
requirejs
时 - 您是否阅读并遵循了有关将
moment
与requirejs
一起使用的复杂性的建议
Magento
所面临的独特挑战
这里有一些对应的读物:
- On No-Conflict
- require() vs define() plus other good insights
- On Magento 2 with RequireJS
- 关于 Moment 和 RequireJS 的复杂性
最后一件事要尝试:
在您的最终代码示例中,您将 moment
传递给函数而不是 jQuery
。您是否尝试过以下方式:
require(['jquery', 'momentjs', 'shippingtime'], function($, moment) {
$(document).ready(function() {
$('.shipping-time').shipTime();
});
});