Installing a local NPM package from its folder ignores the package's "files" configuration

TL;DR Packaging my local npm package works fine and it ignore the non-distribution file, but installing it from it's folder includes all files.

Environment:

• Node: v14
• NPM: v7
• Babel: V7

I have a small reusable component library (./common/components) I want to share between my apps. I'm using Babel to build its src code into a lib folder - which seems to work fine. When I run a npm pack command, I can see that only the lib folder and the package.json files get included in the package TGZ file. But when I install the package in one of my apps with npm i ../../common/components, then all the package's code (src, node_modules, .babelrc.json, package-lock.json, etc.) gets included in the app's node_modules folder.

What am I doing wrong, or am I misunderstanding something? Is there a way for me to install only the lib folder?

Here is my component package's code:

• package.json:

  {
    "name": "components",
    "version": "1.0.0",
    "main": "lib/*",
    "files": [
      "lib/*"
    ],
    "scripts": {
      "clean": "rimraf ./lib",
      "postinstall": "npm run build",
      "prebuild": "npm run clean",
      "build": "babel src --out-dir lib --copy-files"
    },
    "devDependencies": {
      "@babel/cli": "7.14.5",
      "@babel/core": "7.14.6",
      "@babel/preset-env": "7.14.7",
      "rimraf": "3.0.2"
    }
  }
  

• .babelrc.json:

  {
    "presets": ["@babel/preset-env"]
  }
  

• Here's my output from npm pack:

  

Here's my app's code:

• package.json:

  {
    ...
    "dependencies": {
      "components": "file:../../common/components",
      ...
    },
    ...
  }
  

• Here's what gets installed to the app's node_modules folder: