如何在 JavaScript/NPM 的 monorepo 项目中导入单个模块

Question

I have a monorepo with the following file structure:

➜  yw git:(master) tree
.
├── package.json
├── packages
│   ├── common
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── add.ts
│   │   │   ├── index.ts
│   │   │   └── multiply.ts
│   │   └── tsconfig.json
│   └── server
│       ├── package.json
│       └── src
│           └── index.ts
└── tsconfig.json

Inside packages/common/src/add.ts I have:

export const add = (a: number, b:number) => {
    return a + b
}

I have the multiply version also defined in packages/common/src/multiply.ts .

In packages/common/src/index.ts I imported and re-exported the modules

export * from './add'
export * from './multiply'

The content of packages/common/package.json is:

{
  "name": "common",
  "version": "1.0.0",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "type": "commonjs",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^4.5.2"
  },
  "scripts": {
    "build": "tsc"
  }
}

In common project I run yarn and then yarn build , which generated packages/common/dist with content:

➜  yw git:(master) ✗ tree packages/common/dist
packages/common/dist
├── add.d.ts
├── add.js
├── add.js.map
├── index.d.ts
├── index.js
├── index.js.map
├── multiply.d.ts
├── multiply.js
└── multiply.js.map

now in packages/server/src/index.ts I have:

import { add } from 'common';

console.log(add(1,2))

And in packages/server/package.json , I have:

{
  "name": "server",
  "version": "1.0.0",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "license": "MIT",
  "dependencies": {
    "common": "1.0.0"
  },
  "devDependencies": {
    "typescript": "^4.5.2"
  },
  "scripts": {
    "build": "tsc"
  }
}

So in server project, I am depending on common - as can be seen in the dependency. This works, because when I run npx ts-node packages/server/src/index.ts it consoles log 3.

The question now is, how can I change the dependency definition in packages/server/src/index.ts from:

import { add } from 'common';

console.log(add(1,2))

to

import { add } from 'common/add';

console.log(add(1,2))

That is, import from the add module directly: import { add } from 'common/add'; .

Any ideas on how to achieve this?

Answer 1

As @morganney said, you need to manually map individual modules to their equivalent bundle through exports in common/package.json . I'm answering based on a related dev.to article .

(I don't think there's globbing pattern support.)

{
  "exports": {
    "./add": "dist/add.js",
    "./multiply": "dist/multiply.js"
  }
}

You also have to manually specify each module's typing:

{
  "typesVersions": {
    "*": {
      "./add": ["dist/add.d.ts"],
      "./multiply": ["dist/multiply.d.ts"]
    }
  }
}

I've not played with this, but the article above on dev.to also puts a package.json path in "exports":

{
  "exports": {
    "./add": "dist/add.js",
    "./multiply": "dist/multiply.js",
    "./package.json": "./package.json"
  }
}