This repository has been archived by the owner on Sep 17, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathnpm.html
106 lines (84 loc) · 6.56 KB
/
npm.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/common.css">
<title>npm install 時のトラブルシューティング - N予備校 プログラミングコース</title>
</head>
<body>
<div class="contents-container">
<div class="navbar">
<div class="navtext">
N予備校 <a href="./index.html">プログラミングコース トラブルシューティング</a>
</div>
</div>
<div class="header header-keyboard">
<h2 class="headertext">npm install 時のトラブルシューティング</h2>
</div>
<div class="content">
<p><a href="https://www.nnn.ed.nico/pages/programming/">N予備校</a> プログラミング入門 Webアプリコース 受講生の皆さん向けに、npm を利用したライブラリのインストール時に発生する問題の解決をお助けするためのページです。</p>
<div class="case">
<h3 class="casetitle">何が起きているか</h3>
<p>Q&Aにおいてよく寄せられる質問や、教材編集チームにおける動作確認によれば、npm install 時に発生するトラブルの多くは Windows 上で構築した仮想環境にて発生しています。<br>
理由を簡単に説明してしまうと、 Windows と VirtualBox の共有フォルダ、そして npm という3つのソフトウェア・仕組みの相性が悪いからです。
<!--<br>
学習を進めていく上ではこれらの詳細について理解する必要はありませんが、気になる人も居ると思うのでここでは詳しく説明しましょう。<br>（WIP)--></p>
</div>
<div class="case">
<h3 class="casetitle">まず試すこと</h3>
<p>まず試すべきことがいくつかあります。</p>
<div class="casechild">
<h4>【Windowsのみ】コマンドプロンプトを管理者権限で起動しているか確認</h4>
<p>vagrant up を正しく行うためには、コマンドプロンプトに管理者権限が必要です。<br>
コマンドプロンプトのタイトルバーに「管理者」と表示されていない場合は管理者権限で起動できていません。<br>
vagrant halt を行って仮想環境を終了し、コマンドプロンプトを管理者権限で起動するところからやり直してください。</p>
</div>
<div class="casechild">
<h4>VagrantFile で共有フォルダの設定ができているか確認</h4>
<p>環境構築後、1回も npm install がうまく行っていない場合は <a href="https://www.nnn.ed.nico/contents/guides/1472/content#try-shared-folder" target="_blank">教材</a> を参考にして共有フォルダの設定が最後まできちんとできているか確認してみてください。
<pre>config.vm.synced_folder "./workspace", "/home/ubuntu/workspace"
config.vm.provider :virtualbox do |vb|
vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate//home/ubuntu/workspace","1"]
end</pre>
特に、Windows 環境において上記設定ができているかを確認してください。（Mac の方は不要です。）</p>
</div>
<div class="casechild">
<h4>node_modules フォルダとキャッシュを削除</h4>
<p>ダウンロードしたライブラリがインストールされる node_modules フォルダを削除した上で npm のキャッシュを削除してみましょう。<br>
以下のコマンドを1行ずつ入力してください。</p>
<pre>
rm -rf node_modules
npm cache clean --force
npm install
</pre>
</div>
</div>
<div class="case">
<h3 class="casetitle">それでもダメな場合</h3>
<p>以下の操作をお試しください。</p>
<div class="casechild">
<h4>npm のバージョンを上げる</h4>
<p>npm の開発チームもこの問題については認識しており、 npm 側の挙動を工夫することで問題の発生を回避するようにしているようです。最新版の npm では対策されているため、まずは npm を最新版にアップデートしましょう。<br>
Ubuntu 上のターミナルにて以下のように入力してください。 <pre>npm install -g npm</pre> これで npm がアップデートされるので、完了したら通常通り、 npm install などをもう一度試してみてください。
</p>
</div>
<div class="casechild">
<h4>npm の代わりに yarn を使う</h4>
<p>npm と互換性のある Node.js 用パッケージマネージャとして、 yarn (ヤーン) というものが存在しています。<br>
教材第3章 <a href="https://www.nnn.ed.nico/contents/guides/1489/content#explain-yarn" target="_blank">「ライブラリ」の節</a> を参考に、 yarn を導入してみてください。<br>
npm と似た感覚で操作できますが、一部コマンドが違うので、上記教材を参考にコマンドを読み替えながら進めてください。
</p>
</div>
</div>
<div class="case">
<h3 class="casetitle">わからないので質問をしたい</h3>
<p>ここまで試しても解決方法が不明、あるいはこれらの解決方法に疑問がある場合は
<a href="https://www.nnn.ed.nico/questions" target="_blank">Q&A</a>にて質問してみてください。
<br>その際は、スクリーンショットのみならず、お使いの PC の環境（特に OSのバージョン など）や、今まで試してみたことなどを忘れずにお書きください。</p>
</div>
</div>
</div>
</body>
</html>