[英]Webpack - export window.function failing
我在的WebPack總新手,我已經開始用3天前改變我們如何加載我們的JavaScript。
正在運行的webpack之前的代碼用於實現“著名的”淡入淡出效果(源gist.github.com/paulirish/1579671)
window.requestNextAnimationFrame =
(function () {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;
// Workaround for Chrome 10 bug where Chrome
// does not pass the time to the animation function
if (window.webkitRequestAnimationFrame) {
// Define the wrapper
wrapper = function (time) {
if (time === undefined) {
time = +new Date();
}
self.callback(time);
};
// Make the switch
originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;
window.webkitRequestAnimationFrame = function (callback, element) {
self.callback = callback;
// Browser calls the wrapper and wrapper calls the callback
originalWebkitRequestAnimationFrame(wrapper, element);
}
}
// Workaround for Gecko 2.0, which has a bug in
// mozRequestAnimationFrame() that restricts animations
// to 30-40 fps.
if (window.mozRequestAnimationFrame) {
// Check the Gecko version. Gecko is used by browsers
// other than Firefox. Gecko 2.0 corresponds to
// Firefox 4.0.
index = userAgent.indexOf('rv:');
if (userAgent.indexOf('Gecko') != -1) {
geckoVersion = userAgent.substr(index + 3, 3);
if (geckoVersion === '2.0') {
// Forces the return statement to fall through
// to the setTimeout() function.
window.mozRequestAnimationFrame = undefined;
}
}
}
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback, element) {
var start,
finish;
window.setTimeout( function () {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
};
}
)
();
// It's then used here in our code here:
loadIcons();
function loadCompanyIcons() {
var elements = document.querySelectorAll('img');
if (!elements) return;
Array.prototype.forEach.call(elements, function(el, i){
var watcher = scrollMonitor.create(el, 2000);
watcher.enterViewport(function() {
var srcToInject = el.getAttribute('data-src');
var src = el.getAttribute('src');
if (src === null && srcToInject!=null) { // do not re-execute for images already with injected src
el.style.opacity = 0;
el.style.display = "block";
el.setAttribute('src',srcToInject);
el.onload = imageFound;
el.onerror = imageNotFound;
function imageFound() {
// progressively show image via opacity variation
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestNextAnimationFrame(fade);
}
})();
}
}
});
});
}
在基本js文件上使用時,它可以完美地工作。
當我們嘗試使用Webpack並使用“導出”時,我們碰壁了。 我們所做的大多數Webapck export
都在努力,所以我認為這是行不通的,因為它不是標准的:
function doSth() {
}
但這始於window.doSth()...
這是我們今天所做的失敗的事情:
JS /助理/ requestAnimationFramePolyfill.js
export window.requestNextAnimationFrame =
(function () {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;
// Workaround for Chrome 10 bug where Chrome
// does not pass the time to the animation function
if (window.webkitRequestAnimationFrame) {
// Define the wrapper
wrapper = function (time) {
if (time === undefined) {
time = +new Date();
}
self.callback(time);
};
// Make the switch
originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;
window.webkitRequestAnimationFrame = function (callback, element) {
self.callback = callback;
// Browser calls the wrapper and wrapper calls the callback
originalWebkitRequestAnimationFrame(wrapper, element);
}
}
// Workaround for Gecko 2.0, which has a bug in
// mozRequestAnimationFrame() that restricts animations
// to 30-40 fps.
if (window.mozRequestAnimationFrame) {
// Check the Gecko version. Gecko is used by browsers
// other than Firefox. Gecko 2.0 corresponds to
// Firefox 4.0.
index = userAgent.indexOf('rv:');
if (userAgent.indexOf('Gecko') != -1) {
geckoVersion = userAgent.substr(index + 3, 3);
if (geckoVersion === '2.0') {
// Forces the return statement to fall through
// to the setTimeout() function.
window.mozRequestAnimationFrame = undefined;
}
}
}
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback, element) {
var start,
finish;
window.setTimeout( function () {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
};
}
)
();
// It's then used here in our code here:
loadIcons();
function loadIcons() {
var elements = document.querySelectorAll('img');
if (!elements) return;
Array.prototype.forEach.call(elements, function(el, i){
var watcher = scrollMonitor.create(el, 2000);
watcher.enterViewport(function() {
var srcToInject = el.getAttribute('data-src');
var src = el.getAttribute('src');
if (src === null && srcToInject!=null) { // do not re-execute for images already with injected src
el.style.opacity = 0;
el.style.display = "block";
el.setAttribute('src',srcToInject);
el.onload = imageFound;
el.onerror = imageNotFound;
function imageFound() {
// progressively show image via opacity variation
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestNextAnimationFrame(fade);
}
})();
}
}
});
});
}
然后我們在main.js中
import {requestNextAnimationFrame} from './helpers/requestAnimationFramePolyfill.js'
loadIcons();
function loadCompanyIcons() {
var elements = document.querySelectorAll('img');
if (!elements) return;
Array.prototype.forEach.call(elements, function(el, i){
var watcher = scrollMonitor.create(el, 2000);
watcher.enterViewport(function() {
var srcToInject = el.getAttribute('data-src');
var src = el.getAttribute('src');
if (src === null && srcToInject!=null) { // do not re-execute for images already with injected src
el.style.opacity = 0;
el.style.display = "block";
el.setAttribute('src',srcToInject);
el.onload = imageFound;
el.onerror = imageNotFound;
function imageFound() {
// progressively show image via opacity variation
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestNextAnimationFrame(fade);
}
})();
}
}
});
});
}
我們還嘗試了:
import {window.requestNextAnimationFrame} from './helpers/requestAnimationFramePolyfill.js'
但沒有任何效果,我們知道這一點,因為應該使用requestAnimationFramePolyfill.js逐漸淡化為1.0透明度的圖標,而保持0.1透明度。
我不確定這是否是原因。 我無法理解過去的一天。
您試圖在window
對象中添加一個函數,然后在其他地方使用它。 這是使功能可以被其他文件訪問的一種方法,但是使用ES6和webpack可以以其他方式進行。
我建議不要使用可變window
因為它可能導致window
語法出現問題。 另外,您不再需要向窗口對象添加函數。
這應該為您工作。
JS /助理/ requestAnimationFramePolyfill.js
const requestNextAnimationFrame = (function { your function });
export { requestNextAnimationFrame };
main.js
import { requestNextAnimationFrame } from './helpers/requestAnimationFramePolyfill.js'
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.