reactjs - 不使用相对路径语法导入方法

Question

我想了解更多关于 monorepo 项目的信息。我有一个名为 dnd 的存储库，它正在使用 Yarn工作区 Lerna .存储库包含两个主要目录。

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';

存储库:Link

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;

Answer 1

是的，你可以。

免责声明:根据我在自己的 monorepo 项目中的有限经验，我是在运行中(未经测试)输入的。

尽管如此，它应该会给您一个很好的起点。

想法

1. 您需要使用 microbundle 或 rollup 将 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 文件，它将导出您所有的 lib 函数
• 这将是您的 @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

或

# 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/app中@dnd/core的使用

现在我们可以在 app 源代码中从 core 导入我们的函数。

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

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

export default App;