Open5

LernaとYarn Workspacesを試す

remonremon

https://classic.yarnpkg.com/en/docs/cli/init/#toc-yarn-init-private-p

(--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で共通化しつつ個別に拡張できる)