JavaScriptの開発環境について

Question

npm update -g npmでアップデートしようとしたらこのようなエラーが発生してしまいました。。

amino-no-MacBook-Pro:MERY-PC aminohiroshi$ npm update -g npm
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "update" "-g" "npm"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! path /usr/local/lib/node_modules/npm
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall rmdir

npm ERR! Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/npm'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/npm']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'rmdir',
npm ERR! path: '/usr/local/lib/node_modules/npm' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! error rolling back Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/npm'
npm ERR! error rolling back at Error (native)
npm ERR! error rolling back { [Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/npm']
npm ERR! error rolling back errno: -13,
npm ERR! error rolling back code: 'EACCES',
npm ERR! error rolling back syscall: 'rmdir',
npm ERR! error rolling back path: '/usr/local/lib/node_modules/npm' }

npm ERR! Please include the following file with any support request:
npm ERR! /Users/aminohiroshi/Documents/MERY-PC/npm-debug.log

rollupインストール後の変化

mery-pc@1.0.0 build /Users/User/Documents/MERY-PC
rollup -c

{ [Error: Cannot find module 'babel-preset-es2015'] code: 'MODULE_NOT_FOUND' }
Error transforming /Users/User/Documents/MERY-PC/src/main.js with 'babel' plugin: Cannot find module 'es2015'
Error: Error transforming /Users/User/Documents/MERY-PC/src/main.js with 'babel' plugin: Cannot find module 'es2015'
at Function.Module._resolveFilename (module.js:325:15)
at Function.require.resolve (internal/module.js:16:19)
at module.exports (/Users/User/Documents/MERY-PC/node_modules/babel-preset-es2015-rollup/node_modules/modify-babel-preset/index.js:76:21)
at Object.<anonymous> (/Users/User/Documents/MERY-PC/node_modules/babel-preset-es2015-rollup/index.js:3:18)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki

パッケージとコマンドライン

MacBook-Pro:mery-pc User$ npm list --depth=0

mery-pc@1.0.0 /Users/User/Documents/MERY-PC
├── babel-preset-es2015-rollup@1.2.0
├── riot@2.6.1
├── rollup-plugin-babel@2.6.1
├── rollup-plugin-commonjs@3.3.1
├── rollup-plugin-json@2.0.1
├── rollup-plugin-node-resolve@2.0.0
└── rollup-plugin-riot@0.4.2

MacBook-Pro:mery-pc User$ npm run build
mery-pc@1.0.0 build /Users/User/Documents/MERY-PC
rollup -c

sh: rollup: command not found

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! mery-pc@1.0.0 build: rollup -c
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the mery-pc@1.0.0 build script 'rollup -c'.
npm ERR! This is most likely a problem with the mery-pc package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! rollup -c
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mery-pc
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls mery-pc
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/User/Documents/MERY-PC/npm-debug.log

以下の参考ページに従って、rollup.jsの設定を行ったのですが、buildをしようとすると、エラーが生じてしまします。
（単純にrollupをインストール、プラグインの導入、.babelrc作成、rollup.config.jsの作成、package.jsonのscriptに「"build": "rollup -c"」を追加しました。）

参考ページ

他のページを見ても上記参考記事と同じ方法で設定ができると書いているのですが、なぜかできず、その理由がわからないので、原因を教えいただけますでしょうか？
エラー発生時に生じるnpm-debug.logは以下のように出力されています。

その後、以下の英語の記事を参考にしまし、以下のようにrollup.config.jsとpackeage.jsonを変更しましたが、エラーが解決しません。

参考ページ

import json from 'rollup-plugin-json';
import babel from 'rollup-plugin-babel';
import riot from 'rollup-plugin-riot';
import npm from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
entry: 'src/main.js',
dest: 'dest/bundle.js',
format: 'umd',
plugins: [
    json(),
    riot(),
    nodeResolve({
        jsnext: true,
        main: true,
        browser: true
    }),
    commonjs(),
    babel()
]}

{
  "name": "mery-pc",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "scripts": {
    "build": "rollup -c",
    "test": "test"
  },
  "author": "User",
  "license": "ISC",
  "dependencies": {
    "riot": "^2.6.1"
  },
  "devDependencies": {
    "babel-preset-es2015-rollup": "^1.2.0",
    "rollup-plugin-babel": "^2.6.1",
    "rollup-plugin-commonjs": "^3.3.1",
    "rollup-plugin-json": "^2.0.1",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-riot": "^0.4.2"
  }
}

0 info it worked if it ends with ok

1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@2.15.8
3 info using node@v4.4.7
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info prebuild mery-pc@1.0.0
6 info build mery-pc@1.0.0
7 verbose unsafe-perm in lifecycle true
8 info mery-pc@1.0.0 Failed to exec build script
9 verbose stack Error: mery-pc@1.0.0 build: rollup -c
9 verbose stack spawn ENOENT
9 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:17:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:827:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid mery-pc@1.0.0
11 verbose cwd /Users/user/Documents/MERY-PC
12 error Darwin 14.5.0
13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
14 error node v4.4.7
15 error npm v2.15.8
16 error file sh
17 error code ELIFECYCLE
18 error errno ENOENT
19 error syscall spawn
20 error mery-pc@1.0.0 build: rollup -c
20 error spawn ENOENT
21 error Failed at the mery-pc@1.0.0 build script 'rollup -c'.
21 error This is most likely a problem with the mery-pc package,
21 error not with npm itself.
21 error Tell the author that this fails on your system:
21 error rollup -c
21 error You can get information on how to open an issue for this project with:
21 error npm bugs mery-pc
21 error Or if that isn't available, you can get their info via:
21 error
21 error npm owner ls mery-pc
21 error There is likely additional logging output above.
22 verbose exit [ 1, true ]

Answer 1

まず参考ページに示されているrollup.config.jsにはタイプミスがあります。本来destであるべきところがdistになっています。

また、rollup-plugin-npmは非推奨になりました。現在はrollup-plugin-node-resolveを利用してください。

なので、

$ npm i -D rollup-plugin-node-resolve

としてrollup-plugin-node-resolveをインストールしたあとに、rollup.config.jsを次のように書き変えてみてください。

import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'

export default {
  entry: 'src/main.js',
  dest: 'dist/bundle.js',
  plugins: [
    nodeResolve({ jsnext: true }),
    commonjs(),
    babel()
  ]
}

これでnpm run buildでdist/bundle.jsが生成されるはずです。（当然ですがsrc/main.jsが無いとエラーになります）

Webに限りませんが、技術というのは流行り廃れが早い分野です。なので、仮に今年書かれた記事であってもそれが古い、ということはよくあります。
何か行き詰まったらそのブログ記事だけでなく一次ソース（パッケージの配布サイトなど）を調べるようにしてください。

Comments

[退会済みユーザー]

ご回答いただきましてありがとうございます。
質問させていただいた後に他のページを参考にさせていただき、試したのですがエラーが治りません。（参考サイトや現在のrollup.config.jsとpackage.jsonは上記質問の中に記載しております）
また、src/main.jsはからファイルで作成してあります。

何か他に気になる点がございましたら教えていただけると幸いです。

[MakeNowJust]

`rollup.config.js`の`import npm from 'rollup-plugin-node-resolve'`の行を`import nodeResolve from 'rollup-plugin-node-resolve'`に直してください。

これで何か変わりますか？

[退会済みユーザー]

早速コメントいただきありがとうございます。
ファイル内容を変更してみても、結果は何も変わりませんでした。。

[MakeNowJust]

npm-debug.logだけでなくコンソールに出力された内容をそのまま（可能ならばコマンドラインも含めて）質問に追記していただけないでしょうか？　それと、出来れば詳細な環境（OSなど）も教えていただきたいです。

[MakeNowJust]

npm installは実行していて、必要なパッケージが全てインストールされていることは確認していますか？

[退会済みユーザー]

上記質問内容にパッケージとコマンドラインの内容を追加させていただきました。
パッケージは全てグローバルにインストールされていないといけないとかあるのでしょうか？

OSはOS X Yosemite 10.10.5です。
初心者なもので、他に何をお伝えすれば良いのかわからないため、一度上記内容を共有させていただきます。
いろいろとご丁寧にしていただき、本当にありがとうございます。

[MakeNowJust]

これは僕の予想ですが、rollupをグローバルにインストールしていないでしょうか？　rollupもグローバルではなくローカルにインストールすべきです。一度`npm i -D rollup`を実行してから試してみてください。

[退会済みユーザー]

ありがとうございます。
ローカルにrollupをインストールしたら、コマンドラインに変化が現れたのですが（質問の一番上に追加しています）、これはmain.jsがからなのがいけないのでしょうか？

何から何までご質問してしまい、申し訳ございません。

[MakeNowJust]

main.jsの内容が分からないと何とも言えないです。

[退会済みユーザー]

今までmain.jsは空ファイルだったのですが、今回のエラーの後、以下のようにsrc配下に2つのファイルを追加したのですが、現在質問の一番上にあるものと同じ、
{ [Error: Cannot find module 'babel-preset-es2015'] code: 'MODULE_NOT_FOUND' }
というエラーが出てしまいました。
こちらはmain.jsとmaths.jsに問題があるのでしょうか？
（ファイル内容が短いのでこちらに記載したほうが見やすいと思ったのですが、かえって見にくかったら申し訳ございません。）

《main.js》
import { square } from './maths.js';
console.log( square( 5 ) );

《maths.js》
export function square ( x ) {
return x * x;
}

[MakeNowJust]

それは追加したからエラーが出たのでしょうか？　それとも追加する前からエラーは出ていましたか？
あと、できれば.babelrcの内容も教えていただきたいです。

[退会済みユーザー]

先ほどお伝えした
{ [Error: Cannot find module 'babel-preset-es2015'] code: 'MODULE_NOT_FOUND' }
のエラーはsrc配下に空のmain.jsだけが存在するときも、main.jsとmathes.jsに内容を加えた後でもどちらでも表示されました。

.babelrcの内容は下記で、場所はsrc/.babelrcです。

《.babelrc》
{
"presets": ["es2015-rollup"]
}

[MakeNowJust]

babelrcはsrc以下ではなくプロジェクトのルートに配置した方がいいと思います。それで何か変わりますか？

[退会済みユーザー]

何も変わりませんでした。
他に何か心当たりのあることありますでしょうか？

[MakeNowJust]

もうよく分からないので自分の方で動作を確認しているソースを上げておきました。

https://github.com/MakeNowJust-Sandbox/mery-pc

これをcloneするなり落とすなりして`npm i && npm run build`してみてどうなるか試してみてください。

[退会済みユーザー]

ありがとうございます。
cloneして実行してみたのですが、私がもともとやっていたものと同様のエラーが表示されてしまいました。

私の思い当たる点としては、一度npmをアンインストールしたことがあるのですが、それが原因で何かがうまく噛み合っていないなどということはあるのでしょうか？
本当にいろいろしていただき、感謝しています。

[MakeNowJust]

そうですね。npmのバージョンが違うのではないかとずっと気になっていました。
自分のnpmのバージョンは、3.10.3です。npm -vで確認することができます。どうでしょうか？

[退会済みユーザー]

2.15.8と表示されました。
これは古すぎるのでしょうか？

npm updateでアップデートすれば良いでしょうか？

[MakeNowJust]

そもそもnpmをどうやってインストールしていますか？

[退会済みユーザー]

どうやってインストールしたか覚えていないのですが、その場合どうすればよろしいでしょうか？
本当に何からなにまで恐縮です。。

[MakeNowJust]

ならnpm update -g npmでアップデートしてみればいいんじゃないでしょうか。

[退会済みユーザー]

すいません。
なにが壊れているのかわからないのですが、'npm update -g npm'を実行したら、質問の最上部に載せたようなエラーが発生してしまいました。

下記URLの状況と近かったので、ここにある対策通り'npm cache clean'を実行しても（npm -vを実行しても）
'-bash: /usr/local/bin/npm: No such file or directory'となり、
'sudo npm cache clean'を実行すると
sudo: npm: command not foundとなってしまいました。

http://www.d-wood.com/blog/2015/10/22_7640.html

このような状況なのですが、原因や対策などわかりますでしょうか？

[MakeNowJust]

Homebrewは入っていますか？ 入っているならbrew reinstall nodeとしてnode.jsを再インストールしてみてはどうでしょうか

node.jsを再インストールすればnpmも再インストールされるはずです

[退会済みユーザー]

Homebrewは以前入れていたはずなんですでけど、確認したら入っていなそうで、ちょっといろいろ壊れてしまっているようです。
Homebrewを入れ直して、brew reinstall nodeをやってみます。
大変申し訳無いのですが、うまくいかなければまたこちらでご連絡させてください。

[退会済みユーザー]

いろいろ調べたりバタバタしていてご報告が遅れてしまい申し訳ございません。
こちらの件、nodeを複数の方法でインストール、アンインストールをしたことで、正常に動かなくなってしまっていたようでした。

一旦Homebrewから綺麗に入れ直し、0から始めることで正常に動かすことができるようになりました。
ただ、0からやってもsymlinkがうまくできないというようなエラーは出続けたのですが、下記コマンドを実行することで解決できました。

sudo chown -R `whoami`:admin /usr/local/bin
sudo chown -R `whoami`:admin /usr/local/share

参考サイト
http://stackoverflow.com/questions/31691626/cant-brew-install-node

MakeNowJust さん
本当にご丁寧に相談にのっていただき、ありがとうございました。