エンジニア初心者です。
仕事で何も気にせず、指示通りにnpm run devやらnpm run buildなどコマンドを実行していました。
具体的にどんなものが生成されているのか気にしたことがなかったため、自分の思考整理と同じ初心者の方に向けて書いてみました。
何か間違いなどあれば優しく教えていただけると助かります。
npmについて
Node.jsのパッケージ管理システムのこと。
Node.jsはJavaScript実行環境のこと。こいつのおかげでブラウザ上以外でもJavaScriptが動かせているらしい。
多分vueとかReactをローカル環境で動かすなら使用していると思われる。
パッケージって？
世界中で作られた便利な機能をまとめたファイルセットのこと。
これらをDLすることにより、効率的に開発が可能となる。
npmでできること
名前の通りパッケージ管理システムなので、パッケージのインストールや、アンイストールが主な作業となる。他にはパッケージのアップデートやバージョンの確認もできる。
ビルドについて
TypeScriptのファイルやVueのファイルはブラウザでは読み込めないので、読み込むためにはJavaScriptに変換する必要がある。その作業をnpm run build等で行っている。
またコードの最適化や古いブラウザの対応などもこの際にしてくれているらしい。
幅広いブラウザに対応して素早く読み込めるようになったファイル群が生成されたってことだと思う。
ノーマルのJavaScriptと違って、書いてきたソースコードをサーバーへ格納するためにビルドをしましょう。
実はnpm run buildはnpmの機能ではない。
npm run buildはパッケージ管理システムの機能かと思っていましたが、そうではないらしい。
実はpackage.jsonに書かれたスクリプトを実行しているだけで、npmの機能ではありませんでした。
さらに使用している環境によって、ビルドされる生成物の内容も少し変わってくる。
出力フォルダがbuld/だったりdist/だったり様々なものが存在している。
package.jsonについて
npmの機能で作成されるjson形式のファイル。
プロジェクトでどんなパッケージが使われているか記載されているファイルです。
また親戚みたいなファイルでpackage-lock.jsonというものもあります。
package.jsonにはバージョン3.0以上という大まかな指定が書かれて、
package-lock.jsonにはバージョン3.2という完全な情報が記載されています。
これらを他者と共有することによって同じ環境を作り出せるという利点があります。
最後に
脱線しまくりでしたが、デプロイするためのファイルが環境によって作り出されるということがわかりました！
具体的に何が出来上がるかは、アプリを自作してから確認してみたいと思います。