Webpack -出口window.function失败

Question

我是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/helpers/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的不透明度。

我不确定这就是原因。我无法理解过去的一天。

Answer 1

您正在尝试向window对象中添加一个函数，然后在其他地方使用它。这是使函数可以被其他文件访问的一种方法，但是使用ES6和webpack，您可以通过其他方式访问它。

我建议不要使用变量window，因为它可能会导致window语法上的一些问题。另外，您不再需要向window对象添加函数了。

这应该对你有用。

js/helpers/requestAnimationFramePolyfill.js

const requestNextAnimationFrame = (function { your function });
export { requestNextAnimationFrame };

main.js

import { requestNextAnimationFrame } from './helpers/requestAnimationFramePolyfill.js'