Angular 2/webpack 中的“未捕获的 ReferenceError：未定义要求”

Posted 2023-02-22

【中文标题】Angular 2/webpack 中的“未捕获的 ReferenceError：未定义要求”

【英文标题】："Uncaught ReferenceError: require is not defined" with Angular 2/webpack

【发布时间】：2016-03-29 21:56:39

【问题描述】：

我正在使用 node 和 webpack 将来自图形设计公司的 html 模板添加到我的 Angular 2 项目中。

HTML 会像这样引入各种脚本：

<script src="js/jquery.icheck.min.js"></script>
<script src="js/waypoints.min.js"></script>

所以我在 component.ts 中需要它们：

var icheckJs = require('../js/jquery.icheck.min');
var waypointsJs = require('../js/waypoints.min');

还有其他几个脚本和一些看起来工作正常的 SASS。

webpack 很高兴并构建了这一切，并且“npm start”也成功了。但是，当它到达浏览器时，我收到了这样的抱怨：

Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined

这实际上是由 url.js 中的这一行抛出的：

var punycode = require('punycode');

这是 CommonJs 的要求吗？几周前我还没有在 web 开发中使用过这个，所以我仍然在解决 webback、CommonJs 等的各种需求。

从我的 webpack.config.js 中提取的 .js 加载器如下所示：

 test: /\.js$/, loader: 'script' 

如何解决此错误？

【问题讨论】：

看这个答案，可能是重复的：***.com/questions/19059580/…

你找到解决方案了吗？

你能发布你的整个 webpack 配置和入口 js 吗？

我们可以看看你的 package.json 吗？

你可以在这里添加你的 tsConfig.json 文件吗？

【参考方案1】：

对于任何正在寻找答案但上述方法不起作用的人：

短

将webpack.config.js 中的当前target 添加或替换为target: 'web'

再长一点

Webpack 有不同的targets，如果你已经尝试过这个并将你的目标更改为node，它将使用'require'来加载块。 最好的办法是让你的目标（或添加）target: 'web' 在你的webpack.config.js 中。这是默认目标，并以浏览器可以处理的方式加载您的块。

我最终找到了这个解决方案here。

【参考方案2】：

假设你有，你可以在一行中做到这一点

dist/bundle.js 中的捆绑包

将在浏览器中呈现页面的源文件客户端代码 client/client.js

webpack && webpack ./client/client.js dist/bundle.js \ && webpack-dev-server --progress --color

您需要再次运行webpack，因为如果库中的某些源发生更改，您将在dist/bundle.js 包中获得最后的更改（当然，您可以为此添加grunt 文件监视任务）。然后webpack-dev-server 将运行服务器。

【参考方案3】：

WebPack 可以单独做到这一点。您需要确保首先使用脚本 src 标签加载初始块。它通常是条目的值：WebPack 配置中的键，附加了 -bundle。如果您没有进行显式分块，那么您的入口块应该既是初始块又是入口块，并且其中包含 WebPack 运行时。 WebPack 运行时包含并在您的代码运行之前加载 require 函数。

您的组件或您需要的任何东西都需要从入口文件中获取，因为您的脚本将从那里开始。基本上，如果您没有明确分块，则入口点 JS 文件是您可以包含在脚本 src 中的唯一文件。其他一切都需要它。您包含的内容通常会在 JS 文件名中包含 bundle。默认情况下，它应该是 main-bundle.js。