「ReactNativeにゆかりのあるスタートアップが集う会」で発表した資料

1. monorepoによる複数のアプリ管理
とrn-cli.config
@natural_clar

2. 自己紹介
Jesse
株式会社CureApp.
アメリカ人
フルスタックエンジニア
@natural_clar

3. CureApp
治療アプリの開発
Universal JS
Typescript, React, ReactNative, Node
typeの共有
ドメインの共有
monorepo

4. monorepoとは

5. 複数の子パッケージ
lernaやyarn workspaces
https://github.com/lerna/lerna
@babelやcreate-react-appで使われている

6. root/
├ packages/
│ └ assets/
│ └src
│ └package.json
│ └ interfaces/
│ └src
│ └package.json
│ └ core-v1/
│ └src
│ └package.json
│ └ core-v2/
│ └src
│ └package.json
│ └ newApp-v1/
└ package.json

7. なぜmonorepoを？

8. 複数バージョンの同時並行開発
同ドメインを使う複数アプリの開発

9. 平和な世界！

10. エラーの嵐！

11. 複数のreact-nativeを読み込んでしまう
monorepo上のassetsを読み込まない

12. 救世主
rn-cli.config

13. rn-cli.config とは

14. react-nativeのbundlerであるmetroの設定ファイル
react-nativeでtypescriptを使用する為にも必要

15. 解決策
他のパッケージのreact-nativeをblacklistにいれる
依存先の入っている子パッケージをwatchFoldersでWatchする

16. const blacklist = require('metro-config/src/defaults/blacklist')
const fs = require('fs')
// monorepo内の他のPackageをWatchする
const watchFolders = [
path.resolve(__dirname, '../..'),
]
// monorepo内にある他のReact-nativeのパスをBlacklistに入れる
const workspacesBlacklist = ['.DS_Store', 'lib', 'CurrentApp']
const workspaces = fs
.readdirSync('..')
.filter(w => !workspacesBlacklist.includes(w))
module.exports = {
// monorepoの中にあるRNのパスを解決させる
resolver: {
blacklistRE: blacklist(
workspaces.reduce(
(acc, workspacePath) =>
acc.concat([
new RegExp(
path.join(workspacePath, 'node_modules', 'react-native', '.*')
),
new RegExp(
path.join(
workspacePath,'node_modules','.*','react-native','.*')
),
]),
)
),
},

17. コードは割愛

18. 問題はまだある

19. RN 0.57.2以降から
子パッケージ内の画像を読み込まない
https://github.com/facebook/metro/issues/290

20. とりあえず画像は各パッケージに

21. ありがとうございました