子项目联调#

本章将要介绍如何在 Monorepo 下进行子项目之间的联调使用。

准备工作#

按照 「创建子项目」 章节的介绍（如果还没有看过，可以先了解一下），我们首先创建以下三个子项目：

• 一个「应用」子项目
• 一个「模块」子项目

执行 pnpm run new，并按照如下进行选择：

「应用」子项目：

「模块」子项目：

创建成功后，会得到以下项目：

• ./apps/app
• ./packages/components

然后修改一下默认的代码和新增文件：

重命名 ./pakcages/components/src/index.tsx

import './index.css';

export default function ({ text }: { text: string }) {
  return (
    <div>
      This is UI Components Log: <p className="log">{text}</p>
    </div>
  );
}

新增 ./pakcages/components/src/index.css

.log {
  color: gray;
}

修改 ./apps/app/src/App.tsx

import { Switch, Route } from '@modern-js/runtime/router';
import Comp from 'components';

import './App.css';

const App = () => (
  <Switch>
    <Route exact={true} path="/">
      <div className="container-box">
        <Comp text="hello world" />
        {/* 省略... */}
      </div>
    </Route>
    <Route path="*">
      <div>404</div>
    </Route>
  </Switch>
);

export default App;

到此为止我们创建了一个可以被发布到外部的组件项目以及一个使用组件的应用项目，如果直接运行应用项目还暂时无法正常使用。接下来将要介绍如何让它们能够互相联调使用，成功的使应用子项目 apps/app 正常运行。

由于 Modern.js 支持 pnpm 与 Yarn 的 Monorepo 工程，接下来会从这两个方面分别介绍。

在使用 pnpm 的 Monorepo 中进行项目联调#

在 pnpm 的 Monorepo 项目中，我们通过在 apps/app 子项目下执行以下命令，将 packages/components 子项目加入到应用的依赖列表当中。

执行成功后，在 apps/app/package.json 会发生如下变化：

{
  "dependencies": {
++  "components": "workspace:^0.1.0"
  },
}

当依赖安装成功之后，我们还需要将 packages/components 进行构建，因为需要使用其构建产物。

到此为止，app/apps 应用子项目可以正常的运行了。在修改 packages/components 的源码并构建之后，会触发应用子项目的热更新。

在使用 Yarn 的 Monorepo 中进行项目联调#

在 Yarn 的 Monorepo 项目中，默认情况下可以直接在 apps/app 应用项目中直接使用组件项目。

但是考虑到依赖关系的严谨性，建议在 apps/app/package.json 中进行显式依赖声明：

{
  "dependencies": {
++  "components": "0.1.0"
  },
}