質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.34%

Browserifyが実行できません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,175

theplace

score 24

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/20 05:17

    エラー内容は、presetsが配列である必要があるなどの内容で意味がよくわかりませんでした。
    [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からきちんと学習する必要性を感じました。

    キャンセル

+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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/28 07:27

    全て削除し、入れ直してみたのですが、前回と同じでbabelによるnode.js変換はできますが、browserifyが正常に実行されません。

    キャンセル

  • 2019/11/28 13:56

    babel-cli ではなくて @babel/cli だと思います。
    公式サイトを見たほうがよさそうです。 https://babeljs.io/setup#installation

    可能であれば、 .babelrc や package.json を書いたほうが解決が早そうです。

    キャンセル

  • 2019/12/03 08:38

    .babelrc、package.jsonを追記しました。
    package.jsonはもともとなかったので、「npm init」で生成しました。
    @babel/cliですが、どこかのコマンドの修正が必要ということでしょうか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る