Rails6でvue.jsを使った開発を行うための設定に挑戦

Rails x Vue.jsを用いた開発に挑戦している。手探りなので間違っている箇所もあるかもしれないが自分なりに検索してやってみた。そういう記事としてご覧いただけると嬉しいです。

環境構築

①npmを導入(ホームディレクトリでOK)

brew install npm

②npmのパッケージをアプリに導入(アプリのディレクトリで)

npm init

ここで対話プロンプトが起動し、いくつか入力を求められる。()内はnpmコマンドがデフォルトで用意した値。

package name: (a) sample
version: (1.0.0) 0.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: 
license: (ISC)

name…packageの名前。ソースコードでimportやrequireをする際に使われる。

version…最初なので1.0.0とか0.0.0とかで答えておく。更新するたびにバージョンを変える必要あり

description…パッケージの説明。特に入力しないと以下のように表示される

"description": "This README would normally document whatever steps are necessary to get the application up and running.",

アプリを使うための説明はREADMEに書いたから見てくれや〜って感じのこと言ってる

main…モジュールの中で最初に呼ばれるスクリプトファイル。パッケージをrequireした際に最初に呼ばれるファイル。今回はmain.jsとした。

test command…コマンドを使ってソースコードの実行ができるようにする設定。何も入力せずenterを押すと

"test": "echo \"Error: no test specified\" && exit 1"

こんな感じの値が保存される。

これは

npm test

というコマンドに対してecho以下の出力を出しますよ、という意味。実際に実行すると

% npm test

> アプリ名@0.1.0 test 
> echo "Error: no test specified" && exit 1 ここ

Error: no test specified
npm ERR! Test failed.  See above for more details.

こんな感じでechoのところが出力される。

repository…紐付けるgitリポジトリを指定。.gitが存在している場合特に入力していなくても勝手に現在紐付いているgitリポジトリのurl入力される。

author…パッケージの著作者。

license…パッケージの権利情報。標準ではISCとなっているのでそれに倣った。

対話シェルで入力していないものも含めて最終的に以下のようなpackage.jsonができた。

{
  "name": アプリ名,
  "private": true, (公開したくない場合true)
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "vue-loader": "^15.9.6",
    "webpack": "^5.11.1",
    "webpack-dev-server": "^3.11.1"
  },
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "main": "main.js", (パッケージを呼び出した時に最初に呼ばれるソースコード)
  "directories": {
    "lib": "lib",
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": 紐付けているgitリポジトリ
  },
  "author": 自分で設定した著作者,
  "license": "ISC",
  "bugs": {
    "url": リポジトリのissue
  },
  "homepage": リポジトリ名のreadme
}

③webpack, vue-loaderを導入

#ローカルインストール
npm install webpack vue-loader  --save-dev
npm install vue --save

#グローバルインストール
npm install webpack -g 

これらをインストールするとnode.jsのモジュールがnode_modulesフォルダに大量にインストールされるが、これらはpackage.jsonに依存関係が記述されていることで勝手に読み込んでくれる。よってgitにpushする必要がない。

なのでgitignoreをいじる

.gitignore

node_modules/

こうするとnode_modulesがgitにpushされなくなる。

【参考】

vue.jsを用いた開発の導入

node_modulesをgitignoreに含める理由とか

package.jsonの中身

npmコマンドでpermission deniedされたので参照したやつ

vue-loaderってなに

【次やること】

package.jsonの細かい設定の修正