带打字稿的纱线工作区

Question

我使用TypeScript，并希望使用yarn工作区将“通用”包与我的应用程序“ app”链接。安装工作正常，但应用程序无法从“ common”加载文件。

项目结构：

root
  packages
    common
      package.json
      tsconfig.json
    app 
      package.json
      tsconfig.json
package.json

root package.json

{
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "start-all": "lerna run --parallel watch"
  },
  "devDependencies": {
    "lerna": "^3.22.0"
  }
}

常用package.json：

{

"name": "@app/frontend-common",
      "version": "1.0.0",
      "private": true,
      "main": "build/index.js",
      "files": [
        "build"
      ],
      "typings": "build/index.d.ts",
      "dependencies": {
       ...
      },
      "devDependencies": {
        ...
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "scripts": {
        "build": "tsc -b",
        "watch": "tsc -b --watch"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

常见的tsconfig.json

{
  "compilerOptions": {
    "outDir": "build",
    "target": "es5",
    "lib": [ "dom", "dom.iterable", "esnext", "es2015" ],
    "allowJs": false,
    "sourceMap": false,
    "declaration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "rootDir": "src",
  "include": ["src"],
  "exclude": ["node_modules", "build"]
}

app package.json

{
  "name": "app",
  "version": "4.0.0",
  "private": true,
  "dependencies": {
    "@app/frontend-common": "1.0.0",
    ...
  },
  "scripts": {
    "watch": "react-scripts start",
  },
  "devDependencies": {
    ...
  },
  "staticFiles": {
    "staticPath": "public",
    "watcherGlob": "**"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

app tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "include": [
    "src",
    "types/shims.d.ts",
    "types/fonts.d.ts"
  ]
}

根节点模块

...
@app
  frontend-common
  build
  src
  package.json
  tsconfig.json