質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.37%

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

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 523
sasayaka_p

sasayaka_p

score 20

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

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

  1. npm install               実行でpackage.jsonの内容をインストール
  2. yarn run dev-server  実行で接続完了
    もし、これら手順で間違っている場合は何か教えて欲しいです。

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

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

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

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

├── package.json
├── node_modules(コマンド実行後作成される)
├── public
│   ├── index.html
│   └── bundle.js(コマンド実行後作成される)
├── src
│   └── app.js
├── package.json
└── webpack.config.js
{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "build": "^0.1.4",
    "css-loader": "0.28.4",
    "live-server": "^1.2.0",
    "node-sass": "^4.13.1",
    "normalize.css": "^8.0.1",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-modal": "2.2.2",
    "sass-loader": "^8.0.2",
    "style-loader": "0.18.2",
    "validator": "8.0.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Expensify</title>
  <link rel="icon" type="image/png" href="/images/favicon.png" />
</head>

<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>

</html>
{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

checkベストアンサー

+1

1. npm install               実行でpackage.jsonの内容をインストール
2. 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 11:00

    迅速に回答ありがとうございます。
    おかげさまでdev-server接続することができました。

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る