Angular 2 / webpack“未捕获的ReferenceError：require没有定义”

我正在使用节点和webpack将一个来自平面devise公司的HTML模板join到我的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很高兴，并build立了一切，“npm开始”也是成功的。 但是，当它到达浏览器，我得到这个抱怨：

 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的要求吗？ 在几个星期之前，我还没有在网页开发中使用过这个function，所以我仍然从webback中解决了各种各样的需求，CommonJs et。

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

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

我该如何解决这个错误？

Answer 1

WebPack可以单独做到这一点。 您需要确保先使用脚本src标记加载初始块。 它通常是附加-bundle的WebPackconfiguration中的entry：key的值。 如果你没有做明确的分块，你的入口块应该既是初始块又是入口块，并且在其中有WebPack运行时。 WebPack运行时包含并在您的代码运行之前加载require函数。

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

Answer 2

据我所知，我认为你需要像Browserify这样的东西 ，才能够在客户端使用模块，就像你在服务器上使用它们一样。

如上所述，除非你提供了一个桥梁或工具来允许这样的使用，否则在这个世界上不存在require。

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会运行服务器。

Answer 4

对于那些正在寻找一种万能的人来说，上面的工作并不奏效：

短

将webpack.config.js当前target添加或replace为target: 'web'

有点长

Webpack具有不同的目标 ，如果您已经尝试了这一点并将您的目标更改为node ，则将使用“require”加载chunck。 最好的办法是在你的webpack.config.js创build你的目标（或添加） target: 'web' 。 这是默认的目标，并以浏览器可以处理的方式加载你的chunck。

我最终在这里find了解决scheme。