那些遇到过的问题

在 monorepo 和纱线工作区中发现了错误的依赖关系

Shu*_*sky 6 reactjs monorepo angular yarn-workspaces

我们刚刚开始在我们的两个主要项目中使用 monorepo 和纱线工作区。一个最初是基于 Angular 11 构建的，另一个是在 React 中构建的。

我们设置了纱线工作区，并且在一个项目（Angular）上一切都运行得很好。反应方虽然接错了babel-loader。

这是当前的文件夹结构：

root
|--package.json
|--node_modules
|  |--"babel-loader": "8.1.0"
|--hub
|  |--package.json
|  |--node_modules
|     |-- <no babel-loader here>
|--platform
|  |--package.json
|  |--node_modules
|     |--"babel-loader": "8.2.3"
...
Run Code Online (Sandbox Code Playgroud)

根package.json：

{
  "private": true,
  "workspaces": [
    "platform",
    "hub",
    "shared"
  ]
}
Run Code Online (Sandbox Code Playgroud)

中心package.json

{
  "name": "hub",
  "version": "0.1.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --maxConcurrency=2 --maxWorkers=2",
    "eslint": "eslint 'src/app/**/*.{js,jsx,ts,tsx}'",
    "eslint:fix": "eslint --fix 'src/app/**/*.{js,jsx,ts,tsx}'",
    "lint": "yarn run eslint",
    "tsc": "tsc --skipLibCheck --noEmit",
    "fmt": "prettier --write --config ./.prettierrc.yml '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
    "fmt:check": "prettier --config ./.prettierrc.yml --check '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
    "check": "yarn run fmt:check && yarn run tsc && yarn run lint",
    "pre-commit": "yarn run fmt && yarn run check && yarn run test",
    "storybook": "start-storybook -s public -p 6006"
  },
  "dependencies": {
    "@date-io/date-fns": "1.3.13",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "i18next": "^20.2.1",
    "lodash": "^4.17.15",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.8.13",
    "react-redux": "7.2.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-controls": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/react": "^6.1.11",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "babel-loader": "8.1.0",
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jest-dom": "^3.9.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^4.6.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "26.6.0",
    "jest-svg-transformer": "^1.0.0",
    "msw": "^0.35.0",
    "msw-storybook-addon": "^1.3.0",
    "prettier": "^2.3.1",
    "react-test-renderer": "^17.0.2",
    "redux-mock-store": "^1.5.4",
    "ts-jest": "^26.5.6",
    "typescript": "^4.3.5",
    "webpack": "4.44.2"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.svg$": "jest-svg-transformer"
    },
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "msw": {
    "workerDirectory": "public"
  }
}
Run Code Online (Sandbox Code Playgroud)

平台package.json

{
  "name": "platform",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start-with-ssl": "node --max-old-space-size=4096 ../node_modules/@angular/cli/bin/ng serve --ssl --ssl-key docker/ssl/server.key --ssl-cert docker/ssl/server.pem",
    "build": "node --max-old-space-size=4096 ../node_modules/@angular/cli/bin/ng build --configuration=production",
    "test": "jest --maxConcurrency=2 --maxWorkers=2",
    "update-snapshots": "jest --updateSnapshot",
    "test-with-coverage": "ng test --code-coverage",
    "eslint": "eslint 'src/app/**/*.{js,jsx,ts,tsx}'",
    "eslint:fix": "eslint --fix 'src/app/**/*.{js,jsx,ts,tsx}'",
    "lint": "yarn run eslint",
    "tsc": "tsc --skipLibCheck --noEmit",
    "e2e": "ng e2e",
    "storybook": "start-storybook -s public -p 6006",
    "build-storybook": "build-storybook",
    "fmt": "prettier --write --config ./.prettierrc.yml '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
    "fmt:check": "prettier --config ./.prettierrc.yml --check '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
    "check": "yarn run fmt:check && yarn run tsc && yarn run lint",
    "pre-commit": "yarn run fmt && yarn run check && yarn run test"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.svg$": "jest-svg-transformer"
    },
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "jest-canvas-mock"
    ]
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^10.0.0",
    "@angular/animations": "^12.2.5",
    "@angular/cdk": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^12.2.5",
    "@angular/material": "^12.2.5",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "@auth0/angular-jwt": "^4.0.0",
    "@date-io/date-fns": "1.3.13",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@sentry/browser": "^5.15.5",
    "@stripe/react-stripe-js": "^1.5.0",
    "@stripe/stripe-js": "^1.19.1",
    "@types/hammerjs": "^2.0.39",
    "angular-i18next": "^10.1.0",
    "auth0-js": "^9.14.0",
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "date-fns": "^2.23.0",
    "flux-standard-action": "^2.0.3",
    "hammerjs": "^2.0.8",
    "html-react-parser": "^1.2.6",
    "i18next": "^20.2.1",
    "i18next-http-backend": "^1.2.1",
    "jest-svg-transformer": "^1.0.0",
    "keycharm": "^0.4.0",
    "lodash": "^4.17.15",
    "mixpanel-browser": "^2.28.0",
    "ngx-logger": "^4.1.9",
    "ngx-mat-select-search": "^3.1.2",
    "ngx-quill": "^13.0.1",
    "object-hash": "^2.0.3",
    "quill": "^1.3.7",
    "quill-image-compress": "^1.2.16",
    "quill-image-resize-module-react": "^3.0.0",
    "react": "^17.0.1",
    "react-avatar-editor": "^12.0.0",
    "react-color": "^2.19.3",
    "react-colorful": "^5.1.4",
    "react-currency-format": "^1.0.0",
    "react-dnd": "^14.0.4",
    "react-dnd-html5-backend": "^14.0.2",
    "react-dom": "^17.0.1",
    "react-hook-form": "^7.15.2",
    "react-i18next": "^11.8.13",
    "react-keyed-flatten-children": "^1.3.0",
    "react-player": "^2.9.0",
    "react-query": "^3.13.6",
    "react-quill": "^1.3.5",
    "react-redux": "7.2.2",
    "react-select": "^4.3.1",
    "reduce-reducers": "^1.0.4",
    "redux": "4.0.1",
    "redux-actions": "^2.6.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "rxjs": "^6.5.5",
    "sass": "^1.39.0",
    "svg-react-loader": "^0.4.6",
    "tslib": "^2.0.0",
    "uuid": "^8.3.1",
    "vis-data": "^7.1.2",
    "vis-network": "^9.0.4",
    "vis-util": "^5.0.2",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.1",
    "@angular/cli": "^12.2.5",
    "@angular/compiler-cli": "^12.2.5",
    "@angular/language-service": "^12.2.5",
    "@babel/core": "^7.15.5",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-controls": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/react": "^6.1.11",
    "@testing-library/react": "^11.2.6",
    "@types/jest": "^26.0.23",
    "@types/mixpanel-browser": "^2.23.1",
    "@types/node": "^12.11.1",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "babel-loader": "^8.2.2",
    "codelyzer": "^5.2.2",
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jest-dom": "^3.9.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^4.6.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "jest-canvas-mock": "^2.3.1",
    "msw": "^0.35.0",
    "msw-storybook-addon": "^1.3.0",
    "prettier": "^2.3.1",
    "protractor": "~7.0.0",
    "react-test-renderer": "^17.0.2",
    "redux-mock-store": "^1.5.4",
    "ts-jest": "^26.5.6",
    "ts-node": "~8.0.1",
    "typescript": "4.3.5",
    "webpack-bundle-analyzer": "^4.4.0"
  },
  "msw": {
    "workerDirectory": "public"
  }
}
Run Code Online (Sandbox Code Playgroud)

中心tsconfig.json

{
  "extends": "./tsconfig.base.json",
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "typeRoots": ["node_modules/@types", "../node_modules/@types"],
    "lib": ["es2015", "es2016", "es2017.object", "dom"],
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "tslib": ["path/to/node_modules/tslib/tslib.d.ts"]
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

平台tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "typeRoots": ["node_modules/@types", "../node_modules/@types"],
    "lib": ["es2015", "es2016", "es2017.object", "dom"],
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "tslib" : ["path/to/node_modules/tslib/tslib.d.ts"],
      "node_modules": ["node_modules","../node_modules"],
      "@priz/shared/*": ["../shared/src/*"]
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

所以，结果是：

该平台运行完美。当我尝试从 开始时hub，yarn run start出现以下错误。

在此输入图像描述

当然，我可以禁用飞行前检查，但我真的不想走这条路。这几乎就像它忽略本地node_modules并从根获取包。

为什么会发生这种情况？有没有办法强制yarn优先获取本地包？我缺少什么？

另一件要补充的事情是，看起来如果我删除纱线缓存它就可以了。但是，在下一次构建之后，一切都会回到相同的错误。

归档时间：

查看次数：

1045 次

最近记录：

4 年，1 月 前
相关归档
Angular2路由器(@ angular/router),如何设置默认路由？ 63
React中的内联CSS样式:如何实现媒体查询？ 43
如何正确更改复选框？ 18
在angular-cli中使用的.map文件是什么,并且可以构建不创建这些文件？ 14
如何在Angular2中使用带有Observable的id查找数组的元素 13
在Angular2组件中侦听组件调整大小事件的最佳方法是什么？ 11
create-react-app npm在生产模式下运行。也许不可能？ 11
将ngModel绑定到动态复选框列表:Angular 2/Typescript 9
禁用角度形式的输入 9
导航到另一个页面后，离子组件未损坏 8
难疑归档
在JavaScript中编码URL？ 2392
.NET中的decimal,float和double之间的区别？ 2015
如何在Java中打破嵌套循环？ 1751
JavaScript发布请求,如表单提交 1465
如何在Ruby on Rails迁移中重命名数据库列？ 1419
PHP中的startsWith()和endsWith()函数 1409
在Python中将整数转换为字符串？ 1282
如何在PHP中使用bcrypt进行散列密码？ 1230
使用pip安装特定的软件包版本 1199
有哪些常用的命名git分支实例的例子？ 1034