Angular 2/webpack中出现了"Uncaught ReferenceError: require is not defined"错误

Question

我正在使用Node和Webpack将来自图形设计公司的HTML模板整合到我的Angular 2项目中。

HTML文件会像这样引入各种脚本:

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

所以我在我的组件.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的require吗？几周前我在Web开发中还没有使用过它, 所以我仍在梳理来自webpack，CommonJs等的各种requires。

我的webpack.config.js文件中JS加载器的提取如下：

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

我该如何解决这个错误？

- serlingpa

---

看看这个答案，可能是重复的： https://dev59.com/J2Ik5IYBdhLWcg3wrv64 - Marcosicp

你解决了这个问题吗？ - Aarmora

你能否发布你的整个Webpack配置和入口JS文件？ - Frank Robert Anderson

我们能否也看一下你的 package.json 文件？ - Ant Kennedy

你能把你的tsConfig.json文件添加到这里吗？ - Praveen Puglia

Answer 1

WebPack可以单独完成这个任务。您需要确保使用script src标签加载初始块。通常它将是WebPack配置中entry:键的值，附加-bundle后缀。如果您没有执行显式分块，则entry块应该是初始块和入口块，并且其中包含WebPack运行时。 WebPack运行时在您的代码运行之前包含并加载require函数。

您的组件或其他所需内容需要从entry文件中被引用，因为您的脚本将从那里开始。基本上，如果您没有显式地分块，入口点JS文件是唯一可以使用script src包含的文件。其余所有内容都需要从它引用。您包括的内容通常会在JS文件名中带有bundle。默认情况下，应为main-bundle.js。

- Mark H.

Answer 2

如果您正在寻找答案但上述方法无效：

简短版

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

稍长一些

Webpack有不同的目标，如果您尝试过更改目标为node，它会使用'require'来加载碎片。 最好的方法是将您的目标（或添加）target: 'web'到您的webpack.config.js中。这是默认目标，以一种浏览器可以处理的方式加载你的碎片。

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

- Maniflames

Answer 3

假设您有以下内容：

• 包在 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 将运行服务器。

- loretoparisi