LernaとYarn Workspacesを試す
モチベーション
既存のプロダクトをpackage分けしたい。
yarn workspaceで小さく始められそうだとは思うが、一応lernaも試しておく。
というかyarn workspaceで辛くなければ基本的にそっちを導入したい。
参考
Yarn Workspace
Reactはyarn workspace使ってそうだな。
leana
chakura-uiも使っている。
雑にコードを眺めてみる
うーん。
lernaを使う場合はrecommendはlerna + yarnworkspace かな。
つまりlernaを導入するとyarn workspace単体で使うのとくらべてメリットがあるかどうか。
外部にnpm packageとして公開しないというのは判断基準になるのかな??
(--yes/--privateを同時に指定してみる。)
$ mkdir my-project
$ cd my-project/
$ yarn init -yp
yarn init v1.22.4
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨ Done in 0.02s.
$ cat package.json
{
"name": "my-project",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true
}
mkdir packages
package.jsonに追加。
"workspaces": ["packages/*"]
とりあえず雑にpackageつくる
mkdir packages/utils
cd packages/utils
yarn init -y
rootに戻って
mkdir packages/components
cd packages/components
yarn init -y
いまこんな感じ。
├── package.json
├── packages
├── components
│ └── package.json
└── utils
└── package.json
この状態でyarn install
すると
$ tree
.
├── node_modules
│ ├── components -> ../packages/components
│ └── utils -> ../packages/utils
├── package.json
├── packages
│ ├── components
│ │ └── package.json
│ └── utils
│ └── package.json
└── yarn.lock
シンボリックリンクが貼られる。
You also need to know that the /workspace-a/package.json#name field is used and not the folder name.
なるほど、ディレクトリ名とpackage.jsonのnameは揃えているがpackage.jsonのnameが使われるっぽい。
cd packages/utils
yarn add dayjs
ここで、utilsパッケージにdayjsを導入してみる。
index 664807f..96144d6 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -2,5 +2,8 @@
"name": "utils",
"version": "1.0.0",
"main": "index.js",
- "license": "MIT"
+ "license": "MIT",
+ "dependencies": {
+ "dayjs": "^1.10.4"
+ }
}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..7f7f1f2
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+dayjs@^1.10.4:
+ version "1.10.4"
+ resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+ integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
package.jsonに追加されるが、yarn.lockはルートに作られる。
ちょっと試しにプロジェクトルートでyarn addしてみた。
typesciprtって共通だからルートで・・
$ yarn add -D typescript
yarn add v1.22.4
error Running this command will add the dependency to the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
ふむふむ。workspaceではなく、rootに追加しようとしているぞと怒られる。(そしてignoreすることもできる)
typescript prettierとかは個別に管理するか、rootでまとめて管理するかだが・・
rootで管理する方針で良いかなという気がする。
なのでignoreオプションを指定して、ルートに追加する。yarn add -W prettier
共通化するやつ
-
prettier
-
eslint
-
jest等
-
typescript
-
hoskyとかgitのhook設定とか
とかと、その設定ファイル。
- tsconfig.jsonは書くpackageでextendsで読み取るとよさそう。(rootのtsconfig.jsonで共通化しつつ個別に拡張できる)