- パッケージマネージャー
- 最近は同じようなもので後発のyarnの方が優れているとか
使い方†
依存性解決のpackage.jsonをカレントディレクトリに配置して
npm i
package.json†
{
"name": "mytest",
"version": "1.0.0",
"description": "",
"main": "app/index.js",
"private": true,
生成されるファイル†
package.json | 依存バージョン指定、このバージョン以上という指定もできるので-lockファイルが存在する |
package-lock.json | ビルドした時のバージョン。固定したいときに使う |
dependencies | プロダクション環境だとこちらのみインストールされる |
devDependencies | 開発時のみ利用するライブラリー。npm install mocha --save-devでpackage.jsonに追加 |
主要パッケージ†
トランスパイラ†
babel-polyfill | JSXなどをJSに変換するトランスパイラ |
es6-promise | ES6 PROMISEの仕様に基づいたpolyfill(最新の仕様を過去のブラウザに対応すること) |
React系†
React Hot Loader | 開発時にstate維持したまま更新反映 |
react-redux-router | パスによるルーティング。history backが使えるので必須 |
外部通信ライブラリ†
axios | 非同期http通信。標準のfetchよりもシンプルに記述できる |
joi | オブジェクトのvalidatorツール |
moment | 日付操作 |
qs | クエリーストリングパーサー |
swiper | スワイプライブラリー |
文法チェック、フォーマッター†
WebPack†
JS,CSS,画像などをひとまとめにするモジュールバンドラー
Loader†
dev-server | 開発時にリアルタイムコンパイルやデバッグ情報など |
babel-loader | babelとの連携 |
url-loader | 画像のbase64化。やはりJavaScriptコードとして扱う |
csv-loader | csvを読み込むloader |
xml-loader | xmlを読み込むloader |
style-loader | CSSをStyleタグに書き出す |
css-loader | CSSを、javascriptのコードとして扱わせる |
stylus-loader | メタCSS言語をコンパイルする役割 |
Plugin†
Babel†
ES2015に非対応のブラウザでも対応できるようにコンパイルする。トランスパイラ