[vue3] npm i 설치시 의존성 모듈 확인방법

온라인에서 node module 추가할때 아래와같이 한다.

아래 모듈은 vite build 시 청크파일을 한개로 만들수 있는 모듈이다.

npm i vite-plugin-singlefile

그러면 package.json 에 해당 모듈이 추가된다.

{
  "name": "coForward Relay Socket Client",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview --host"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.2.1",
    "@fortawesome/free-brands-svg-icons": "6.2.1",
    "@fortawesome/free-regular-svg-icons": "6.2.1",
    "@fortawesome/free-solid-svg-icons": "6.2.1",
    "@fortawesome/vue-fontawesome": "3.0.1",
    "core-js": "^3.30.2",
    "iconv-lite": "^0.6.3",
    "jquery": "^3.7.0",
    "mitt": "^3.0.0",
    "pinia": "^2.1.3",
    "vite-plugin-singlefile": "^0.13.5",
    "vue": "^3.3.2",
    "vue-date-fns": "^2.0.2",
    "vue-lodash": "^2.1.2",
    "vue-plugin-load-script": "^2.1.1",
    "vue-router": "^4.2.2",
    "vue3-datepicker": "^0.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "node-sass": "^9.0.0",
    "sass": "^1.62.1",
    "sass-loader": "^13.3.1",
    "vite": "^4.3.5",
    "vite-plugin-node-polyfills": "^0.8.2"
  },
  "type": "module"
}

그렇다면 vite-plugin-singlefile 모듈의 의존적인 모듈이 있을수 있다.

vite-plugin-singlefile 의존적 모듈은 package-lock.json 에서 찾아볼수 있다.

 ...
 ...
 "node_modules/vite-plugin-singlefile": {
  "version": "0.13.5",
  "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-0.13.5.tgz",
  "integrity": "sha512-y/aRGh8qHmw2f1IhaI/C6PJAaov47ESYDvUv1am1YHMhpY+19B5k5Odp8P+tgs+zhfvak6QB1ykrALQErEAo7g==",
  "dependencies": {
    "micromatch": "^4.0.5"
  },
  "engines": {
    "node": "^14.18.0 || >=16.0.0"
  },
  "peerDependencies": {
    "rollup": ">=2.79.0",
    "vite": ">=3.2.0"
  }
},
...
...

  "dependencies": {
    "micromatch": "^4.0.5"
  },

micromatch 모듈 추가되어 오프라인에서 적용하려면 같이 반입해줘야 한다.