Cakephp Git VSCode

[yarn]installからバージョン管理外と利用まで

※本サイトはPR表記を含みます。

yarn install でyarn導入後、すぐ利用できるといっても、node_modulesディレクトリをバージョン管理外にしたり、本記事では明記しませんが（環境に大きく依存するため）デプロイヤーなどにデプロイ時にyarn installさせるようにしておいたり、なんだかんだやることありますよね。

また、別にyarnに限らず、パッケージ管理系（composerとか）も、vendorとかGitのバージョン管理外にするはず（vendorディレクトリとか手を入れる予定のないものをバージョン管理しても無駄やしね）。今回はyarnを触る機会があったので、yarn導入から、gitignoreに忘れずに記述しとこうって話です。※yarnはシステムインストールされているものと想定します。

package.jsonを用意する

yarn initでpackage.jsonを作成する方法もあるけども、単にjsonファイル作ればよさげなので、ぱっと作っちゃいました。

{
    "name": "hoge-project",
    "private": true,
    "dependencies": {
        "chart.js": "^3.7.1"
    }
}

nameはプロジェクトディレクトリ名（ドメイン）、privateはパッケージ公開云々？特に理由がなければtrueでよいのかと。dependenciesに追加管理したいパッケージを記述していく感じですね。今回はchart.jsを記述していますが、同じようにパッケージ名とバージョンを記述していけばよいと思います。※追加する場合,を忘れずに

yarn install

yarnがシステムインストールされている上で、yarn installを実行します。そうするとnode_modulesが自動生成され、yarn.lockファイルも同時に作成されます。

 

gitバージョン管理外にする

node_modulesは直接ファイルをいじることもないし、バージョン管理をしても無駄です。.gitignoreファイルに管理対象を記述しましょう。

# .gitignore内
/hoge-project/node_modules
# yarn
yarn-error.log

node_modulesは忘れることはないと思うけど、yarn-error.logは忘れがちですよね。
例えば、yarn init とか途中でキャンセルするだけでログ出力されますから、バージョン管理としては除外しておきたい所です。

シンボリックリンクを作成する

Cakephpなどフレームワークを使用している場合は、jsディレクトリ内からシンボリックリンクを作成して、各テンプレファイル内に読み込むようにすればOKです。

■ yarn install後、シンボリックリンクを作成

 command
ln -s ドメイン名ディレクトリ/node_modules/パッケージ/dist/うんたら.js リンク名

■ 各テンプレート内でJSを読み込む（例）

 Template内
$this->Html->script('ext/chart-js/chart.min.js', ['block' => true]);

 

これで、yarn管理下でパッケージの利用ができるようになりました。

お手軽ですけども、全く始めては少し迷うかもしれませんね。

余談として、パッケージの依存が多いとか、TypeScriptで変換する場合が必要である場合、babelやwebpackを利用して、一本化する必要があるみたいですね

まま、それはまた別腹ということで。

-Cakephp, Git, VSCode
-,