使い方

依存性解決の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-polyfillJSXなどをJSに変換するトランスパイラ
es6-promiseES6 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-loaderbabelとの連携
url-loader画像のbase64化。やはりJavaScriptコードとして扱う
csv-loadercsvを読み込むloader
xml-loaderxmlを読み込むloader
style-loaderCSSをStyleタグに書き出す
css-loaderCSSを、javascriptのコードとして扱わせる
stylus-loaderメタCSS言語をコンパイルする役割

Plugin

Babel

ES2015に非対応のブラウザでも対応できるようにコンパイルする。トランスパイラ


トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-10-14 (金) 13:16:53