[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった

質問

WebpackとBabelを使用したReactのプロジェクトがあります。会社のパソコンで作成したところ、Webpackは正常に動作しました。そのプロジェクトを個人のパソコンにクローンしたところ、以下のエラーが発生しました。

ERROR in ./react_minesweeper.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/louisstephancruz/Desktop"
at /Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:298:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)

ここで、私の webpack.config.js :

module.exports = {
  entry: './react_minesweeper.jsx',
  output: {
    path: './',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.js', '.jsx' ]
  }
};

ここで、私の package.json :

{
  "name": "minesweeper",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

nodeのバージョンはv5.6.0です。 npmのバージョンは3.6.0です。

解決方法を教えてください。

npm i または npm install

は、package.json の依存パッケージと dev 依存パッケージのすべてをインストールする必要があります (このとき NODE_ENV 環境変数が production ).

特定のパッケージがインストールされているかどうかを確認するには、次のようにします。

npm ls babel-preset-es2015

もし、何らかの理由で NODE_ENV は production で、使用できる依存関係をインストールしたい場合。

npm install --only=dev

逆に、すでにビルドされたコードを扱い、開発用の依存関係にアクセスする必要のない本番マシンでは、次のように使用することができます。

npm install --only=prod

を作成することをお勧めします。 .babelrc を、レポのルートに以下の内容で作成します。

{ "presets": [ "es2015", "react" ] }

webpackの設定には、他のオプションを指定することができます。

{ context: __dirname
, resolve: { root: __dirname, extensions: [ '.js', '.jsx', '.json' ] }
}

は、残りの設定に加えて、バンドル先のルートディレクトリと、モジュールとして扱う拡張子を webpack に伝えます（この拡張子は require / import ステートメント)。

webpackの resolve.extensions をクリックすると、その部分の詳細が表示されます。