はじめに

github等から直接URL指定でインストールしたパッケージを使用して、reactのアプリを作成した際、インストールしたパッケージのパージョンがロックできていないことに気付きました。

reactアプリとnpmパッケージを用意して、ロックする方法をご紹介します。

今回作成したアプリとパッケージのディレクトリ構成

それぞれGithubに上げています。

sample-npm-pkg → パッケージ
sample-npm-pkg-link-app → アプリ

sample-npm-package-link/
├── sample-npm-pkg
│   ├── README.md
│   ├── lib
.......
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   └── Message
│   │       └── index.tsx
│   └── tsconfig.json
└── sample-npm-pkg-link-app
    ├── README.md
    ├── package-lock.json
    ├── package.json
   ...
    ├── src
    │   ├── App.tsx
   ... ...
    │   └── serviceWorker.ts
   ...
    └── tsconfig.json

パッケージの作成

まずはパッケージ側を用意します。
※package.jsonやtsconfig.jsonの準備はこちらを参照してください。

src/Message/index.tsx

import * as React from "react";

const Message = () => {
  return <>Hello World !!</>;
};

export default Message;

Hello World !!と表示されるMessageコンポーネントを作成しました。
コンポーネントの準備が出来次第、buildします。

$ npm run build

アプリの作成

create-react-appで雛形を作成します。

$ create-react-app sample-npm-pkg-link-app --typescript
$ cd sample-npm-pkg-link-app

ローカルでパッケージの動作を確認しながら作成してみます。

パッケージディレクトリを指定してインストールします。

$ npm i --save ../sample-npm-pkg

package.jsonを確認すると、ローカルのファイルが参照されていることが分かります。

package.json

"sample-npm-pkg": "file:../sample-npm-pkg"

パッケージを使用

src/App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Message from "sample-npm-pkg"; // 追加

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Message /> {/* 追加 */}
      </header>
    </div>
  );
};

export default App;

実行して確認します。

$ npm run start

Hello World !!と表示されました。

パッケージをGithubにPush

パッケージ側をGithubにPushし、インストール方法を変更します。

$ npm i --save git+https://github.com/pure-adachi/sample-npm-pkg.git

package.jsonを確認するとGithubから参照されていることが分かります。

package.json

"sample-npm-pkg": "git+https://github.com/pure-adachi/sample-npm-pkg.git"

※パッケージをGithubから直接インストールする方法はGithubまたはローカルのnpm のパッケージをinstallする方法 - Qiitaを参照してください。

パッケージのバージョンアップ

パッケージをパージョンアップしてHello New World !!と表示されるようにします。

src/Message/index.tsx

 import * as React from "react";

 const Message = () => {
-  return <>Hello World !!</>;
+  return <>Hello New World !!</>;
 };

 export default Message;

package.json

-  "version": "1.0.0",
+  "version": "2.0.0",

buildしてGithubへPushします。

アプリ側への影響は？

パッケージのバージョンを上げただけでは、アプリ側へ影響がないと感じます。

package-lock.jsonを確認しても、sample-npm-pkgの参照先コミットIDは、
Hello World!!と表示される時のものとなっています。

しかし、アプリ側でnpm installを実行すると最新のパッケージがインストールされてしまいます。

npm install後、npm run startで画面を確認すると

Hello New World !!が表示されてしまいました。

想定していないバージョンのパッケージがインストールされていることから、パッケージがバージョンでロックできていないことが分かります。

git tagを使う

パッケージのコミットにタグを付け、バージョン管理します。
今回は1つ目のコミットにv1、2つ目のコミットにv2とタグを付けます。

$ git tag -a v1 e713415 -m "Version 1"
$ git tag -a v2 32ec1c1 -m "Version 2"
$ git push origin --tags

v1タグ時点のバージョンを取り込む

URLの最後に#を挟んでタグを指定するとタグ指定でインストールできます。

$ npm i --save git+https://github.com/pure-adachi/sample-npm-pkg.git#v1

npm run startで画面を確認します。

想定しているv1時点のHello World !!が表示されています。

終わりに

想定していない最新バージョンが取り込まれてしまうと、予期せぬエラーや表示方法に勝手に変わってしまうので、怖いですね。
npmにパッケージを公開すれば、package.jsonにもあるようにバージョンが付与されますが、Githubから直接URL指定でインストールする場合は、今回のようにタグ指定や、コミットIDを指定しないと最新が入ってしまいます。
package-lock.jsonに想定しているコミットIDが指定してある場合は、npm ciで、そのコミットID時点のパッケージをインストールすることも出来ます。

参考文献