将 jquery 包添加到 Angular 10+ 项目的正确方法?

Proper way to add jquery packages to an Angular 10+ project?

我正在尝试将 jqueryjquery-slimscroll 包安装到 Angular 项目(版本 > 10),但这些包似乎没有正确安装。那么,关于这个问题,能否请您澄清一下以下问题?

假设我有以下客户端结构:

ClientApp ---
            |--- node_modules
            |--- package.json
            |--- angular.json

1.jqueryjquery-slimscroll添加到项目中的正确方法是什么?

我应该 运行 npm install ClientApp 文件夹吗?或者对于最新的 Angular 版本有更好的方法吗?

2. 我认为有几种方法可以将这些包添加为脚本,如下所示:

angular.json中:

"scripts": [
  ".../jquery/dist/jquery.min.js",
  ".../jquery-slimscroll/jquery.slimscroll.js",
]

这样添加不是很好吗?我应该像第一个问题那样在 npm 中添加它们吗?

3. packages.json 呢?一些包被添加到 packages.json 而不是 angular.json。有什么区别,为什么有些包要另外添加?

首先你要明白angular.jsonpackage.json的作用。

Angular.json

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

Package.json

Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios. You add packages to package.json as your application evolves. You may even remove some.

The package.json is organized into two groups of packages:

Dependencies are essential to running applications. DevDependencies are only necessary to develop applications.

因此,对于添加这些 jquery 依赖项的正确方法的问题,您可以同时执行 npm install jquery 或添加到 package.json,如果需要,还可以添加到 angular.json.

两种方式的区别是,如果你使用npm install jquery它会自动添加依赖包并下载包到你的node_modules,你手动添加它,你需要运行 npm install 无论如何,tp 获取包。