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

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 编译 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

或

# 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 的用法

现在我们可以在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;