Question

我正在尝试将以下库https://www.npmjs.com/package/velocity-react用于我的react / webpack项目中的动画。当我尝试包含文件时，我得到一个非常奇怪的错误。我这样做，按照文档，要求我的webpack.config.js文件顶部的包像这样：

  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)

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

Answer 1

您需要将其包含在入口点中，而不是配置中。您在配置中包含的内容仅用于捆绑过程，该过程位于Node而不是浏览器中，并且节点中不存在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';

Answer 2

如果您使用的是模块，则可以执行以下操作。

import Velocity from 'velocity-animate';

然后像这样使用它。

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

window中不存在

NodeJS，它与DOM有关。

Velpack-React不会加载Webpack

2 个答案: