Question

我只是在一个项目中使用Webpack 2来处理Angular 4。

我试图在ngOnInit期间加载一些脚本并遇到一些问题。

问题1。）

我的ngOnInit中有以下代码：

System.import(`../../node_modules/jquery/dist/jquery.js`);
System.import(`../../node_modules/jquery-validation/dist/jquery.validate.js`);
System.import(`../../node_modules/jquery-validation/dist/additional-methods.js`);
System.import(`assets/js/regular-expressions.js`);

当我这样做时，所有资产似乎都会加载，但我收到错误：

未捕获（承诺）：ReferenceError：$未定义

$应该在jQuery文件中定义。为什么 regular-expressions.js 文件不知道jQuery已被加载？

问题2。）

最终，我需要加载动态加载脚本（因为每个页面都不需要）。

我有以下代码：

let script = 'assets/js/' + scripts[i].replace(/^\/|\/$/g, '');
/* The following two lines output the same exact text to the console */
console.log('assets/js/regular-expressions.js');
console.log('' + script + '');

/* The following hard-coded line works (as in the script is loaded, raising the $ issue mentioned above */
System.import('assets/js/regular-expressions.js');

/* The following line with a variable throws an error of "Cannot find module 'assets/js/regular-expressions.js'." */
System.import('' + script + '');

我不明白为什么行为有所不同。特别是如果传递给System.import的值完全相同。

Answer 1

我最终弄清楚这对webpack来说几乎是一个（相当大的）限制。我明白了树摇动等等，但WebPack确实应该允许开发人员在运行时加载脚本的OPTION。

我现在最终使用此方法：https://stackoverflow.com/a/37844389/3389346

这并不是最好的，因为它需要应用程序对jQuery的广泛依赖。如果WebPack人员决定允许开发人员选择一次性加载脚本，我会回去纠正它。

Angular 4 with Webpack 2，动态加载脚本

1 个答案: