Velocity-React 不会使用 Webpack 加载答案

【问题标题】：Velocity-React Won't Load with WebpackVelocity-React 不会使用 Webpack 加载
【发布时间】：2017-07-27 23:27:12
【问题描述】：

我正在尝试将以下库 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)

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

【问题讨论】：

标签： reactjs animation webpack window velocity.js

【解决方案1】：

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

假设你有如下入口配置：

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';

【讨论】：

【解决方案2】：

如果你正在使用一个模块，你可以这样做。

import Velocity from 'velocity-animate';

然后像这样使用它。

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

window在NodeJS中不存在，与DOM相关。

【讨论】：