webpack-dev-server に接続したいです。

■やりたい事
Gituhubからクローンをして、自身のPCにwebpack-dev-serverに接続したいです。
現在、Reactの勉強をしておりまして、下記ファイルで環境を構築して接続テストも正常にできていました。
しかし、これらをGithubにpushし再度クローンをしたところエラーになりました。。。
そのため今回は下記の通り質問させていただきます。

■確認したい事
①Githubからクローンしたファイルを接続するまでのコマンド入力の手順は合っているでしょうか？

npm install 実行でpackage.jsonの内容をインストール
yarn run dev-server 実行で接続完了

もし、これら手順で間違っている場合は何か教えて欲しいです。

②また2の yarn run dev-server を実行するとエラーが出ます

ReferenceError: Unknown plugin "transform-object-rest-spread"

これが書かれている babelrcのファイルの箇所を削除して実行してもまたエラーがでてうまく行きません。
何か根本的に間違った記述か手順をしてしまってるのでしょうか？

接続までに何かヒントでも教えていただければなんとかこの件を解決したいです。
よろしくお願い致します。

Files
1├── package.json
2├── node_modules(コマンド実行後作成される)
3├── public
4│   ├── index.html
5│   └── bundle.js(コマンド実行後作成される)
6├── src
7│   └── app.js
8├── package.json
9└── webpack.config.js

Packagejson
1{
2  "name": "indecision-app",
3  "version": "1.0.0",
4  "main": "index.js",
5  "license": "MIT",
6  "scripts": {
7    "serve": "live-server public/",
8    "build": "webpack",
9    "dev-server": "webpack-dev-server"
10  },
11  "dependencies": {
12    "@babel/core": "^7.9.0",
13    "@babel/plugin-proposal-class-properties": "^7.8.3",
14    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
15    "@babel/preset-env": "^7.9.0",
16    "@babel/preset-react": "^7.9.4",
17    "babel-cli": "6.24.1",
18    "babel-core": "6.25.0",
19    "babel-loader": "7.1.1",
20    "babel-plugin-transform-class-properties": "6.24.1",
21    "babel-preset-env": "1.5.2",
22    "babel-preset-react": "6.24.1",
23    "build": "^0.1.4",
24    "css-loader": "0.28.4",
25    "live-server": "^1.2.0",
26    "node-sass": "^4.13.1",
27    "normalize.css": "^8.0.1",
28    "react": "16.0.0",
29    "react-dom": "16.0.0",
30    "react-modal": "2.2.2",
31    "sass-loader": "^8.0.2",
32    "style-loader": "0.18.2",
33    "validator": "8.0.0",
34    "webpack": "^4.42.1",
35    "webpack-cli": "^3.3.11",
36    "webpack-dev-server": "^3.10.3"
37  }
38}
39

webpackconfigjs
1const path = require('path');
2module.exports = {
3  mode: 'development',
4  entry: './src/app.js',
5  output: {
6    path: path.join(__dirname, 'public'),
7    filename: 'bundle.js'
8  },
9  module: {
10    rules: [{
11      loader: 'babel-loader',
12      test: /.js$/,
13      exclude: /node_modules/
14    }, {
15      test: /.s?css$/,
16      use: [
17        'style-loader',
18        'css-loader',
19        'sass-loader'
20      ]
21    }]
22  },
23  devtool: 'cheap-module-eval-source-map',
24  devServer: {
25    contentBase: path.join(__dirname, 'public')
26  }
27};

index.html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <title>Expensify</title>
8  <link rel="icon" type="image/png" href="/images/favicon.png" />
9</head>
10
11<body>
12  <div id="app"></div>
13  <script src="/bundle.js"></script>
14</body>
15
16</html>
17

babelrc
1{
2  "presets": [
3    "env",
4    "react"
5  ],
6  "plugins": [
7    "transform-class-properties",
8    "transform-object-rest-spread"
9  ]
10}

行動規範の内容に同意します

回答1件

ベストアンサー

npm install 実行でpackage.jsonの内容をインストール

yarn run dev-server 実行で接続完了

npm と yarn を一つのプロジェクトで混ぜて使うのは良くありません。どちらかに統一すべきです。
また、npm の場合は package-lock.json、yarn なら yarn.lock というファイルが作られますので、これもバージョン管理しましょう。

で、エラーの原因は babel-plugin-transform-object-rest-spread が足りないようなので、これを追加すればいいと思います。

npm を使うなら、npm install babel-plugin-transform-object-rest-spread または、以下の行を package.json に追加して npm install
yarn を使うなら、yarn add babel-plugin-transform-object-rest-spread または、以下の行を package.json に追加して yarn または yarn install

  "dependencies": {
    ...
    "babel-plugin-transform-object-rest-spread": "^6.26.0",

参考: npmとyarnのコマンド早見表 - Qiita

投稿2020/04/09 00:11

編集2020/04/09 00:14

hoshi-takanori

総合スコア7901

sasayaka_p

2020/04/09 02:00

迅速に回答ありがとうございます。おかげさまでdev-server接続することができました。・プロジェクトでnpm/yarnを混ぜて使うのはよろしくない事・エラーの原因と解決法をとてもわかりやすく教えていただいてありがとうございます。 npmについてこれでいくつか気をつける点は身につけたと思っています。

行動規範の内容に同意します