Velocity-React将不会加载Webpack

我想在我的react/webpack项目中使用以下库https://www.npmjs.com/package/velocity-react来制作动画。当我尝试并包含文件时，我遇到了一个非常奇怪的错误。我这样做的，下面的文件，要求包在我webpack.config.js顶部文件是这样的：Velocity-React将不会加载Webpack

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

我得到的错误是：

/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)

这是非常令人沮丧因为它看起来像一个非常整洁的包，但它甚至不会加载。有谁知道如何解决这一问题？

来源

2017-07-21 Peter Weyand

您需要将它包含在您的入口点中，而不是配置。您在配置中包含的内容仅用于绑定过程，该过程位于节点而不是浏览器中，并且节点中不存在window。

假设你有以下项的配置：

entry: './src/index.js'

在./src/index.js你导入：

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

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

来源

2017-07-21 14:32:48

如果您使用的模块，你可以做这样的事情。

import Velocity from 'velocity-animate';

然后像这样使用它。

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

window不存在NodeJS，它关系到DOM。

来源

2017-07-27 15:27:12 kiiiiNNNNNNNNNyyyy

Velocity-React将不会加载Webpack

回答

相关问题