Velocity-React ne chargera pas avec Webpack

Question

J'essaie d'utiliser la bibliothèque suivante https://www.npmjs.com/package/velocity-react pour les animations dans mon projet reaction/webpack. Je reçois une erreur vraiment bizarre quand j'essaie même d'inclure le fichier. Je le fais par la suite de la documentation, ce qui nécessite le paquet en haut de mes webpack.config.js fichier comme ceci:

require('velocity-animate'); 
    require('velocity-animate/velocity.ui'); 

L'erreur que je reçois est:

/Users/patientplatypus/Documents/arc-app/node_modules/velocity-animate/velocity.js:417 
})(window); 
^

ReferenceError: window is not defined 
    at Object.<anonymous> (/Users/patientplatypus/Documents/arc-app/node_modules/velocity-animate/velocity.js:417:4) 
    at Module._compile (module.js:569:30) 
    at Module._extensions..js (module.js:580:10) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/patientplatypus/Documents/arc-app/node_modules/babel-register/lib/node.js:152:7) 
    at Module.load (module.js:503:32) 
    at tryModuleLoad (module.js:466:12) 
    at Function.Module._load (module.js:458:3) 
    at Module.require (module.js:513:17) 
    at require (internal/module.js:11:18) 
    at Object.<anonymous> (/Users/patientplatypus/Documents/arc-app/webpack.config.js:5:1) 

Ceci est très frustrant car il ressemble à un paquet très soigné, mais il ne chargera même pas. Est-ce que quelqu'un sait comment réparer ceci?

Answer 1

Vous devez l'inclure dans votre point d'entrée, pas la configuration. Ce que vous incluez dans la configuration n'est utilisé que pour le processus de groupage, qui est dans le nœud et non dans le navigateur, et window n'existe pas dans le nœud.

En supposant que vous avez la configuration d'entrée suivante:

entry: './src/index.js' 

En ./src/index.js l'importer:

require('velocity-animate'); 
require('velocity-animate/velocity.ui'); 

// Or with ES modules 
import 'velocity-animate'; 
import 'velocity-animate/velocity.ui'; 

Answer 2

Si vous utilisez un module, vous pouvez faire quelque chose comme ça.

import Velocity from 'velocity-animate'; 

puis de l'utiliser comme ceci.

let el = document.querySelector("#someId"); 
Velocity(el, "fadeIn", {duration: 700, stagger: 200, easing: "easeInSine"}); 

window n'existe pas dans NodeJS, elle est liée à DOM.