Lerna + TypeScript + npm: How do I properly setup the config so that @projectName/package paths through the dist directory?

对着背影说爱祢 提交于 2021-02-08 02:21:14

问题


I'm trying to get my project setup as a monorepo but I'm running into an annoying issue of pathing with TypeScript & Lerna.

I have 2 react projects, an API, and a core project which warehouses my domain model & typescript definitions. For right now, I need to be able to use the code from the core in my API and the definitions across my 2 react projects.

The issue that I'm running into that is that I have to path from the root of each package. For example, @projectName/core/src/models/myModel instead of @projectName/core/models/myModel. The dist directory does not contain that structure and that's what I'm aiming to import.

I found a couple of articles suggesting how to set it up but I'm still running into issues and not sure where I'm going wrong.

I'm just focusing right now on exporting @projectName/core.

./tsconfig.json

{
  "exclude": ["node_modules", "dist"],
  "compilerOptions": {
    "baseUrl": ".",
    "sourceMap": true,
    "composite": true,
    "declaration": true,
    "paths": {
      "@projectName/core": ["packages/core/src"],
      "@projectName/api": ["packages/api/src"],
      "@projectName/admin": ["packages/admin/src"],
      "@projectName/client": ["packages/client"]
    }
  }
}

./package.json

{
  "name": "projectName",
  "private": true,
  "devDependencies": {
    "lerna": "^3.20.2",
    "typescript": "^3.8.3"
  }
}

./packages/core/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["ES2019"],
    "module": "commonjs",
    "target": "ES2019",
    "strict": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },

  "include": ["src/**/*"]
}

./packages/core/package.json

{
  "name": "@projectName/core",
  "version": "0.0.1",
  "private": true,
  "directories": {
    "lib": "dist",
    "test": "tests"
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "npm run clean && npm run compile",
    "clean": "rm -rf ./dist",
    "compile": "tsc"
  },
  "dependencies": {
  },
  "devDependencies": {
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
  }
}

./packages/api/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["ES2019"],
    "module": "commonjs",
    "target": "ES2019",
    "strict": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

./packages/api/package.json

{
  "name": "@projectName/api",
  "version": "0.0.1",
  "description": "api",
  "files": [
    "dist"
  ],
  "main": "dist/server.js",
  "scripts": {
  },
  "dependencies": {
    "@packageName/core": "^0.0.1",
  },
  "devDependencies": {
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-node-externals": "^1.7.2"
  },
  "private": true
}

I removed dependencies from the above to keep it readable.

These settings were added to ./tsconfig.json in an attempt to get this to work:

    "composite": true,
    "declaration": true

Any help would be much appreciated. Thanks!

来源:https://stackoverflow.com/questions/61568475/lerna-typescript-npm-how-do-i-properly-setup-the-config-so-that-projectnam

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!