Folder hierarchy in packages - Turbo/Monorepo

Question

Many articles and tutorials teach how to share components in monorepo projects.

But they show something in an unproductive way.

Share each component (package1, package2) separately in workspace. What I intend to do is export a complete package using atomic design, coming from a ui package only.

But when trying to do this this error is generated

I'm importing this way

import { Button } from 'ui/atoms'

package.json

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "dev": "tsc --watch --outDIr dist",
    "build": "tsc --outDir dist",
    "lint": "eslint *.ts*"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "react": "^18.2.0",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.2"
  }
}

Using import from "ui" it works, that is, we would have to keep creating files like Button.tsx and importing them in the ui index and using them in the project, but it is inefficient, imagine thousands of components (atoms, molecules).

import * as React from "react";
export * from "./Button";

I think I'll have to share other config files, so I'll be willing to change the post and put them.

App.tsx - Importing ui

import React from 'react';
import './App.css';

import { Button } from 'ui/atoms'

function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  );
}

export default App;

package.json

{
  "name": "main_",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4",
    "tsconfig":"workspace:*",
    "ui":"workspace:*"
  },
  "scripts": {
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

link to the repository

micro-frontend

Ui library is being used in "apps/main_/src/App.tsx

Answer 1

一段时间没有搞乱 monorepo 后，这些天我回来并找到了解决方案。

让我们来看看我报告的、认为不可行的问题。许多使用 Turbo 的 monorepo 项目使用组件共享，如下所示。

//index.tsx
export { Avatar, AvatarGroup } from "./components/avatar";
export type { AvatarProps, AvatarGroupProps } from "./components/avatar";
export { Badge, UpgradeTeamsBadge } from "./components/badge";
export type { BadgeProps } from "./components/badge";
export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./components/breadcrumb";
export { Button, LinkIconButton } from "./components/button";
export type { ButtonBaseProps, ButtonProps } from "./components/button";
export { ButtonGroup } from "./components/buttonGroup";
export {
  Checkbox,
  EmailField,
  EmailInput,
  FieldsetLegend,
  DropdownMenuLabel,
  Steps,
  WizardForm,
  SettingsToggle,
  Stepper,
  Switch,
} from "./components/form";

意识到您必须继续导入索引中的所有组件，以便您可以在其他项目中使用它们。

更正

要解决此问题，只需将其他文件添加到 eslint 即可

  "scripts": {
    "lint": "eslint *.ts* atoms/**"
  },

这样就不需要导入索引中的所有组件，事实上，您甚至不需要它