Yarn Workspacesを使って複数のExpoプロジェクトを管理する 📁

前回は、簡単に Yarn Workspacesの環境を構築しました。

blog.kimizuka.org

今回は、Yarn Workspacesを使って複数のExpoプロジェクトを管理してみようと思います。

というのも、前回の構築方法で、複数のExpoプロジェクトを管理すると、

Error: Cannot resolve entry file: The `main` field defined in your `package.json` points to a non-existent path

というエラーが出るからです。

このエラーは、expo-yarn-workspacesを導入することで簡単に解決できます。

github.com

expo-yarn-workspacesの使い方

ディレクトリ構成は前回と同じで、rootディレクトリ配下にworkspace-a、workspace-bがあるものとします。
そして今回はworkspace-a、workspace-bがExpoプロジェクトという想定です。

❶ expo-yarn-workspacesの導入

yarn workspace workspace-a add -D expo-yarn-workspaces

yarn workspace workspace-b add -D expo-yarn-workspaces

で、それぞれのプロジェクトにexpo-yarn-workspacesを導入します。

❷ workspace-a/package.json、workspace-b/package.jsonの編集

{
  "main": "__generated __/AppEntry.js",
  "scripts": {
    "postinstall": "expo-yarn-workspaces postinstall"
  },
  "expo-yarn-workspaces": {
    "symlinks": ["react-native-unimodules"]
  }
}

mainの書き換えと、postinstallの追加、expo-yarn-workspacesの追加を行います。

❸ rootにmetro.config.jsを追加

root/metro.config.js

const { createMetroConfiguration } = require('expo-yarn-workspaces');

module.exports = createMetroConfiguration(__dirname);

追加します。

❹ workspace-a/eas.json、workspace-b/eas.jsonの追加

eas.json

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "ENTRY_FILE": "./__generated__/AppEntry.js"
      }
    }
  }
}

追加します。

❺ root/package.jsonの編集

{
  "scripts": {
    "start:a": "yarn workspace workspace-a start",
    "start:b": "yarn workspace workspace-b start",
    "build:a": "yarn workspace workspace-a build",
    "build:b": "yarn workspace workspace-b build"
  }
}