Angularプロジェクトのpackage.jsonの書き方について

Question

●バージョン情報
Angular CLI: 9.0.2
Angular: 9.0.1
Node: 12.15.0
OS: linux x64

①Angularプロジェクトのビルド時にdistフォルダの中を一旦消して、完全に前のビルド結果がなくなるようにしてから新しいビルド結果を出力したいです。

package.jsonのscriptsに
"build": "rimraf dist",
と記述すればいいことは分かったのですが、
デフォルトだとココは
"build": "ng build",
になっています。

この【ng build】を消してしまったら、buildできないのかと思ったのですが、
消して【rimraf dist】のみにしてもビルドできました。
ここに元々書いてあるng buildとは何なのでしょうか。

②また、調べ物をしている最中、package.jsonのscriptsに
"build": "rimraf dist && tsc -p ./tsconfig.json",
と書いている人がいました。

特にpackage.jsonをいじらなくてもng buildすればdistの中にjsファイルができていたので、
tsc -p tsconfig.json
はここに書いていなくてもビルド時にデフォルトで行われていると思っていたのですが、私の認識が間違っているのでしょうか。

ご回答よろしくお願いします。

Answer 1

ng buildコマンドは、Angular CLIでAngularプロジェクトをビルドするときに使用するコマンドで、内部的にはAngular独自のテンプレートエンジンと、webpackが使われています。
一方、tscコマンドは、Typescriptが提供する純粋なTS→JS変換用のコンパイラを実行するものです。

①Angularプロジェクトのビルド時にdistフォルダの中を一旦消して、完全に前のビルド結果がなくなるようにしてから新しいビルド結果を出力したいです。

この場合、

"build": "rimraf dist && ng build",
// あるいは
"prebuild": "rimraf dist",
"build": "ng build",

でOKです。

②また、調べ物をしている最中、package.jsonのscriptsに

"build": "rimraf dist && tsc -p ./tsconfig.json",
と書いている人がいました。

tscコンパイラは、Angularプロジェクトのテンプレートを解釈できないため、tscでビルドしたものをサーバーにアップロードしても、正常には動作しないはずです。AngularJSと呼ばれていた時代のやり方だったのではないかと推察します。

Comments

[dev3310]

ご回答ありがとうございます。

"build": "rimraf dist && ng build",
// あるいは
"prebuild": "rimraf dist",
"build": "ng build",

ということは、【ng build】コマンドの中にdistの中身を一旦消す処理が含まれているということでしょうか。

[kaito3desuyo]

一応含まれてはいます。

参考としてご提示したnpm scriptは、念の為手動でdistフォルダを消したい、という意図のものです。なので普通はng buildのみでいいはずです。

[dev3310]

ありがとうございます。