Методы импорта без использования синтаксиса относительного пути

Я хочу узнать больше о monorepo проектах. У меня есть репозиторий с именем dnd, который использует рабочие области Yarn с Лерна. Репозиторий содержит два основных каталога.

packages/core
packages/app

Каталог core содержит служебные методы, а каталог app использует шаблон create-react-app . Теперь вот что я хочу использовать свои служебные методы в основных app компонентах примерно так.

import { concat } from '@dnd/core';

В настоящее время я импортирую что-то вроде этого

import { concat } from '../../../core/lib/utils';

Я должен пройти по относительному пути с этим уродливым синтаксисом. Теперь путь правильный, но create-react-app выдает ошибку.

Module not found: You attempted to import ../../../core/lib/utils which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Есть ли способ просто импортировать наши core методы каталога внутри наших app компонентов с чем-то вроде этого?

import { concat } from '@dnd/core';

Репозиторий: Ссылка

dnd / package.json:

{
  "name": "root",
  "private": true,
  "scripts": {
    "bootstrap": "lerna bootstrap --use-workspaces"
  },
  "devDependencies": {
    "lerna": "^3.21.0"
  },
  "workspaces": [
    "packages/*"
  ]
}

dnd / lerna.json:

{
  "useWorkspaces": true,
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0"
}

dnd / packages / core / package.json:

{
  "name": "@dnd/core",
  "version": "0.0.0",
  "description": "> TODO: description",
  "homepage": "",
  "license": "ISC",
  "main": "lib/core.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "scripts": {
    "test": "echo \"Error: run tests from root\" && exit 1"
  }
}

dnd / packages / core / lib / utils.js:

export const concat = (...args) => {
    return ''.concat(...args);
};

dnd / packages / app / package.json:

{
  "name": "@dnd/rain",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

dnd / packages / app / src / components / App.js:

import React from 'react';
import { concat } from '../../../core/lib/utils';

const App = () => {
  return (
    <div className="App">
      { concat('Hello', 'World', 'Culture') }
    </div>
  );
};

export default App;

reactjs lerna yarn-workspaces
person Ven Nilson    schedule 26.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, ты можешь.

Отказ от ответственности: я набираю это на лету (без тестирования), основываясь на моем ограниченном опыте работы с моим собственным монорепроектом.

Тем не менее, это должно стать для вас отличной отправной точкой.

Идея

  1. Вам нужно будет скомпилировать packages/core с помощью микробандла или свертки в бандл.

  2. Затем вы хотите включить этот связанный packages/core в качестве зависимости в packages/app

Настраивать

packages/core/package.json

  • microbundle - это devDependency, поскольку нам это нужно только во время разработки.
{
  "name": "@dnd/core",
  "scripts": {
    "dev": "microbundle watch lib/*.js --target node"
  },
  "source": "lib/index.js", // entry point into @dnd/core
  "main": "dist/index.js",  // the compiled file/bundle that @dnd/app will reference 
  "devDependencies": [
   "microbundle": "^0.13.0"
  ]
}

packages/app/package.json

Добавляем наш скомпилированный core пакет в package/app

{
  "name": "@dnd/app"
  "dependencies": [
    "@dnd/core": 0.0.0
  ]

packages/core/lib/index.js

  • Создайте index.js файл, который будет экспортом всех ваших функций библиотеки.
  • Это будет ваша отправная точка для @dnd/core
export * from './utils.js'
export * from './other-utils.js'

До развития

Прежде чем мы начнем разработку, нам нужно будет установить новые зависимости.

lerna bootstrap

Затем запустите npm dev скрипт

# this will run the npm dev script only for packages/core
cd packages/core
npm run dev

or

# from the root of your project (inside /dnd folder)
# this will do a `npm run dev` equivalent inside all your packages
lerna run dev

Это скажет microbundle следить за изменениями внутри packages/core/lib/index.js

Всякий раз, когда вы меняете код внутри packages/core/lib/utils.js, он перекомпилирует код в packages/core/dist/index.js

Использование @dnd/core внутри @dnd/app

Теперь мы можем импортировать наши функции из core в наш app исходный код.

import React from 'react';
import { concat } from '@dnd/core';

const App = () => {
  return (
    <div className="App">
      { concat('Hello', 'World', 'Culture') }
    </div>
  );
};

export default App;
person ali    schedule 08.05.2021