More than 5 years have passed since last update.

Nodeモジュールを手元でビルドして使用する方法(Vuetify)

Posted at 2018-02-13

VueのコンポーネントライブラリであるVuetifyですが、ちょっと前に1.0.0がリリースされました。
しかし、npm i vuetifyでインストールできるバージョンはメジャーリリース前の0.17.6となっています。

そこで、現時点(2018/02/02)で最新版を手元で使用する方法を備忘録として残しておきます。

`npm`でGitHubからインストール(失敗)

npmは以下のコマンドで直接GitHubからインストールすることができます。

npm install {user名}/{repository名}#{ブランチ名}

実際に実行したコマンド

$ npm i -D vuetifyjs/vuetify#dev

結果、Vuetifyのpackage.jsonに書かれている依存で必要なものはインストールされましたが、
ビルドに必要なディレクトリやファイル(/build等)がもってこれませんでした

原因や仕組みは調査中。知っている方がいたらコメントください。

ざっくり言うとnpm installでインストールできないなら、直接クローンしてビルドしてローカルモジュールにしてしまえばいいじゃないということです

local_modulesというディレクトリを作成して、そこにクローンしました。

$ mkdir local_modules
$ cd local_modules
$ git clone https://github.com/vuetifyjs/vuetify.git
$ cd vuetify

クローンしただけなので当たり前ですが、ビルドに必要なファイルもそろっています。

package.jsonを参考に必要なものをインストールしてビルドします。

$ npm install
$ npm run build

ビルドが完了するとdistとes5というディレクトリが作成されると思います。
これでVuetifyのビルドが完了したので、Vuetifyを使う側でインストールします。

ローカルモジュールのインストールは通常のモジュールのインストールとほとんど一緒で、モジュールのパスを渡すだけです。

$ npm i -D local_modules/vuetify

するとpackage.jsonには以下のように追加されるはず。

package.json

{
  "devDependencies": {
    "vuetify": "file:local_modules/vuetify",
  }
}

あとはいつも通り開発するだけです