Q&A
遅くなってしまい申し訳ないです。
コメント誠にありがとうございます。
バージョンの不整合が原因だったんですね。
最初はbabel7へのアップデート方法を探しましたが、全くわからず、babel7をインストールすればよいと考え上記コマンドをインストールしようとしたところ、上記の通りのエラーメッセージが出力しインストールに失敗しました。
これは何が原因なのでしょうか。
インストールしようとした場所はデスクトップです。
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によるエラー）
babel:
1 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)
回答2件
0
ベストアンサー
browserify はグローバルにインストールして、以下のようにして動きました。
package.json
json
1 "dependencies": {}, 2 "devDependencies": { 3 "@babel/cli": "^7.7.4", 4 "@babel/core": "^7.7.4", 5 "@babel/preset-env": "^7.7.4", 6 "babelify": "^10.0.0" 7 },
browserify sample.js -t [ babelify --presets [ @babel/preset-env ] ] -o out.js
投稿2019/12/06 04:32
総合スコア441
0
原因は
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
投稿2019/11/03 07:47
総合スコア441
メッセージの内容は読みましたか？
`updated 3 packages and audited 6616 packages in 5.261s`
5.261秒で、3パッケージをアップデートし、6616パッケージを検査しました
`found 1 low severity vulnerability`
重大度低の脆弱性を1つ検出しました
インストール自体は成功しているのではないでしょうか。表示されたメッセージはあくまでユーザーに対して脆弱性があるパッケージをインストールしたという警告です。
`npm audit`のコマンドで、脆弱性の情報を表示できます。`npm audit fix`で脆弱性のないバージョンに変更できる場合は変更します。
ありがとうございます。
上記追記した通りなのですが、古いBabelを削除した後にインストールコマンドを実行したところ、Desktop/node_modules内にBabelが生成されたので、インストールはされていたようでした。
しかしなぜかバージョンが6のままです。
※軽い気持ちでテキストに出ていたBabelを使ってみようと思いましたが、こんなにレベルが高いツールとは思いませんでした。
まず、npmのグローバルインストールとローカルインストールについて調べたほうがよさそうです。
デスクトップで `npx babel --version` だとどうなるでしょうか。
「npx babel --version」を実行したところ、「6.26.0 (babel-core 6.26.3)」と表示されました。
コマンドのみグローバルインストールで、Babel本体のパッケージはローカルインストールされていると理解していますが、デスクトップ上と/usr/local/lib/node_modules/の両方にBabelがインストールされています。
インストールに関係した部分がBabel7にアップデートされない原因なのでしょうか。
インストールなどを繰り返しているので、おかしなことになってそうですね。
こういった場合、デスクトップ以下の package-lock.json ファイルと node_modules フォルダを消してから npm install しなおしたほうがよいと思います。
全て削除し、入れ直してみたのですが、前回と同じでbabelによるnode.js変換はできますが、browserifyが正常に実行されません。
babel-cli ではなくて @babel/cli だと思います。
公式サイトを見たほうがよさそうです。 https://babeljs.io/setup#installation
可能であれば、 .babelrc や package.json を書いたほうが解決が早そうです。
.babelrc、package.jsonを追記しました。
package.jsonはもともとなかったので、「npm init」で生成しました。
@babel/cliですが、どこかのコマンドの修正が必要ということでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/07 04:47
2019/12/07 04:49 編集
2019/12/07 04:50
2019/12/07 20:39
2019/12/07 23:54
2019/12/13 23:05
2019/12/14 00:18
2019/12/14 20:15 編集
2019/12/15 00:05
2019/12/19 20:17
2019/12/20 05:22
2019/12/22 00:30