suzuka92 / my-portfolio-neko

0 stars 0 forks source link

【提案】node_modules/ 配下のファイルはGitの管理対象に含めないようにする #1

Open keitakn opened 4 years ago

keitakn commented 4 years ago

提案内容

基本的にGit上で管理するのは package.jsonpackage-lock.json もしくは yarn.lock だけで良くて、node_modules 配下のファイルは npm install, yarn install によってダウンロードされてくるのでGitHub上に登録するのが望ましくないと思いました!

またこのままだと新しいライブラリをインストールする度に node_modules 配下に大量のライブラリが追加される事になるのでGitHub上のプルリクエストの差分も見にくい状態になるので、是非とも本issueを解決する事をオススメします!

このissueが解決する条件

.gitignore に関しては下記をご覧下さい↓

https://qiita.com/inabe49/items/16ee3d9d1ce68daa9fff

suzuka92 commented 4 years ago

ありがとうございます! node_modulesはフォルダごと削除します!

.gitignore が作成されその中に node_modules が含まれ間違ってコミットする事がないように改修されている事

.gitignoreはすでに元から作成されているようでした。 中身は以下です。 /node_modulesの部分を削除するという認識であってますか…?



# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*```
keitakn commented 4 years ago

@suzuka92

.gitignore はすでに元から作成されているようでした。

なるほど、おそらくお手元にはあるけどGitHub上のリポジトリには存在しない状態なので、まずは .gitignore をコミットしてプッシュする必要がありそうですね!

中身は以下です。 /node_modulesの部分を削除するという認識であってますか…?

いえ、内容はそのままでOKです、.gitignore に書かてているファイルやディレクトリはGitの管理対象外となるので、既にコミットされてしまっている こちら を全て削除してあげる必要がありますね!

Git上からファイルを削除する方法に関しては、 「Git ディレクトリ削除 コミット」等で調べると見つかると思います👌

suzuka92 commented 4 years ago

@keitakn node_modulesの中身を全て消したらエラーが出てしまいました;;

Failed to compile
./node_modules/color-convert/route.js
Error: ENOENT: no such file or directory, open '/Users/satosuzuka/gitrepos/neko-cafe/cafe-bell/node_modules/color-convert/route.js'
This error occurred during the build time and cannot be dismissed.

必要なファイルもあったということですかね・・・ 一旦前のコミットに戻してみます;;

keitakn commented 4 years ago

@suzuka92

必要なファイルもあったということですかね・・・

issueの説明欄に書いてある通り↓

基本的にGit上で管理するのは package.json と package-lock.json もしくは yarn.lock だけで良くて、>node_modules 配下のファイルは npm install, yarn install によってダウンロードされてくるので>GitHub上に登録するのが望ましくないと思いました!

というのが今回の趣旨なので、 node_modules 配下のファイルはアプリケーションの起動には必要です!

ただ、package.jsonyarn.lock があれば yarn installnpm install 等を実行すると node_modules 配下にダウンロードされてくるので、GitHub上に node_modules 配下のファイルが登録されている必要はないのでは?というのが今回のissueの趣旨ですね👍

なので今 package.json がある場所で yarn installnpm install を実行してみて下さい! そうすれば、node_modules 配下に必要なファイルがダウンロードされてくるハズなので、GitHub上から消しても問題ないハズですね!

suzuka92 commented 4 years ago

@keitakn ああ。。ようやく理解しました。 GitHubには自分の書いたコードだけ上げるようにするということだったんですね。 確かにこの時コミットした数?差分が1000以上あっておかしいなと思っていたのでした。。

今 package.json がある場所で yarn install や npm install を実行

どちらも実行したところ、yaen.lockpackage-lock.jsonがインストールされました。 ただ、gyp ERR!になった項目も多々あるようです。

node_modulesにはファイルが入ってきませんでした;;ちょっとパニックになってます;;

keitakn commented 4 years ago

@suzuka92

ああ。。ようやく理解しました。 GitHubには自分の書いたコードだけ上げるようにするということだったんですね。 確かにこの時コミットした数?差分が1000以上あっておかしいなと思っていたのでした。。

はい!そういう認識で合っています👍

どちらも実行したところ、yaen.lockとpackage-lock.jsonがインストールされました。 ただ、gyp ERR!になった項目も多々あるようです。

ちょっと状況を整理しましょう!一度自分もこのリポジトリをgit cloneして試してみるので、お待ち下さい!

suzuka92 commented 4 years ago

@keitakn 申し訳ないです;;ありがとうございます;;

keitakn commented 4 years ago

@suzuka92

自分の環境だと neko-cafe/cafe-bell 配下で yarn install 実行後に yarn start をすると、ちゃんと表示されている感じまがしますね!

スクリーンショット 2020-03-18 8 45 33

あと思ったのですが https://github.com/suzuka92/neko-cafe/blob/master/package.json に書かれている4つのパッケージ↓

{
  "dependencies": {
    "bootstrap": "^4.4.1",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-slick": "^0.25.2",
    "slick-carousel": "^1.8.1"
  }
}

これですが、https://github.com/suzuka92/neko-cafe/blob/master/cafe-bell/package.json にあるべきだと思いました!

基本的にGitHubに登録する際はプロジェクトの直下に package.jsonyarn.lock を置いてそこに必要なパッケージを書いておくのが良いかなーと、今回の場合 neko-cafe/cafe-bell に移動して↓

これらのコマンドを実行するとhttps://github.com/suzuka92/neko-cafe/blob/master/package.json にパッケージの内容が追記されるので、package.jsonを再度コミットして、以下の4つのファイル・ディレクトリは消してしまって良いのかなーと思いました!

keitakn commented 4 years ago

あと今回の話をややこしくしている原因としてこのGitHubリポジトリに以下の3つのWebアプリケーションが入っている点ですね、

世の中にある多くの技術記事等は、1つのGitHubリポジトリに1つのアプリケーションしか入っていないという前提で解説されている物が多いので、慣れないうちは複数のプロジェクトを1つのGitHub リポジトリで管理するのではなく、別々のGitHub リポジトリを作ったほうが良いかなーと思いました!

suzuka92 commented 4 years ago

@keitakn お疲れ様です。 ご指示いただいた通り実行したところ、Reactのページが正常に動作しました。 ありがとうございます!

・neko-quiz → 新規リポジトリに切り出す ・neko-top → 使用しないため削除 ・cafebell → 一旦そのままにしていますが、不要な階層を修正したいところです…

keitakn commented 4 years ago

@suzuka92

Reactのページが正常に動作しました。

良かったです👍

cafebell → 一旦そのままにしていますが、不要な階層を修正したいところです…

そうですね、ここは1階層上にディレクトリ構成を移動させれば問題ないと思うので、すぐ出来そうですね🐱

suzuka92 commented 4 years ago

@keitakn issueにあげていただいた

node_modules/ 配下のファイルはGitの管理対象に含めないようにする

も無事解決できたようです😂ありがとうございます!!!