Help us understand the problem. What is going on with this article?

Visual Studio Codeでnpmを使う

More than 3 years have passed since last update.

この記事はVisual Studioを起動せず、CordovaでWindowsストアアプリを作るの続きです。ここに書かれていてよくわからないものについては、先の記事を確認してください。

さて、Visual Studio Codeでnpmを使います。npmを使うことで、プロジェクト内のライブラリバージョン管理を行うことができます。
このnpmを使ってライブラリのインストールを行っておくと、ライブラリの依存関係を解決してくれるほか、Gitのリポジトリにいちいちライブラリを追加しなくても、クローン先に簡単にライブラリをダウンロードすることができるので、リポジトリで管理するファイルが減らせます。

初期化処理

まず、プロジェクトの初期化処理を行います。npm initというコマンドを利用します。

> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
・・・いろいろ質問・・・

質問のところで、いったんプロンプトが止まります。アプリ名やバージョン、概要、作者名などを聞かれますが、パッケージをアップロードするとかでもない限り、そんなに重要な情報ではないです。

すると、以下のようなファイルが出力されます。

package.json
{
  "name": "testapp",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

なんか真ん中にErrorという文字列があるので一瞬不安になりますが、テスト用のコードなので問題ないです。

これで、モジュールインストールの準備が整いました。ここでは、Windowsストアアプリ向けのUIライブラリ、WinJSをインストールしてみます。

> npm install winjs --save
testapp@1.0.0 C:\temp\testapp
`-- winjs@4.4.0  extraneous

npm WARN testapp@1.0.0 No repository field.
  • 第一引数(winjs):インストールしたいパッケージ名
  • 第二引数(--save):依存ライブラリとして、package.jsonに保存する場合--saveをつける

インストールが終わりました。すると、カレントフォルダに、node_modulesというフォルダができると思います。これがモジュールがインストールされた場所です。

image

ためしに、このフォルダを削除して、もう一度npmからダウンロードしてみます。

> rm -rf node_modules
> npm install
testapp@1.0.0 C:\temp\testapp
`-- winjs@4.4.0

npm WARN testapp@1.0.0 No repository field.

packages.jsonに保存した依存ライブラリを全部ダウンロードしたいときには、引数無しで`npm install'コマンドを実行します。すると、ライブラリが全部インストールされます。

Visual Studio Codeから使う

Visual Studio Codeにも、npmの拡張があります。これを使うとnpmのコマンドをプロンプトを出さずに使えます。

まず、拡張機能をインストールします。拡張はそのままnpmです。
image

再起動すると、Command Paletteからnpmコマンドが一部使えるようになります。以下重要なコマンド

  • >npm: Initialize npm package: npm initです。最初に必ず必要。
  • >npm install and save dependency: npm install 〇〇 --save。パッケージ名はコマンド選択後に入力を促されます。
  • >npm: install saved packages:引数無しのnpm installです。復元時はこれを使いましょう。

Gitコミット時

ここまで書いておいてあえていうこともないですが、.gitignoreにはnode_modules/フォルダを指定しておきましょう。他はコミットして問題なしです。

TakamiChie
NPO法人 まちづくりエージェント SIDE BEACH CITY.理事。フリーランスのプログラマ。横浜・横須賀でIT勉強会の主催などをやってます。
https://onpu-tamago.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした