web-dev-qa-db-ja.com

ビルドAngular devDependenciesをインストールしない本番環境用

現在、Dockerコンテナーを作成して、本番環境をビルドしようとしていますAngular app。npmを使用しています。依存関係のみをインストールしたいので（devDependenciesはありません）、これを実行します。

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

唯一の問題は、ビルドに@ angular/cliや@ angular-devkit/build-angularなどの多くのパッケージがないことです。インターネットで適切なソリューションを見つけることができませんでしたが、自分のビルドにすべてのdevDependenciesを含めたくありません。また、本番ビルドには、ビルドに必要なパッケージを含めたくありません。これに対する良い解決策はありますか？

angularnpmbuildproduction
7
Scuba Kay

依存関係について心配する必要はありません。

@ angular/cliを使用して本番ビルドをトリガーすると

ng build --prod

Angularはバンドルから未使用のパッケージとコードをツリーシェイクします！設定できるすべてのビルドオプションについては、 https://github.com/angular/angular-cli/wiki/build を参照してください。

考慮しなければならない唯一のことは、パッケージの使用方法と、依存関係が treeshaking をサポートしているかどうかです。 次のようなインポートは避けます：

import * as xy from 'packageXY';

もう1つのヒントは、npmパッケージ Webpack-Bundle-Analyzer バンドルを検査/分析するために次のコマンドを実行します。

npm i webpack-bundle-analyzer

ng build --prod --stats-json

cd dist 

webpack-bundle-analyzer stats.json

enter image description here

8
fabi_k

開発フェーズで使用するすべてのnpmパッケージは、本番ビルドには含まれません。パッケージをインストールするときに特別なコマンドは必要ありません。必要なすべてのパッケージをインストールするか、通常どおり既存のプロジェクトに対してnpm installを実行します。

Angular app をng build prodとともにデプロイすると、アプリの重要なパッケージとangular.jsonファイルに含まれる依存関係のみが含まれますbuildセクション。

自分で試してください：angularプロジェクトを実行してnpm installを実行するか、npmパッケージを追加してからng build prodを実行し、プロジェクトフォルダー内のdistフォルダーに移動して、特にnode_modulesフォルダー内では、プロジェクトと比較して内容が少ないことを確認してください。

2
Jim P.