- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-04-02T14:11:49+00:00","default:wikiadmin","wikiadmin")
#author("2019-10-18T10:05:53+00:00","default:wikiadmin","wikiadmin")
-パッケージマネージャー
-最近は同じようなもので後発のyarnの方が優れているとか
*使い方 [#m8fdb5f8]
依存性解決のpackage.jsonをカレントディレクトリに配置して
npm i
*package.json [#h16c64bc]
{
"name": "mytest",
"version": "1.0.0",
"description": "",
"main": "app/index.js",
"private": true,
*生成されるファイル [#q55046f7]
|package.json|依存バージョン指定、このバージョン以上という指定もできるので-lockファイルが存在する|
|package-lock.json|ビルドした時のバージョン。固定したいときに使う|
|dependencies|プロダクション環境だとこちらのみインストールされる|
|devDependencies|開発時のみ利用するライブラリー。npm install mocha --save-devでpackage.jsonに追加|
*主要パッケージ [#cd572cb9]
**トランスパイラ [#n2e87ae7]
|babel-polyfill|JSXなどをJSに変換するトランスパイラ|
|es6-promise|ES6 PROMISEの仕様に基づいたpolyfill(最新の仕様を過去のブラウザに対応すること)|
**React系 [#fb1f0d40]
|React Hot Loader|開発時にstate維持したまま更新反映|
|react-redux-router|パスによるルーティング。history backが使えるので必須|
**外部通信ライブラリ [#u88609cc]
|axios|非同期http通信。標準のfetchよりもシンプルに記述できる|
|joi|オブジェクトのvalidatorツール|
|moment|日付操作|
|qs|クエリーストリングパーサー|
|swiper|スワイプライブラリー|
**文法チェック、フォーマッター [#f51b1395]
**WebPack [#udd85506]
JS,CSS,画像などをひとまとめにするモジュールバンドラー
***Loader [#z22c31a5]
|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 [#i1835d9e]
**Babel [#f862a908]
ES2015に非対応のブラウザでも対応できるようにコンパイルする。トランスパイラ