生产环境下如何构建Angular而不安装devDependencies

Question

我目前正在尝试创建一个Docker容器来构建我的生产Angular应用程序。我正在使用npm。我只想安装依赖项（不包括devDependencies），所以我想这样做：

npm install --only=prod ng build project-name --prod

唯一的问题是，我的构建缺少很多包，例如@angular/cli和@angular-devkit/build-angular。我在互联网上找不到任何好的解决方案，但我不希望我的构建包含所有的devDependencies。此外，我也不希望我的生产构建包含任何用于构建所需的包。是否有一个好的解决方案？

- Scuba Kay

---

人们说不用担心已安装的开发依赖，但要注意它会增加构建时间和构建服务器成本。理想情况下，您代码的每个分支都会自动触发一个构建流水线，如果成功，则可以合并到开发环境，再到暂存环境，最终到生产环境等。一次5分钟的 NPM 安装会减缓团队的工作速度，并减慢对生产环境的热修复。开发人员不想等待5分钟。使用 npm ci 可略微提高速度，而 npm install --only=prod 更快！还可以考虑查看 npm-cache。 - Rusty Rob

生产环境安装的有趣注释，但是构建Angular不需要像@angular-devkit/build-angular和typescript这样的软件包吗？或者您会在构建容器或类似物上预先安装它们吗？ - Scuba Kay

是的，我确实需要它们，但我不确定最好的方式是什么，希望有人可以建议一个好的方式，虽然我们已经全局预安装了angular-cli，因为一些脚本命令使用ng。 我想可以很容易地预先安装一些开发依赖项。这样可以节省我们每次安装cypress等工具的时间。开发人员不喜欢等待构建 :) - Rusty Rob

Cypress的安装也需要很长时间，但我突然想到您可能希望根据package.json中的版本更新Cypress等内容。目前，我们安装完整的node_modules，并将其存储在Jenkins的构建阶段之间。如果使用不同的容器/阶段，这可以减少构建时间。 - Scuba Kay

似乎npm-cache是正确的选择。 - Rusty Rob

Answer 1

不要担心依赖关系。

当你通过@angular/cli触发生产构建时，{{占位符}}

ng build --prod

Angular将从捆绑包中消除未使用的软件包和代码！请参见https://github.com/angular/angular-cli/wiki/build以获取您可以设置的所有构建选项。

唯一需要考虑的是，您如何使用软件包以及您的依赖项是否也支持treeshaking。避免像这样的导入：

import * as xy from 'packageXY';

另一个提示是使用npm包Webpack-Bundle-Analyzer。执行以下命令以检查/分析您的捆绑包：

npm i webpack-bundle-analyzer

ng build --prod --stats-json

cd dist 

webpack-bundle-analyzer stats.json

- kauppfbi

---

在构建流水线中进行持续集成的性能怎么样？ npm install 需要大约5分钟才能运行，例如安装像cypress这样的东西。 也许我可以尝试使用"npm ci"而不是"npm install"，或者将我的开发依赖关系转换为非开发依赖关系。编辑：也可以尝试npm-cache? - Rusty Rob

我建议使用npm缓存。根据您的构建服务器，配置起来非常容易。在我们的情况下，启用缓存后安装依赖项只需要15-20秒（我们还加载了cypress和许多其他内容）。 - kauppfbi

当使用 Azure 托管时，npm 缓存不是一个选项...这正是我所处的情况。 - Ricardo Saracino

错误：未知参数：prod。今天您需要使用：ng build --configuration=production（和/或更改angular.json默认配置）。 - Melroy van den Berg

Answer 2

在开发阶段使用的所有npm包都不会包含在您的生产构建中。安装软件包时不需要任何特殊命令。您可以像往常一样安装所需的所有软件包或为现有项目运行npm install。

当使用ng build prod部署您的Angular应用程序时，它只包括关键软件包和您在angular.json文件的build部分中包含的依赖项。

自己试试：获取任何Angular项目，运行npm install或添加npm软件包，然后运行ng build prod，导航到您项目文件夹内的dist文件夹并查看其中的内容，尤其是node_modules文件夹内的内容要少得多。

- Jim P.

Answer 3

这个命令将解决依赖问题：

ng build --configuration=production

- Abhishek Nanarkar

---

或者更新 angular.json 文件并将默认配置设置为 "production"。 - Melroy van den Berg