Atomにbabelをインストールできない

Question

Progateを使ってプログラミングの勉強をしているのですが、「ES6の開発環境を用意しよう」という項目のbabelのインストールがうまくできません。

はじめに、babelのインストールをするために【npm install --save @babel/core @babel/cli @babel/preset-env】というコマンドをターミナルのes6_sample直下で実行しました。

その結果上の画像のように表示されました。↑

progateの参考画像ではこのように表示されています。↑

次にbabel設定用のファイルを作成しました。
Atomでes6_sampleというディレクトリの中に「babel.config.js」というファイルを作成しました。

その画像が上になります。↑

「babel.config.js」というファイルに

const presets = [
[
"@babel/env",
],
];

module.exports = { presets };

というコードを入力しました。

次に、progateの以下の画像の内容を実行しました。

するとprogateでは、

このように表示されていて、

私のターミナルには、

このように表示されました。

次に、以下の画像のように実行するため、｢
./node_modules/.bin/babel src --out-dir dist｣　というコマンドを実行しました。

しかし、私の「dist」ディレクトリの中にはファイルが生成されません。

その後のコンパイル後のファイルを実行しようとしても、

'MODULE_NOT_FOUND'と表示されます。

どうしたらいいでしょうか？
よろしくお願いします。

Comments

[hoshi-takanori]

./node_modules/.bin/babel src --out-dir dist を実行した時にどんなメッセージが出ますか？

[Jr_.y]

MacBook-Air-5:es6_sample Jun$ ./node_modules/.bin/babel src --out-dir dist
Error: Cannot find module '/Users/Jun/es6_sample/node_modules/@babel/parser/lib/index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (internal/modules/cjs/loader.js:316:19)
at Function.Module._findPath (internal/modules/cjs/loader.js:705:18)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:969:27)
at Function.Module._load (internal/modules/cjs/loader.js:864:27)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (/Users/Jun/es6_sample/node_modules/@babel/template/lib/parse.js:10:15)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32) {
code: 'MODULE_NOT_FOUND',
path: '/Users/Jun/es6_sample/node_modules/@babel/parser/package.json',
requestPath: '@babel/parser'
}
MacBook-Air-5:es6_sample Jun$

このように表示されます。