@mtbforq (たくみ 宮迫)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

babel 7 へのアップグレード方法を教えてください。

当方プログラミング初心者です。
Nodeのbabelで簡単なアプリを
「babel bmi.js(変換元ファイル名) -o bmi.out.js(変換後ファイル名)」
にて変換しようとした際、以下のようなエラーが発生します。

動作環境 ↓

windows10 64bit

エラー内容 ↓

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

babel関連のモジュールを全て最新の型に変更したらエラーが発生するようになりました。
(babel-core → @babel/core 等)
ファイルの内容は簡単なもので、古いbabel関連のモジュールを使っていた時はファイルの変換が出来ていました。
可能であればbabel関連のモジュールは最新の型のまま、ファイル変換が出来るようにしたいです。
エラー内容によれば「babelの型が古いことが原因」のようなことが書かれていますが、
「npm install」する際にbabel関連のモジュールはおそらく最新の型をインストールできていると思いますが、
なぜか「babel --version」コマンドを入力すると「6.26.0 (babel-core 6.26.3)」と返ってきます。
package.jsonの内容は以下の通りです。

package.json ↓

{
"name": "babeltest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1"
}
}

おそらく何らかの理由でbabel 7 へアップグレードできていないことが原因だと考えていますが、どうすればよいでしょうか?

試したこと ↓

① node_modules, package-lock.jsonを削除し、再度npm install。

② babel関連のモジュールを一度削除し、再度npm install。

③ 最新型のbabel関連のモジュールで別ファイルを変換しようと試みましたが、これも失敗。

以上、どなたかわかる方がいらっしゃいましたらよろしくお願いいたします。

0 likes

1Answer

おそらくbabelコマンドがグローバルにインストールされたbabel-cliを呼び出しているので (babelコマンドを使うなら)グローバルのパッケージをアップデートする必要があります。

ただ現在はローカルにインストールした@babel/cliを使うのが推奨されていますので、今のpackage.jsonでnpm installした後、npxを使用してローカルの@babel/cliを呼び出すのが良いと思います。

npx babel --version
npx babel bmi.js -o bmi.out.js

参考
@babel/cli 公式ドキュメント

2Like

Comments

  1. @mtbforq

    Questioner

    ありがとうございます。
    直りました。

    ちなみにですが、

     babelコマンドが「ローカルにインストールされた@babel/cli」ではなく、
     「グローバルにインストールされたbabel-cli」を呼び出すのはなぜでしょうか?
     そういうものとして扱っておくしかないのでしょうか?
     
    また、「ローカルにインストールされたモジュール」と「グローバルにインストールされたモジュール」の両方が存在し、この両方が同じモジュールの場合、babel関連のモジュール以外(webpack等)でもモジュールのコマンドを実行した際「ローカルにインストールされたモジュール」を呼び出さず、「グローバルにインストールされたモジュール」を呼び出してしまうのでしょうか?
  2. babelコマンドを打った時にグローバルにインストールされたbabel-cliが呼び出されるのは主にOSの仕様です。
    (OSの仕様を利用したnpmの仕様とも言えますが)

    コマンドプロンプトでコマンド(例えばbabel)を打った時、Windowsの仕様により環境変数の「PATH」に登録されたフォルダにある「babel.exe/.bat/.cmd」が実行されます。

    npmでグローバルインストールしたパッケージが置かれるフォルダは「C:\Users\<ユーザ名>\AppData\Roaming\npm」であり、node.js(npm)のインストール時に「PATH」にこのフォルダが追加されているので、このフォルダに「babel.cmd」が含まれていた場合はこれが実行されます。
    (babel.cmdはbabel-cliまたは@babel/cliのインストールで追加される実行ファイルです)

    これは言い換えれば、グローバルにインストールしたパッケージのみ単独のコマンドで呼び出すことができるということです。

    つまりローカルとグローバルに同じパッケージがインストールされていても、単独のコマンドで呼び出されるのはグローバルにインストールされたパッケージの方です。

    一方「npx」を付けてコマンド(例えばnpx babel)を打った場合、npxの機能でローカル(カレントプロジェクト内)のnode_modules/.bin/に含まれる「babel.cmd」を探して実行してくれます。

    これはwebpack-cliなどの他のモジュールでも同じです。
    また、LinuxやMacなど他のOSでも同じです。
  3. @mtbforq

    Questioner

    詳細なご説明ありがとうございます。
    理解することが出来ました。

Your answer might help someone💌