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

回答

相關問題