未定义Perf - 使用webpack-dev-server运行react app

Question

我正在尝试使用Perf addon衡量反应效果，但是当我尝试在我的控制台中运行Perf.start（）时出现错误：Uncaught ReferenceError: Perf is not defined(…)

值得一提的是，我已经通过npm安装了该插件，并在我的main.js文件中有一个require('react-addons-perf')。

我猜这个问题与我运行webpack-dev-server并且全局变量没有被正确暴露的事实有关，但遗憾的是，不知道如何正确接近它。任何人都可以帮我吗？

这是我在codepen上的webpack.config文件内容，供参考。

Answer 1

我不知道你的webpack.config中是否有可能改变范围或通过全局范围公开var的方法发生变化，但一种简单的方法就是简单地使用

global.Perf = require('react-addons-perf');

这应该允许您通过控制台访问。

但是必须说，它可能并不打算在全球范围内公开变种global variables in requireJS

也许尝试找到一种方法从代码中触发Perf.start（）和Perf.stop（），而不是控制台！

Answer 2

找到一个适合我的解决方案：

1. 安装npm expose-loader module

2. 将以下行添加到您的webpack配置加载器中：

   { test: require.resolve("react-addons-perf"), loader: "expose?Perf" }
   

这个expose-loader模块是将模块导出公开到全局范围的好方法。