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

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

2 голосов
/ 26 мая 2020

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

packages/core
packages/app

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

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

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

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

I должны пройти по относительному пути с этим уродливым синтаксисом. Теперь путь правильный, но 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 / приложение / 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;
...