使用Angular 2/webpack"未捕获的ReferenceError:require未定义"

Question

我正在使用node和webpack将图形设计公司的HTML模板工作到我的Angular 2项目中.

HTML提取各种脚本,如下所示:

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

所以我在我的组件中要求它们:

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

我该如何解决此错误？

Answer 1

WebPack可以单独完成.您需要确保首先使用脚本src标记加载初始块.它通常是条目的值:附加-bundle的WebPack配置中的键.如果您没有进行显式分块,那么您的条目块应该是初始块和入口块,并且其中包含WebPack运行时.WebPack运行时包含并在代码运行之前加载require函数.

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