React環境の複製方法がわかりません

Question

https://www.webdesignleaves.com/pr/jquery/react_basic_01.htmlというサイトを参考にし環境構築をしたものです。完成したReact環境を複製したいのですが上記サイトのプロジェクトのコピーの手順でやっているつもりですが上手くいきません。

まず新しいプロジェクトのディレクトリをvscodeで開き、ターミナルでcp ../既存のプロジェクト名/package.json ./というコマンドを実行しnpm installとすると既存プロジェクトのpackage-lock.jsonとpackage.jsonがインストールされます。同様の操作でwebpack.config.js、.eslintrc.json、srcフォルダの中身をコピーできるとあるのですがwebpack.config.js以外がエラーになってしまい上手くいきません。コピー方法について検索してみたのですが解決には至りませんでした。私の解釈が間違っているのかもしれませんが何か分かる方おられましたら教えていただきたいです。判断材料が不足しているなどありましたらご指摘下さい

Answer 1

package.json,webpack.config.js,eslintrc.json,srcディレクトリすべてあなたがcpコマンドでコピーするんです。
既存のプロジェクトのディレクトリに、node_modulesと言うディレクトリはありませんか？
それが、npm installでインストールされたモジュールたちです。package.jsonコピーし、npm installを行えば、既存プロジェクトのnode_modulesの中身と同じものをインストールしてくれるだけです。設定ファイル(package.json, webpack.config.js, eslintrc.json)やあなたが書いたプログラム(./src内のファイル）はあなた自身でコピーせねばなりません。

簡単に言うと完成したReactアプリを複製するなら、そっくりそのままそのディレクトリをコピーすればよいのです。

Comments

[musashi0821]

御回答ありがとうございます。finderにあるプロジェクトのディレクトリを複製するだけで問題ないという事ですね。ちなみに何ですが私がcpコマンドでコピーするというのはReactのコピーの場合どういったコマンドになりますか？cpコマンドについて調べて見たのですがちょっとわかりませんでした。やりたい事としてはproject01というディレクトリのsrcフォルダをproject02にコピーしたいです。

[greenleave10000]

プロジェクトの複製には二種類考えられます。
１．project01をそっくりそのまま(何もかも）コピーする方法。
project01のあるディレクトリに移動し、
cp -r ./project01 ./project02
この場合単純に同じものが２つに増え片方はディレクトリの名前が変わっただけって感じです。

２．設定ファイルと自分が書いたプログラムをコピーして、依存パッケージ（node_modulesディレクトリの中身）はnpm installをして新しくインターネットからインストールする方法。
cp ./project01/package.json ./project02
cp ./project01/webpack.config.js ./project02
cp ./project01/eslintrc.json ./project02
cp -r ./project01/src ./project02

cd ./project02
npm install
です。結局のところ、node_modulesの中にインストールされるパッケージを自分でコピーするか、他のものだけを自分でコピーし、node_modulesにインストールされるべきパッケージが列挙されたpackage.jsonをnpm installで読み込みすべて新しくインストールするかの違いです。
ただ、方法2を使うぐらいなら、create-react-appコマンドを使って環境を構築したのであれば、create-react-app project02をして新しくprojectの雛形を作成し、あなた自身がproject01のときに書き換えたファイルだけを新しく作成されたproject02の同じファイルをproject01のそれで上書き（置き換え）するだけで大丈夫です。

[musashi0821]

細かいところまで有難うございます！