在angular.json和组件中导入库之间的区别

Question

我需要在Angular 7应用程序中导入jQuery，我注意到有两种方法可以做到这一点。

1. 将 jquery.min.js 文件导入到 angular.json
的scripts属性中
2. 使用import 'jquery';从ts代码（例如，在main.ts或模块中）导入jQuery

这两种方法有什么区别？

Answer 1

1. 使脚本具有全局性（例如将脚本标记放置在index.html中）

2. 使用模块，避免了全球范围的污染，并允许Webpack等工具优化捆绑过程，例如通过“摇树”。

Answer 2

首先，我必须说，在大多数情况下，将JQuery与angular混合使用是个坏主意，所以我希望您有充分的理由。关于您的问题

使用 angular.json 的scripts属性导入文件时，您确实可以做到这一点-导入整个文件并运行其代码。在angular上，将在执行角度应用代码之前完成。

另一方面，在导入模块时（使用诸如 npm 之类的软件包管理器安装模块后），您只能导入所需的模块，这通常意味着代码执行所需的代码更少浏览器。我通常这样写，因为使用JQuery时，您很可能无论如何都会导入整个库。

我总是希望尽可能使用软件包管理器进行安装，因为：

• 安装和更新更加容易
• 当使用诸如angular的框架时，这是一个标准
• 它只允许导入我需要的实际代码，而不是整个库（对于JQuery，这无关紧要，但对其他库确实有用）。