JavaScript/npm の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/npm へ行く。
• JavaScript/npm の差分を削除

#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に非対応のブラウザでも対応できるようにコンパイルする。トランスパイラ