deve.K

エンジニアが未来を切り開く。

React.jsのpackage.json 基礎

reactのpackage.json

以前でのReactアプリの作成は中々に大変なプロセスでした。

webpackとBabelを使用し、様々な構成をしていく必要がありました。

ですが優れた構成を備えられた非常に便利なモジュールであるCreate-React-AppとReactアプリの構築を容易にしreact-scriptsというスクリプトコマンドが存在します。

そもそもスクリプトとは?

本来プログラミングでは、スクリプトは他のプログラムに対して何をするかを指示する命令のリストとなりす。

それはReactであっても例外ではありません。

Create React Appには、4つのメインスクリプトがあります。

それら各メインスクリプト

  • start

  • test

  • build

  • eject

これらはデフォルトスクリプトであり、この4つが付属されておりReactアプリに必要なすべての構成は、react-scriptsパッケージを介して提供されます。

react-scriptsに環境変数を使用すれば、開発者はターミナルから設定できる環境変数を介してさまざまな高度な構成を行うことが容易となります。

それら設定の理解を深めることを目的として初学者向けに解説していきます。

package.jsonとは?

すべてのnpmパッケージには、通常ではプロジェクトルートにpackageというファイルが含まれます。

json』このファイルには、プロジェクトに関連するさまざまなメタデータが含まれておりプロジェクトを識別し、プロジェクトの依存関係を処理できるようにする情報をnpmに提供するために使用され、

宣言されたすべての依存関係を処理するためにデフォルトで使用するjsonファイルとなります。

アプリケーションが実行するために必要なさまざまなJavaScriptライブラリ(パッケージ)をフェッチおよび調整するためnpmの開始点として、このファイルに含まれる情報として使用されていくのがpackage.jsonとなります。

ですのでこのファイルでは、Reactアプリのすべての設定を示しています。

ファイル内の各属性には、何かしらの形で重要性がそれぞれあります、その中でもそうではないものもあります。

package.jsonはCRAを使用している場合、単純なReact.jsアプリを実行するために必要最小限の依存関係が含まれております。

React(CRA)package.jsonの中身

CRAでのpackage.jsonのデフォルト構成となります。


{
"name": "my-app", 
"version": "0.1.0",  
"private": true,
"dependencies": {  
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3"
  },

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

  },
"eslintconfig":  {
"extends": "react-app"
 },
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"

]

}

上から順番にいきましょう

【name】

nameでは実行中に指定するアプリケーションの名前となります、アプリには任意の名前を指定が可能です気を付けるべき点は『小文字』で決めていきます。

※アプリケーションの名前にはハイフンやアンダースコアが含まれる事があります。

【version】

アプリケーションの現在のバージョンとなります。

create-react-appのデフォルトでは0.1.0として初期化をします。

【private】

このprivateは重要な部分の1つとなります。

package.jsonでprivateをtrueに設定すると、npmエコシステム内での公開を拒否します。

つまりプライベートリポジトリの公開を防ぐ方法の設定となります。

【dependencies】

dependenciesは和訳すると『依存関係』となります

依存関係は、プロジェクトに現在使用されている必要な全てのモジュールのリスト(オブジェクト)となります。

本番環境でのアプリケーションに必要なすべてのノードモジュールとバージョンが含まれます。

上記でのdependenciesはJavaScriptで使用できる依存関係が含まれています。

Reactを操作するための開発スクリプトのセットを提供してくれます。

【scripts】

公式でのnpmdocsによると、以下のように記述されています。

『scriptsプロパティは、パッケージのライフサイクルのさまざまな時点で実行されるスクリプトコマンドを含む辞書となります。』

それはどういう意味なのか?

package.jsonを使用する前または後にスクリプトを実行できることを意味します。

多くの場合では、scriptsはビルドとテストに使用されます。

scriptsでは開発していく上で効率的な方法でいくつかのreact-scriptsコマンドにアクセスするために使用し、エイリアスを指定します。

例えばですが、『npm start』コマンドで実行すればreact-scripts startが裏側で実行されます。

他のbuildなども同じとなります。

Create-React-Appのデフォルトでは、これらの操作のすべての基本的なスクリプトを処理しますが、CRAを使用しない場合は、あなたが書いていく必要があります。

これらは他のスクリプトも存在する可能性があります、それぞれに独自のコマンドセットがあり、上記でのセットはReactアプリケーションのpackage.jsonファイルの基本的な属性のセットを形成してくれています。

【devDependancies】

デフォルトではありませんがdevDependanciesという設定もございます。

devDependanciesでは、開発中にのみ必要なパッケージとなります。

devDependanciesとしてのパッケージの例では、jest・eslint・storybookおよびprettierなどがあります。

【eslintConfig】

JavaScriptプロジェクトに最適なLintツールの1つはESLintです。

機能を拡張するための様々なプラグインをサポートしており、使いやすいドキュメントが豊富に用意されています。

JavaScript/TypeScriptに加え、esLintはプロジェクト全体またはその特定の部分で他のタイプのファイルに適用が可能です。

package.jsonにesLintの構成やルールなどを含めることができます。

設定方法はpackage.jsonにキー『eslintConfig』構成を追加し、esLintルールの追加を開始するだけです。

Create-React-AppではカスタムesLint構成は必要ありません、それはCRAではesLintがすでに統合されているためです。

 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

【browserslist】

browserslistでは、アプリのブラウザの互換性に関する情報を提供しeslintConfigコードのリンティングを処理します。

つまりReactアプリケーションでサポートされているブラウザを指定できます。

browserslistを使用することで、トランスパイラー/バンドルはサポートするブラウザを認識し、ブラウザを様々なカテゴリーとして『グループ化』し、レガシーバンドルではES6をサポートしていない古いブラウザと互換性があります。

最新のバンドルではバンドルサイズが小さく、最新であるブラウザ用に最適化されております、それぞれの個別のバンドルを生成する事ができます。

このプロセスは基本的にはReact、Angular、Vueなどのフレームワーク/ライブラリなどで活用され実行されます。

ブラウザ事にグループ化し1つのバンドルとして生成し沢山のバンドルを生成すると、アプリケーションがより最適化されますがその分ビルドが遅くなっていきます。

開発段階では、人気のあるブラウザの最新バージョンを使用することを指定する必要があります。それによりコードでES6機能を使用できるようになり、サポートされるようになります。

本番環境では別の指定も可能となります。

せっかくですので、『node_modules』についても軽く解説致します。

node_modules

このフォルダは、基本的にプロジェクトのルートディレクトリにあります。

ここにはプロジェクトの実行に必要なモジュールを表す何百ものフォルダとファイルが含まれ格納されています。

アプリルートでのjsonファイルは、 npminstallを実行したときにnode_modulesにインストールされるライブラリを定義します。

node_modulesフォルダをGitHubにプッシュしないように注意して下さい。

node_modulesフォルダには、npmからダウンロードされたライブラリが含まれます。

リポジトリを複製するすべてがpackage.jsonに基づいてダウンロードするため、GitHubにプッシュする必要がありません。

静的ビルドをエクスポートすると、ソースファイルがHTMLおよびjsファイルに変換されます。

したがって、本番環境ではnode_modulesは必要ありません。

もちもん動的ビルドも同じとなります。

node_modulesフォルダが本番環境に含まれた場合には、Webサイトの速度が低下する可能性があります。

Reactのnode_modulesでもnpmモジュールが保存される場所となります。

node_modulesを開くと、 reactという名前のフォルダが表示されます、このフォルダにはReactを実行するコードが含まれております。

node_modulesフォルダを削除した場合(package-lock.json・npm installも削除)

すべての依存関係をインストールするには、コマンドを再実行する必要があります。

Reactでは、これらnode_modules、npmなしで、追加の依存関係をインストールせずに実行ができます。

CDNから本番ビルドをインポートして使用します。

Create React Appではそれぞれ事前構成されたスクリプトが用意されていますが、他のJavaScriptプロジェクトと同じようにファイルを更新することで、スクリプトを追加できます。

開発者の作業を楽にするのに役立つ便利なスクリプトが付属しているだけではなく、プロジェクト事にスクリプトを適合させ柔軟なオプションが用意されております。

本日はここまでにしたいと思います。

最後まで読んで頂きありがとうございます。

ご不明な点がございましたら、お気軽にコメントもしくはお問い合せからお願い致します。

プライバシーポリシー