なんとなく使ってたpackage.jsonについて調べた - かあちゃんエンジニアの気まぐれ開発メモ

f:id:tarcoizy:20210115144007p:plain

1.　開発環境

個人商店のお客様に、小さな売上管理アプリを提供するってことになりまして。
下記環境でコツコツ開発を続けています。じっくり作ってるうちに、どんどんフロントエンド技術が進化しちゃって使ってるフレームワークが古びてゆき困る。早くリリースせねば。

backend: CakePHP ver. 2.10.19 (.lib/Cake/VERSION.txtで確認)
front: CakePHPの標準view (*.ctp の拡張子)　+　jQuery + vue.js
server: ローカルでの確認はとりあえずdocker上

せっかくお勉強しているvueを使いたいんで、伝統的javascriptへ、部分的にvue.jsを組み込むことにしました。これ直請けだからこその自由度！身になるサイズの開発バンザイ！

2. とっちらかるjavascriptファイル群

1viewに対して、そのページで使うjsファイルを小分けにしておりました。java開発の名残ですね。そうなるとファイル数は増えるわ、ライブラリだって色々入れて、管理が難しくなったのでございます。
そこで、パッケージ管理にnpm というツールを使うのだそうですね、最近は。他のプロジェクトに保守参加した際、package.jsonファイルをお見かけしていたなというぼんやり認識で。まるっと単独の開発では、お偉方の生成物にあやかることはできませんし、どなた様かに責任をなすりつけることもできませんゆえ、しっかり理解する必要が出てきました。いや、ほんとは、保守の歯車になるときだって、きちっと用法・用量は守ってつかうべきなんですけどね。反省。

というわけで。

3. package.jsonの生成

パイセン方々のサイトを拝見いたしまして。そちらによると、プロジェクト直下でコマンドを入力すると生成されるファイルなのだそうです。

$ npm init

このコマンド投入いたしますと、いんたらくちぶに丁寧な質問をいただけます。

# ...(略)
Press ^C at any time to quit.
package name: (package_name)
version: (1.0.0)

# ...(略)

パッケージのお名前はなににいたしましょうか？
バージョンは何にいたしましょうか？

親切ですね。
答えていくとpackage.jsonの出来上がりです。

4. 生成されたもの

npm initでできたpackage.json のファイルの中身です。

{
  "name": "package-name",
  "version": "1.0.0",
  "description": "my small project for shop",
  "main": "vue.config.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^5.13.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xxxx/package-name.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/xxxx/package-name/issues"
  },
  "homepage": "https://github.com/xxxx/package-name#readme"
}

パッケージ管理の目録というところでしょうか。

5. dependencies と devDependencies

重要なのは、この２項目かと！
dependencies　は、このパッケージが依存する別のパッケージを記述してあります。バージョンを指定できます。package.jsonは手動で編集もできるんですが、dependenciesに依存パッケージを追加するにはnpm経由で行います。 npm install でインストールすると、package.jsonが更新され、パッケージ名が追加されます。
なので削除するときは、uninstallします。

devDependencies　は、開発やテストのときにのみ必要なパッケージです。

かつては、jQueryのライブラリ（datepickerとかさ）はコピペしてサーバに設置して使っていたものですが、チームできちんと共有できてなかったり。環境合わせるのに苦労していた時代もありました。
この管理ファイルを揃えておけば、みんな同じ環境が整うわけですね。便利になったものだ。

6. script

コマンドのエイリアスで、ここに記載されたscriptはnpm run で実行することができます。
例えば、

{
  "name": "package-name",
  "version": "1.0.0",
  "description": "my small project for shop",
  "main": "vue.config.js",
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",　　# →これ呼びますよ 
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "eslint:format": "eslint --ext .js,.ts,.vue,.jsx,.tsx --ignore-path .gitignore .",
  },
}

こんなふうに書いておくと、

  $ npm run build

でnuxt-ts build　が走るというわけです。

今日はここまで。
次回は、jQuery系のライブラリをpackage.jsonの管理に切り替える、というのをやってみたいと思います。

1. 開発環境