package.jsonに設定を書けるって知ってました?

自分は最近知りました。プロジェクトのルートディレクトリーに見慣れないファイル(postcss.config.js)があったのでチェックしてみたら、パッケージで使用する設定ファイルでした。自分で作ったのにすっかり忘れていたのです。

npmでいろいろパッケージをインストールして使っていると、別途設定ファイルを作らないといけなくなることがあります。例えば .babelrc / eslintrc.json / .stylelintrc / postcss.config.js こんな感じのファイルです。1つや2つくらいなら大して気になりませんが、3つ4つ…と増えていくと、プロジェクトのルートディレクトリーがごちゃごちゃしてくるので、ひとつのファイルにまとめられるならそうしたいと思ったのです。

ツールの設定をpackage.jsonに書く

そこでウェブを検索してみたところ、こちらの記事を発見し、詳しく解説してくれていたので、この記事にならって自分も設定ファイルをpackage.jsonにまとめてみました。パッと見よくわからないファイルが減ってすっきりしたので、みなさんにもおすすめします。

ちなみに 2017/10/1 現在のpackage.jsonの設定部分はこんな感じになっています。

React関連パッケージのバージョンによって起こる問題

npmのパッケージは気が向いたときにアップデートしているのですが、まれにアップデートをしたせいでこれまでどおりに動かなくなることがあります。現在、React関係のパッケージで起こっている問題を参考までに載せておきます。もしかするとWindows環境だけで起こる問題で、MacやLinux上では起こらないかもしれませんのであしからず。

eslint-plugin-jsx-a11yのバージョンが5.1.1より上の場合エラーが出る。コードをルールに沿って正しく記述するためのチェック用パッケージなのですが、6.0.2にアップデートすると以下のエラーが出るようになってしまいました。

definition for rule 'jsx-a11y/href-no-hash' was not found

5.1.1に戻すとエラーが出なくなります。

npm install eslint-plugin-jsx-a11y@5.1.1 --save-dev

※ 2017/11/23 追記:eslint 4.11.0, eslint-config-airbnb 16.1.0, eslint-plugin-jsx-a11y 6.0.2 の環境ではエラーが出なくなっています。もう最新版にしても問題ありません。

 

webpackをインストールする際にfsevents絡みでエラーが出てしまう。ルートの権限でインストールしてくださいと出るのですが、その際、毎回 fsevents 絡みのエラーが出ます。

npm ERR! Please try running this command again as root/Administrator.

npmのバージョンを5.0.4に戻すとエラーが起きません。

npm install -g npm@5.0.4

※ 2018/1/10 追記:npm@5.6.0 で改善したようです。もしエラーメッセージが出る場合は、クリーンインストールしてくださいとのことです。

 

webpackでbuildする際にファイルを圧縮することができない。久しぶりにファイルを圧縮してみようと思い、プロダクション版でファイルを出力しようとしたところ、uglifyが正常にできなくなっていました。

Uglify SyntaxError: Unexpected token: punc ())

上記のエラーが表示されます。調べてみたところ、ES6絡み?で圧縮ができなくなっているようです。webpackに備え付けられているuglifyだと動かないようなので、パッケージ uglify-js(バージョン2)& uglifyjs-webpack-plugin(最新のβバージョン)をインストールして利用してみたところ圧縮が可能になりました。

npm install uglify-js@2 --save-dev
npm install uglifyjs-webpack-plugin@1.0.0-beta.2 --save-dev

同じエラーで悩んでいる方がおられましたら参考にしてください。

※ 2018/1/10 追記:現在は webpack 付属の UglifyJsPlugin で正常に動作しています。uglify-js と uglifyjs-webpack-plugin は必要ありません。

開発環境の作り方 – まとめページ

これまでに書いた開発環境の作り方についての記事をまとめています。

XAMPP

 

Node.js

 

React + webpack + ESLint

 

コーディング規約

 

エディター

npmの基本的な使い方

Node.jsに含まれているnpm(パッケージ管理ツール)の基本的な使い方について解説しています。

npmとは開発するプロジェクトにライブラリなどを簡単に導入するための機能です。Node.jsをインストールするとnpmも同時にインストールされます。

インストール方法についてはこちらで詳しく解説しています。

Node.jsをイントールしよう!

Node.js command promptを起動しよう


Windows10のケースで解説しています。他のOSを使用している場合は、そのOSのアプリケーション起動方法に従ってください。

 

Node.js command prompt

スタートメニューからNode.jsの欄を探してください。そしてNode.js command promptを起動してみましょう。

 

起動後

黒い文字だけの画面が起動されると思います。npmは基本的にこのコマンドプロンプトを利用して操作していきます。

以下のコマンドを入力してEnterを押してみてください。

node -v

上記のようにバージョンが表示されると思います。これはあなたの環境にインストールされているNode.jsのバージョンです。

テストプロジェクトを作成する


npmの使い方を覚えるために、テストプロジェクトを作成してみましょう。どこでも構いませんので、新しくフォルダ(ディレクトリ)を作成してみてください。

この解説ではこのようにフォルダを作成しています。

Cドライブ > xampp > htdocs > test

フォルダが完成しましたら、Node.js command promptに戻りましょう。そして cdコマンドを利用して、今作成したフォルダの場所へ移動します。

cdコマンドというのは、ディレクトリ(フォルダ)を移動するためのコマンドです。主に利用するのは以下のコマンドです。よく利用しますので覚えておきましょう。

 

cd test

現在のディレクトリ内に存在するtestディレクトリに移動する。

 

cd ../

現在のディレクトリからひとつ上のディレクトリに移動する。

 

cd ../../

現在のディレクトリからふたつ上のディレクトリに移動する。

 

cd /

ルートディレクトリに移動する。例えば今、Cドライブ内のどこかのフォルダにいる場合は、Cドライブのトップに移動します。

 

現在、こちらの環境では上記のように表示されています。これはCドライブの中にある、Usersフォルダの中にある、AZフォルダに現在いるということです。

ここからさきほど作成したtestフォルダにcdコマンドで移動してみましょう。

cd ../../xampp/htdocs/test

これは現在のディレクトリからふたつ上のディレクトリに移動し、さらにxampp/htdocs/testに移動するというコマンドです。個別に cd ../../、cd xampp/htdocs/testと2回打っても同じ結果になります。

移動ができたら以下のような表示になります。

C:\xampp\htdocs\test>

ちなみにバックスラッシュと¥記号は同じものと考えてください。Windowsのコマンドプロンプトではバックスラッシュの代わりに¥記号が表示されます。

あなたが作成したテストプロジェクトのフォルダに移動できたら、次に進んでください。

package.jsonを作成する


npmを使うためにはまずpackage.jsonというファイルを作成しなければなりません。簡単に作成するコマンドが用意されていますので、以下を入力してみてください。

npm init

英語がズラズラと表示されると思います。これは対話式でpackage.jsonを作成するコマンドで、質問に答えていくとpackage.jsonが作成される仕組みになっています。

とりあえずテストプロジェクトなので、なにも入力せずにEnterだけを何度も押し続けましょう。内容について今は理解する必要はありません。

name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

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

Is this ok? (yes)

最後の質問でEnterを押すと、テストプロジェクトのフォルダ内にpackage.jsonというファイルが作成されます。エディターで開いて中身をチェックしてみましょう。

これでnpmを利用する準備は整いました。

パッケージをインストールする


npmを使ってパッケージをインストールしてみましょう。今回はテストプロジェクト内にjQueryをインストールしてみます。以下のコマンドを入力してみてください。

npm install jquery --save

すると以下のような表示になると思います。

C:\xampp\htdocs\test>npm install jquery --save
test@1.0.0 C:\xampp\htdocs\test
`-- jquery@3.2.1

npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

C:\xampp\htdocs\test>

テストプロジェクトのフォルダをチェックしてみてください。node_modulesというフォルダが新たに作成されています。その中をのぞくと、jqueryというフォルダも存在しています。

npmではnode_modulesというフォルダ内に、インストールしたパッケージを保存していきます。今回はこれでjQueryがインストールされたということです。

次にpackage.jsonを再度エディターで開いてみてください。

"dependencies": {
  "jquery": "^3.2.1"
}

このような表示が追加されていると思います。これはテストプロジェクトにjQueryのバージョン3.2.1をインストールしました、という記録です。npmを使って様々なパッケージをインストールしていくと、ここにどんどん追加されていきます。

この記録をチェックすると、自分がなんのパッケージ(ライブラリ)のどのバージョンをインストールしたのかが、ひと目でわかるようになります。

npmの基本的なコマンド


npmを使う上で必要になる基本的なコマンドについて解説します。

 

npm install パッケージ名

パッケージをインストールするコマンドです。–save または –save-dev をつけずに使うことはおすすめしません。

 

npm install パッケージ名 --save

パッケージをインストールするコマンドに –save というオプションを追加しています。これをつけると、package.jsonのdependenciesに記録が残るようになります。

本番環境にアップロードして利用するパッケージをインストールする場合に –save をつけてください。

 

npm install パッケージ名 --save-dev

–save-dev は開発環境だけで使うパッケージをインストールする時につけるオプションです。本番環境にアップロードしなくてもいいパッケージは –save-dev をつけてインストールしましょう。

package.jsonにdevDependenciesとして記録されます。

 

npm install

パッケージ名を指定しない場合は、package.jsonの dependencies devDependencies に記載されているパッケージをまとめてインストールします。

 

npm update

これまでにインストールしたパッケージを、まとめて新しいバージョンにアップデートします。個別にアップデートしたい場合は updateの後にパッケージ名を記述してください。

 

npm uninstall パッケージ名

インストールしたパッケージをアンインストールします。

 

-g オプションについて

ブログなどでnpmについて書かれた記事に -g というオプションがついていることがありますが、これはグローバルというNode.jsの一番上の階層にインストールするオプションです。

様々なプロジェクトで共通して利用するようなパッケージをインストールする場合に使うオプションで、基本的には使わなくていいものだと考えてください。

Node.js command promptの初期フォルダを設定する


スタートメニューのショートカットから普通にNode.js command promptを起動した場合、Windows10では最初にユーザーのフォルダが開かれると思います。

毎回、開発をするときにcdコマンドで開発しているプロジェクトに移動するのはめんどうなので、アプリケーションを開いた時に、指定のフォルダを開くように設定しましょう。

 

スタートメニュー

  1. スタートメニューでNode.jsを開く
  2. Node.js command promptを右クリック
  3. その他を選ぶ
  4. ファイルの場所を開く

 

エクスプローラーが開きます

ファイルの場所を開くとエクスプローラーが開きます。ここでNode.js command prompt上で右クリックを押して出てきたメニューから、ショートカットの作成を選びましょう。

ここにショートカットを作成することはできません。デスクトップ上に作成しますか?と尋ねられますので、はいを押してください。

デスクトップに作成されたNode.js command promptのショートカット上で右クリックを押し、プロパティを選んでください。

 

ショートカットのプロパティ

プロパティ内部の作業フォルダーの欄を変更しましょう。

"C:\Program Files\nodejs\"
↓
"C:\xampp\htdocs\test\"

開きたいフォルダのアドレスに変更してから、OKを押してプロパティを閉じてください。次回からそのショートカットを使ってNode.js command promptを起動すると、指定したフォルダの場所が開いた状態で開始されます。

最後に


基本的なnpmの使い方は理解してもらえたのではないでしょうか。

上記のテストプロジェクトでは、package.jsonのプロジェクト名は test で、ライセンスもISC(フリーソフトウェアライセンス)と記述されていますが、一人で開発を進める場合はそのままでも問題はありません。

しかしプロジェクトを複数人で開発する場合や、ネットに公開する場合は、正式な書き方でpackage.jsonを作成するようにしましょう。以下のサイトを参考にしてもらうとわかりやすいと思います。

 

ちなみにGame Usersのpackage.jsonはこのようになっています。

 

npmについてさらに詳しく知りたい方は、公式サイトのドキュメント(英語)を確認してください。

以上でnpmの解説を終わります。