babelとbabelifyをデスクトップにローカルインストールし、Browserifyをグローバルインストールしました。
babelのコマンド(babel /Users/north/Desktop/sample.js -o /Users/north/Desktop/sample3.js
)によって正常にJavaScriptがnode.jsの記述に変換されていることは確認できています。
しかし、JavaScriptを古いバージョンのJavaScriptに変換するための以下のコマンドが実行できません。
browserify /Users/north/Desktop/sample.js /Users/north/Desktop/sample2.js -t [babelify --presets es2015] -o /Users/north/Desktop/sample4.js
これは何が原因なのでしょうか。
最初、デスクトップにpackage.jsonがなかったのでnpm init
でpackage.jsonを作りましたが、特に関係がなかったようです。
(エラーメッセージ)
/Users/north/Desktop/node_modules/babelify/index.js:16
throw err;
^
Error: Cannot find module '@babel/core'
babelify@10 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babelify@8'.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/Users/north/Desktop/node_modules/babelify/index.js:9:11)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
(追記:)
Babel7をインストールするために行なったコマンド(→インストール不可))
npm install --save-dev @babel/core @babel/cli @babel/preset-env
エラーメッセージ
npm WARN desktop@1.0.0 No description
npm WARN desktop@1.0.0 No repository field.
+ @babel/cli@7.7.0
+ @babel/core@7.7.2
+ @babel/preset-env@7.7.1
updated 3 packages and audited 6616 packages in 5.261s
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
(追記2:)
デスクトップにBabel7をインストールしようとしたのでデスクトップ上にBabelが作成されると思っていたためインストールに失敗したと思いましたが、デスクトップ上のnode_modulesディレクトリ内に作成されたのかもしれないと思い当たりました。
しかし、babel --version
でBabelバージョンを確認すると6.26.0 (babel-core 6.26.3)
なのでバージョンは変わっていませんでした。
次にnpm audit
を実行しました。
(npm auditの結果)
Low │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=2.3.1 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ babel-cli │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ babel-cli > chokidar > anymatch > micromatch > braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/786
npm audit fix
を実行してもBabelのバージョンは6のままでした。
インストール前から既にnode_modulesディレクトリが存在し、その中に古いBabelが存在していたためにBabel7が正常にインストールできなかったのかもと思い、node_modulesディレクトリの中のbabelと名がつくファイルやディレクトリ(babelifyディレクトリは除く)を全て削除し、再度Babel7をインストールするためのコマンドを実行しましたが、Babelのバージョンは6のまま変わっていませんでした。
改めてnpm auditの結果
の結果です。
(npm auditの結果)
───────────────┬──────────────────────────────────────────────────────────────┐
│ Low │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=2.3.1 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ babel-cli │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ babel-cli > chokidar > anymatch > micromatch > braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/786 │
└───────────────┴──────────────────────────────────────────────────────────────┘
今回もnpm audit fix
を実行してもBabelのバージョンは6のままで変わっていません。
関係がないかもしれませんが、今は全てデスクトップ上でBrowserifyを動かそうとしていますが、それよりも早い時期に/usr/local/lib/node_modules/
にBabelをインストールしていますが、それはBabel7をデスクトップにインストールする上で関係ないと思ってもいいでしょうか。
追記
(行ったこと)
・node_modulesディレクトリ(デスクトップ、/usr/local/libの2つとも)の削除
・Babel(本体+コマンド)、browserifyの削除
・node.jsインストール
・Babelインストール(コマンドはグローバルインストール、本体はデスクトップにインストール)※コマンドインストール時にエラー発生、インストール自体は成功
・.babelrc作成
・browserifyグローバルインストール
・このサイトを参考にコマンドnpm install @babel/preset-env
を実行
(Babelコマンドインストール時のエラー)
→文字数オーバーのため削除
追記20191203
(package.json) ※場所:デスクトップ
{
"name": "desktop",
"version": "1.0.0",
"description": "",
"main": "sample.js",
"dependencies": {
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"webpack": "^4.41.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
(.babelrc) ※場所:デスクトップ
"presets": ["es2015"]
})
追記20191207
(package.json)※場所:デスクトップ
"dependencies": {},
"devDependencies": {
"@babel/cli": "^7.7.4",
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"babelify": "^10.0.0"
},
(.babelrc) ※場所:デスクトップ
// {
// "presets": ["es2015"]
// }
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry" // 任意
}
]
]
}
(browserifyコマンド実行時のエラー)
`Error: SyntaxError: Unexpected token : in JSON at position 14 while parsing json file /Users/north/Desktop/package.json
at /usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:550:30
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)
追記20191208
(行ったこと) ・デスクトップ上のnode_modules と package-lock.json を削除 ・「npm install」実行
(npm install実行時のエラー)
npm WARN desktop@1.0.0 No description
npm WARN desktop@1.0.0 No repository field.
up to date in 0.851sfound 0 vulnerabilities
20191214追記
(npx babelによるエラー)
stdin compilation requires either -f/--filename [filename] or --no-babelrc
20191215追記
(package.json)
{
"name": "desktop",
"version": "1.0.0",
"description": "",
"main": "sample.js",
"dependencies": {},
"devDependencies": {
"@babel/cli": "^7.7.4",
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"babelify": "^10.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
(エラーになるコマンド)
browserify /Users/north/Desktop/sample.js /Users/north/Desktop/sample2.js -t [babelify --presets es2015] -o /Users/north/Desktop/sample4.js
(上記のエラーのエラーメッセージ)
Error: .presets must be an array, or undefined while parsing file: /Users/north/Desktop/sample.js
at assertArray (/Users/north/Desktop/node_modules/@babel/core/lib/config/validation/option-assertions.js:150:11)
at assertPluginList (/Users/north/Desktop/node_modules/@babel/core/lib/config/validation/option-assertions.js:219:15)
at /Users/north/Desktop/node_modules/@babel/core/lib/config/validation/options.js:107:5
at Array.forEach (<anonymous>)
at validateNested (/Users/north/Desktop/node_modules/@babel/core/lib/config/validation/options.js:83:21)
at validate (/Users/north/Desktop/node_modules/@babel/core/lib/config/validation/options.js:74:10)
at loadPrivatePartialConfig (/Users/north/Desktop/node_modules/@babel/core/lib/config/partial.js:66:50)
at Object.loadPartialConfig (/Users/north/Desktop/node_modules/@babel/core/lib/config/partial.js:110:18)
at transform (/Users/north/Desktop/node_modules/babelify/index.js:157:17)
at BabelifyStream._flush (/Users/north/Desktop/node_modules/babelify/index.js:138:5)
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
browserify はグローバルにインストールして、以下のようにして動きました。
package.json
"dependencies": {},
"devDependencies": {
"@babel/cli": "^7.7.4",
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"babelify": "^10.0.0"
},
browserify sample.js -t [ babelify --presets [ @babel/preset-env ] ] -o out.js
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
原因は
babelify@10 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babelify@8'.
とあるように、 babelify と babel のバージョンがあっていないからです。
babelifyのバージョンを10から8に下げるか、Babelのバージョンを7に上げるかのどちらかが対応としてあり得ますが、わざわざ古いバージョン使う必要がなければ、Babelのバージョンを上げるのが良いのではないかと思います。
また、 preset を es2015 にするのも今は deprecated 扱いになっているので、合わせて変更した方が良さそうです。
babel-preset-es2015
-> @babel/preset-env
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/12/07 13:47
babelrcはプリセットが2015であったのがよくなかったのかもしれないと思い、上記の書き方を探してきて変更してみましたが変わりませんでした。
デスクトップ環境でファイル変換を行おうとしているのは関係ないですよね。
browserify、node.js、babel-cliは/usr/local/lib/node_modulesディレクトリにあるので、グローバルインストールされているはずです。
2019/12/07 13:49 編集
2019/12/07 13:50
2019/12/08 05:39
package.jsonの内容に何か問題があったのでしょうか。
2019/12/08 08:54
単純に実行するとグローバルにインストールしたbabelを使ってしまうので、npx babelで実行すれば動くと思います。
2019/12/14 08:05
コマンドは「npx babel」なのでしょうか。
「npx babel」でも「npx babel /Users/north/Desktop/sample.js -o /Users/north/Desktop/sample3.js」でもエラーになってしまいます。。
2019/12/14 09:18
最初の質問以外のことを実施してもそうしようとする理由がわからないです。
追記にあったbrowserifyコマンド実行時のエラーを今見たのですが、もしかしてpackage.jsonを自分が書いたjsonに置き換えてしまったでしょうか。あれはpackage.jsonの一部を抜き出したものなので、該当する部分のみを書き換えないとjsonの文法エラーになると思います。
2019/12/15 05:14 編集
package.jsonを初期状態(npm init直後の状態)から、上記の記載していただいた部分をマージすることで、私の環境でも以下のbrowserifyコマンドが正常に実行できました。
※検証してみたところ、package.jsonが初期状態のままでもコマンドは問題なく通りました。
ありがとうございます。
かなり気が楽になりました。
browserify sample2.js -t [ babelify --presets [ @babel/preset-env ] ] -o out.js
ただ、テキストでは2つのファイルを結合して、結合後のファイルを出力するという追記したようなコマンドが書かれていて、こちらはエラーになってしまうのですが、これはどの辺りに不備があるのでしょうか。
ファイルのパスを相対パスにして以下のような書き方にしてもエラーになります。
browserify sample.js sample2.js -t [babelify --presets es2015] -o /Users/north/Desktop/sample4.js
2019/12/15 09:05
presetsの指定の仕方が間違えているからエラーになっているように見えます。
参考にしているテキストですが、内容が古いのではないかと思われるので、あまり参考にしないほうがいいのではないかと……
2019/12/20 05:17
[babelify --presets es2015]を [@babel/preset-env ]に変更してもだめでした。
browserify /Users/north/Desktop/sample.js /Users/north/Desktop/sample2.js -t [@babel/preset-env ] -o /Users/north/Desktop/sample4.js
でもひとまずbrowserifyのコマンドは通ったので大変助かりました。
時間のあるときに詳しく検証してみます。
ありがとうございます。
何度も非常にお手数をおかけしてしまいすみませんでした。
2019/12/20 14:22
『presetsが配列である必要があるなどの内容』というところまで理解していて、babelify まるごとコマンドから書き換えてしまうというところで、何か飛躍しているというか、どうしてそこを書き換えたんだろうというのが個人的には気になります。
[babelify --presets es2015] を [@babel/preset-env ] に変えるのではなく、
[babelify --presets es2015] を [ babelify --presets [ @babel/preset-env ] ] に変えると良いと思います。
2019/12/22 09:30
ありがとうございます。
browserify /Users/north/Desktop/sample.js /Users/north/Desktop/sample2.js -t [ babelify --presets [ @babel/preset-env ] ] -o /Users/north/Desktop/sample4.js
正直なぜこれでコマンドが通ったのか全くわかりません。
[ babelify --presets [ @babel/preset-env ] ] が配列だったということも知りませんでした。
node.jsやnpmからきちんと学習する必要性を感じました。