在不安装 devDependencies 的情况下为生产构建 Angular

Question

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

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

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

Answer 1

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

当 deploying your Angular app 和 ng build prod 时，它只包含您的应用程序的关键包和您包含在 angular.json 文件中的依赖项构建部分。

自己尝试一下：选择任何 angular 项目，运行 npm install 或添加 npm 包，然后运行 ng build prod，导航到 dist 文件夹在你的项目文件夹中，看看与你的项目相比有多少东西，尤其是在 node_modules 文件夹中。

Answer 2

不用担心您的依赖性。

当您通过

使用 @angular/cli 触发生产构建时

ng build --prod

Angular 将从您的包中提取未使用的包和代码！有关您可以设置的所有构建选项，请参阅 https://github.com/angular/angular-cli/wiki/build。

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

import * as xy from 'packageXY';

另一个提示是 npm 包 Webpack-Bundle-Analyzer 执行这些命令以 inspect/anlayze 您的包：

npm i webpack-bundle-analyzer

ng build --prod --stats-json

cd dist 

webpack-bundle-analyzer stats.json

Answer 3

此命令将解决依赖问题：

ng build --configuration=production

Building Angular for production without installing devDependencies