LernaでGatsbyテーマプロジェクトを設定する方法を学ぶ：このガイドでは、モノリポジトリとは何か、Yarnワークスペースの代わりにNPMを使用してLERNAでそれを管理する方法を理解するのに役立ちます。

Index

  • Lernaとは何ですか、なぜ試してみる価値がありますか？
  • シェルからNPMを使用してLernaを設定する
  • シェルを使用して足場フォルダとファイル
  • Lernaを使用する
    • あなたのアプローチを選択してくださ
  • Lerna bootstrapですべてをオーケストレーション
  • コマンドとスクリプトの実行
  • Update Wizard

Lernaとは何ですか、なぜそれは試してみる価値がありますか？

私はJason Lengstorf(@jlengstorf)のGatsbyテーマオーサリングコースに従うようになり、すぐに私は’Yarn Workspaces’について何も知らないことに気付きました。 これは、mono-repoと呼ばれるものを管理するためのかなりの方法です: 複数のプロジェクトが内部にあり、依存関係を共有できるリポジトリ。

doppelmutzi.github.io:

このようなプロジェクトは、ワークスペースまたはパッケージと呼ばれます。 対照的に、一つのプロジェクトだけを収容する各リポジトリで複数のリポジトリを使用することは、マルチレポアプローチと呼ばれています。

mono-repoアプローチで私を驚かせたことの一つは、私のパッケージ/ワークスペースが同じnode_modules依存関係をローカルで共有できることでした。 これは私に時間と物理的なスペースを節約します。

lernaとyarnワークスペースは、npmや他のレジストリに公開することを強制することなく、単一のレポでライブラリやアプリを構築する機能を提供します。 これらの技術の背後にある美しさは、パッケージを分析することによってパッケージの依存関係を見つけることができるということです。各プロジェクトのルートフォルダにあるjsonファイル。 したがって、これらのツールは、手動でシンボリックリンクを作成したり、”低レベル”npm linkを直接使用したりすることを時代遅れにします。

今、あなたはすでにyarn workspacesを使用している場合でも、私はそれがvantagesのシリーズを提供するので、試してみる価値がLernaだと思います。 あなたはYarnワークスペースでLernaを使用することができます:

1つのlernaコマンドを使用すると、すべてのパッケージまたは特定のパッケージを反復処理し、各パッケージに対して一連の操作(linting、testing、buildingなど)を実行できます。 これにより、依存関係管理プロセスを引き継ぐyarnワークスペースを補完します。

だから最後に私はLernaを学ぶことにしました-早口言葉で申し訳ありませんが、私は糸に切り替えたくありませんでした（私はnpmに慣れているので）。 ここで私はそれを動作させることができた方法です:

シェルからNPMでLernaを設定する

プロジェクトのディレクトリを作成し、次のコマンドで入力します:

mkdir try-lernacd try-lerna

Lernaをグローバルにインストールするか（npm i -g lerna）、npxと一緒に使用することができます。

  • イット-レルナ

    npx lerna init --independent

これは:

  • init gitリポジトリ
  • package.json
  • を作成するlerna.json
  • を作成するpackagesフォルダを作成します（ここでワークスペースを配置できます）。

パッケージは、lernaがワークスペースを呼び出す方法です。

すべてのパッケージをルートフォルダに入れてから、一致するように配列を変更することができます（”yarn workspaces”アプローチのように）。

私のレルナ。jsonファイルには、stream: true（lernaでdevelopを実行したときにgatsbyの出力を確認するため）とhoist: true（node_modulesをコマンドlerna addでもホイストするため）があります。):

{ "packages":, "version":"independent", "stream":true, "command":{ "bootstrap":{ "hoist":true } }}

これは手動で追加するか、次の単純なシェルコマンドを使用できます:

echo "{\r\t\"packages\":,\r\t\"version\":\"independent\",\r\t\"stream\":true,\r\t\"command\":{\r\t\t\"bootstrap\":{\r\t\t\t\"hoist\":true\r\t\t}\r\t}\r}" > lerna.json

シェル

を使用した足場フォルダとファイルこのセクションは、導入にリンクされているJason Lengstorfのコースからの最初のレッスンに続いて手で行うことができます。
私は、シェルからのいくつかのコマンドでそれらを達成するために、すべての基本的な通路を収集するだけです。
私のアプローチを使用したい場合は、”NAME”をテーマの名前に置き換えてから、このコマンドをコピーして貼り付けることを忘れないでください:

mkdir -p packages/{gatsby-theme-NAME,site}
touch packages/{gatsby-theme-NAME,site}/{index.js,package.json}
echo "//loop" >> packages/{gatsby-theme-NAME,site}/index.js

パッケージの初期コンテンツ。サイトフォルダのjson:

echo "{\r\t\"private\":true,\r\t\"name\":\"site\",\r\t\"version\":\"1.0.0\",\r\t\"license\":\"MIT\",\r\t\"scripts\":{\r\t\t\"builds\":\"gatsby build\",\r\t\t\"develop\":\"gatsby develop\",\r\t\t\"clean\":\"gaysby clean\"\r\t}\r}" >> packages/site/package.json

パッケージ。フォルダのテーマにjson（名前を再度置き換え、YOUR_NPM_USERも挿入します):

echo "{\r\t\"name\": \"@YOUR_NPM_USER/gatsby-theme-NAME\",\r\t\"version\": \"1.0.1\",\r\t\"license\": \"MIT\",\r\t\"main\": \"index.js\",\r\t\"scripts\": {\r\t\t\"builds\": \"gatsby build\",\r\t\t\"develop\": \"gatsby develop\",\r\t\t\"clean\": \"gaysby clean\"\r\t}\r}" >> packages/gatsby-theme-NAME/package.json

結果は次のとおりです:

├── packages│ ├── site│ └── gatsby-theme-NAME├── .gitignore├── package.json└── lerna.json

PS：私はあなたが.gitignoreを作成し、すぐにnode_modulesを追加することをお勧めします:

echo "node_modules" > .gitignore

Lerna

の使用Lernaの問題の1つは、1つのコマンドでパッケージごとに複数の依存関係をインストールできないことです（yarn workspace name_workspace add package1 package2 etcのように）。 次のように、1つずつ実行する必要があります（グローバルにインストールしなかった場合は、すべてのコマンドの前にnpxを付ける必要があります）:

lerna add gatsby --scope site 
lerna add react --scope site
lerna add react-dom --scope site

ここで--scope siteは、パッケージ”site”にのみインストールするようにLernaに指示するために使用されます。

しかし、1つのコマンドだけですべてのパッケージに依存関係をインストールすることができます。gatsbyとしましょう:

lerna add gatsby

このコマンドは:

  • すべてのパッケージにGatsbyをインストールします（この場合はサイトとテーマパッケージのために）。 Lernaでhoistを有効にした場合は
  • 。jsonそれはあなたのルートにnode_modulesフォルダを作成します（’Lerna Bootstrap forward’を参照）:

あなたのアプローチを選択してください

このアプローチが好きなら、パッケージにすべての共通の依存関係（react、react-dom）をインストールし続けることができます。 1つのパッケージにのみ依存関係をインストールする必要がある場合は、--scope name_of_the_packageを使用します（パッケージで指定された名前であることを覚えておいてくださjsonはフォルダの名前ではありません）。

それぞれのパッケージに必要なすべての依存関係をインストールすることでnpmを使用することもできます。 しかし、この方法では、それぞれのフォルダごとにnode_modules依存関係がインストールされることを覚えておいてください。 これはきれいにし、その後掲揚することができます。 このオプションは有効ですが、それはあなたに多くの時間がかかります。

どのオプションを選択しても、サイトパッケージの依存関係としてローカルテーマパッケージを追加/リンクすることを忘れないでください（設定した名前package.json):

lerna add @YOUR_NPM_USER/gatsby-theme-NAME --scope=site

Lerna bootstrap

ですべてをオーケストレーションして、最終的には安全に行うことができます: 

lerna bootstrap

このコマンドは、特にパッケージが既にある場合には本当に便利です。jsonはそれぞれの依存関係で満たされています。

hoist: trueオプションを使用して（lerna.json上）、ルートにある共有node_modulesフォルダを配置し、それぞれのpackage.jsonローカル依存関係をリンクします。

私は本当に好きです–ホイスト機能これはnode_modulesへの重複依存を避けるプロセスなので、物理的なスペースとインストール時間を節約します。

何らかの理由であなたが最初に何かをきれいにしたい場合は、あなたが行うことができます:

lerna clean && lerna link && lerna bootstrap

コマンドとスクリプトの実行

スクリプトを実行するには（package.jsonに配置されている）、ターゲットパッケージを指定する（または指定しない）必要があります:

lerna run develop --scope Package_name

Lernaはまた、ルートからすべてのパッケージに任意のコマンドを実行することができます（ダッシュを使用します）。 例えば:

lerna exec -- rm -rf node_modules

これにより、すべてのパッケージフォルダのノードモジュールが削除されます。

Update Wizard

将来、パッケージを更新する必要がある場合は、update-wizardを使用できます:

npm install --save-dev lerna-update-wizard

次に、このコマンドのみを実行する必要があり、ウィザードが役立ちます: 

lernaupdate