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

Question

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

<button onclick="A()">A()</button> <button onclick="B()">B()</button> <button onclick="addLi()">addLi()</button> <div id="listCover"> <ul id="list"> <li>one</li> <li>two</li> <li>three</li> </ul> </div>

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

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

Answer 2

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

将deploying your Angular app与ng build prod一起使用时，它仅包含应用程序和依赖项的关键软件包，您将它们包含在 build 下的 angular.json 文件中部分。

亲自尝试：进行任何有角度的项目，运行npm install或添加npm程序包，然后运行ng build prod，导航到项目文件夹内的 dist 文件夹，并查看其中的位置与您的项目相比，东西更少，尤其是在 node_modules 文件夹中。