yuri admin
1.0.0
これは、React+React-router4+an�td3 に基づくミドルおよびバックエンド管理ソリューションです。
React+react-router+antd に基づくミッドエンドおよびバックエンドのソリューション。設定なしですぐに使用でき、json を維持するだけで済みます。
このプロジェクトは、Create React App を使用してブートストラップされました。
以下に、一般的なタスクの実行方法に関する情報を示します。
このガイドの最新版はここで見つけることができます。
<title>publicフォルダーの使用publicフォルダーを使用する場合.envへの開発環境変数の追加<meta>タグの生成npm start変更を検出しないnpm test macOS Sierra でハングするnpm run build終了が早すぎますnpm run buildが失敗するnpm run build縮小に失敗するCreate React App は 2 つのパッケージに分かれています。
create-react-app新しいプロジェクトを作成するために使用するグローバル コマンドライン ユーティリティです。react-scripts生成されたプロジェクト (これを含む) の開発依存関係です。 create-react-app自体を更新する必要はほとんどありません。すべての設定がreact-scriptsに委任されます。
create-react-app実行すると、常に最新バージョンのreact-scripts使用してプロジェクトが作成されるため、新しく作成されたアプリのすべての新機能と改善点が自動的に取得されます。
既存のプロジェクトを新しいバージョンのreact-scriptsに更新するには、変更ログを開き、現在使用しているバージョンを見つけて (不明な場合は、このフォルダー内のpackage.json確認してください)、新しいバージョンの移行手順を適用します。バージョン。
ほとんどの場合、 package.jsonでreact-scriptsバージョンを変更し、このフォルダーでnpm install実行するだけで十分ですが、潜在的な重大な変更については変更ログを参照することをお勧めします。
私たちは、 react-scripts問題なくアップグレードできるように、重大な変更を最小限に抑えることに取り組んでいます。
フィードバックはいつでもお待ちしております。
作成後、プロジェクトは次のようになります。
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
プロジェクトをビルドするには、これらのファイルが正確なファイル名で存在する必要があります。
public/index.htmlはページ テンプレートです。src/index.js JavaScript のエントリ ポイントです。他のファイルは削除したり名前を変更したりできます。
src内にサブディレクトリを作成すると、再構築を高速化するために、 src内のファイルのみが Webpack によって処理されます。
JS ファイルと CSS ファイルはsrc内に置く必要があります。そうしないと、Webpack はそれらのファイルを認識できません。
public/index.htmlからは、 public内のファイルのみを使用できます。
JavaScript および HTML からアセットを使用する方法については、以下の手順をお読みください。
ただし、さらに最上位のディレクトリを作成することもできます。
これらは実稼働ビルドには含まれないため、ドキュメントなどに使用できます。
プロジェクト ディレクトリでは、次を実行できます。
npm startアプリを開発モードで実行します。
http://localhost:3000 を開いてブラウザで表示します。
編集を行うとページがリロードされます。
コンソールには lint エラーも表示されます。
npm testインタラクティブウォッチモードでテストランナーを起動します。
詳細については、テストの実行に関するセクションを参照してください。
npm run build実稼働用のアプリをbuildフォルダーにビルドします。
React を実稼働モードに正しくバンドルし、最高のパフォーマンスが得られるようにビルドを最適化します。
ビルドは縮小され、ファイル名にはハッシュが含まれます。
アプリをデプロイする準備ができました。
詳細については、展開に関するセクションを参照してください。
npm run eject注: これは一方向の操作であり、一度ejectと、元に戻すことはできません。
ビルド ツールと構成の選択に満足できない場合は、いつでもこのコマンドを使用して単一のビルド依存関係をプロジェクトからejectできます。
代わりに、すべての構成ファイルと推移的な依存関係 (Webpack、Babel、ESLint など) がプロジェクトに直接コピーされるため、それらを完全に制御できるようになります。eject eject除くすべてのコマンドは引き続き機能しますが、これらのコマンドは、スクリプトをコピーしたので、この時点では自分で調整できます。
eject使用する必要はありません。厳選された機能セットは小規模および中規模のデプロイメントに適しているため、この機能を使用する義務を感じる必要はありません。ただし、この機能が使用できない場合は、このツールが役に立たないことは理解しています。準備ができたらカスタマイズしてください。
デフォルトでは、生成されたプロジェクトは最新バージョンの React を使用します。
サポートされているブラウザの詳細については、React のドキュメントを参照してください。
このプロジェクトは、最新の JavaScript 標準のスーパーセットをサポートしています。
ES6 の構文機能に加えて、次の機能もサポートしています。
さまざまな提案段階について詳しくご覧ください。
実験的な提案は慎重に使用することをお勧めしますが、Facebook は製品コードでこれらの機能を頻繁に使用するため、将来これらの提案が変更された場合は codemod を提供する予定です。
プロジェクトにはいくつかの ES6 ポリフィルのみが含まれていることに注意してください。
object-assignを介したObject.assign() 。promiseによるPromise 。whatwg-fetch経由でfetch() 。ランタイム サポートが必要な他の ES6+ 機能 ( Array.from()やSymbolなど) を使用する場合は、適切なポリフィルを手動で含めているか、対象のブラウザがすでにポリフィルをサポートしていることを確認してください。
また、 for...ofや[...nonArrayValue]などの新しい構文機能を使用すると、Babel が ES6 ランタイム機能に依存するコードを生成し、ポリフィルなしでは機能しない可能性があることにも注意してください。特定の構文はすべてコンパイルされます。
お気に入りのテキスト エディターで構文の強調表示を設定するには、関連する Babel ドキュメント ページにアクセスし、最も一般的なエディターのいくつかについて説明します。
注: この機能は、
[email protected]以降で利用できます。
また、npm 3 以降でのみ動作します。
Sublime Text、Atom、Visual Studio Code などの一部のエディターは、ESLint のプラグインを提供します。
lint の実行には必要ありません。lint の出力はブラウザーのコンソールだけでなく端末にも表示されます。ただし、lint の結果をエディターに直接表示したい場合は、いくつかの追加手順を実行できます。
まずエディタ用の ESLint プラグインをインストールする必要があります。次に、 .eslintrcというファイルをプロジェクト ルートに追加します。
{
"extends" : "react-app"
}これで、エディターがリント警告を報告するようになります。
.eslintrcファイルをさらに編集した場合でも、これらの変更はエディターの統合にのみ影響し、ターミナルおよびブラウザー内の lint 出力には影響しないことに注意してください。これは、Create React App が意図的に検索する最小限のルール セットを提供しているためです。よくある間違い。
プロジェクトにコーディング スタイルを適用したい場合は、ESLint スタイル ルールの代わりに Prettier を使用することを検討してください。
この機能は現在、Visual Studio Code と WebStorm でのみサポートされています。
Visual Studio Code と WebStorm は、Create React App を使用してすぐに使えるデバッグをサポートしています。これにより、開発者はエディターを離れることなく React コードを作成してデバッグできるようになります。また、最も重要なことは、コンテキストを切り替える継続的な開発ワークフローを実現できることです。ツールを切り替える必要がないため、最小限で済みます。
最新バージョンの VS Code と VS Code Chrome Debugger Extension がインストールされている必要があります。
次に、以下のブロックをlaunch.jsonファイルに追加し、アプリのルート ディレクトリの.vscodeフォルダー内に配置します。
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}注: HOST または PORT 環境変数を使用して調整を行った場合、URL は異なる場合があります。
npm startを実行してアプリを起動し、 F5を押すか緑色のデバッグ アイコンをクリックして VS Code でデバッグを開始します。これで、コードの作成、ブレークポイントの設定、コードの変更、新しく変更されたコードのデバッグをすべて実行できるようになります。エディタ。
VS Code のデバッグで問題が発生しましたか? トラブルシューティング ガイドを参照してください。
WebStorm および JetBrains IDE Support Chrome 拡張機能をインストールする必要があります。
WebStorm メニューで [ Run ] を選択し、 [ Edit Configurations...選択します。次に、 +をクリックしてJavaScript Debugを選択し、URL フィールドにhttp://localhost:3000を貼り付けて構成を保存します。
注: HOST または PORT 環境変数を使用して調整を行った場合、URL は異なる場合があります。
npm start実行してアプリを起動し、macOS では^D押すか、Windows および Linux ではF9押すか、緑色のデバッグ アイコンをクリックして WebStorm でのデバッグを開始します。
同じ方法で、IntelliJ IDEA Ultimate、PhpStorm、PyCharm Pro、RubyMine でアプリケーションをデバッグできます。
Prettier は、JavaScript、CSS、および JSON をサポートする独自のコード フォーマッタです。Prettier を使用すると、プロジェクト内のコード スタイルを確保するために、作成したコードを自動的にフォーマットできます。詳細については、Prettier の GitHub ページを参照してください。それは動作中です。
git でコミットを行うたびにコードをフォーマットするには、次の依存関係をインストールする必要があります。
npm install --save husky lint-staged prettierあるいは、 yarn使用することもできます。
yarn add husky lint-staged prettierhusky使用すると、githook を npm スクリプトであるかのように簡単に使用できます。lint-staged使用すると、git のステージングされたファイルでスクリプトを実行できます。詳細については、lint-staged に関するこのブログ投稿を参照してください。prettierは、コミット前に実行する JavaScript フォーマッタです。これで、プロジェクト ルートのpackage.jsonに数行を追加することで、すべてのファイルが正しくフォーマットされていることを確認できます。
次の行をscriptsセクションに追加します。
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build",次に、「lint-staged」フィールドをpackage.jsonに追加します。例:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": {これで、コミットを行うたびに、Prettier は変更されたファイルを自動的にフォーマットします。 ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"を実行することもできます。 ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"して、プロジェクト全体を初めてフォーマットします。
次に、Prettier をお気に入りのエディターに統合する場合は、Prettier GitHub ページのエディターの統合に関するセクションをお読みください。
<title>生成されたプロジェクトのpublicフォルダーにソース HTML ファイルがあります。その中の<title>タグを編集して、タイトルを「React App」から他のものに変更できます。
通常、 publicフォルダー内のファイルを編集することはあまりないことに注意してください。たとえば、スタイルシートの追加は HTML に触れることなく行われます。
コンテンツに基づいてページのタイトルを動的に更新する必要がある場合は、ブラウザのdocument.title API を使用できます。React コンポーネントからタイトルを変更する場合のより複雑なシナリオでは、サードパーティのライブラリである React Helmet を使用できます。
運用環境でアプリにカスタム サーバーを使用し、ブラウザに送信される前にタイトルを変更したい場合は、このセクションのアドバイスに従うこともできます。あるいは、各ページを静的 HTML ファイルとして事前に構築してから読み込むこともできます。 JavaScript バンドルについては、ここで説明します。
生成されたプロジェクトには、React と ReactDOM が依存関係として含まれており、Create React App で使用される一連のスクリプトもnpmでインストールできます。
npm install --save react-routerあるいは、 yarn使用することもできます。
yarn add react-routerこれは、 react-routerだけでなく、どのライブラリでも機能します。
このプロジェクトのセットアップは、Babel のおかげで ES6 モジュールをサポートしています。
require()とmodule.exports引き続き使用できますが、代わりにimportとexport使用することをお勧めします。
例えば：
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;デフォルトと名前付きエクスポートの違いに注意してください。これは間違いの原因となります。
モジュールが 1 つのもの (コンポーネントなど) のみをエクスポートする場合は、デフォルトのインポートとエクスポートを使用することをお勧めします。これは、 export default Button 、 import Button from './Button'と得られます。
名前付きエクスポートは、複数の関数をエクスポートするユーティリティ モジュールに便利です。モジュールには、デフォルトのエクスポートを 1 つだけ、名前付きエクスポートを必要な数だけ持つことができます。
ES6 モジュールの詳細については、以下をご覧ください。
ユーザーが使用する前にアプリ全体をダウンロードする代わりに、コード分割を使用すると、コードを小さなチャンクに分割して、オンデマンドでロードできるようになります。
このプロジェクトのセットアップは、動的なimport()によるコード分割をサポートしています。その提案はステージ 3 にあります。 import()関数のような形式は、モジュール名を引数として受け取り、常にモジュールの名前空間オブジェクトに解決されるPromiseを返します。
以下に例を示します。
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ;これにより、 moduleA.jsとそのすべての一意の依存関係が、ユーザーが [読み込み] ボタンをクリックした後にのみ読み込まれる別個のチャンクとして作成されます。
必要に応じて、 async / await構文と一緒に使用することもできます。
React Router を使用している場合は、このチュートリアルでコード分割を使用する方法を確認してください。関連する GitHub リポジトリはここにあります。
React ドキュメントの「コード分割」セクションも確認してください。
このプロジェクト設定では、すべてのアセットのimportに Webpack を使用します。Webpack は、JavaScript ファイルが CSS ファイルに依存していることを表現するために、 JavaScript ファイルから CSS をインポートする必要があります。
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}これは React には必須ではありませんが、多くの人がこの機能を便利だと感じています。このアプローチの利点については、こちらをご覧ください。ただし、これにより、コードが Webpack よりも他のビルド ツールや環境に移植しにくくなることに注意してください。
開発中、この方法で依存関係を表現すると、運用環境では、すべての CSS ファイルがビルド出力の 1 つの縮小された.cssファイルに連結されます。
Webpack 固有のセマンティクスの使用に懸念がある場合は、すべての CSS をsrc/index.cssに直接配置することができます。CSS は引き続きsrc/index.jsからインポートされますが、後で src/index.js に移行する場合はいつでもそのインポートを削除できます。さまざまなビルドツール。
このプロジェクトのセットアップでは CSS が縮小され、Autoprefixer を通じて自動的にベンダー プレフィックスが追加されるため、心配する必要はありません。
たとえば、これは次のとおりです。
. App {
display : flex;
flex-direction : row;
align-items : center;
}これは次のようになります:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}何らかの理由で自動プレフィックスを無効にする必要がある場合は、このセクションに従ってください。
一般に、異なるコンポーネント間で同じ CSS クラスを再利用しないことをお勧めします。たとえば、 <AcceptButton>と<RejectButton>コンポーネントで.Button CSS クラスを使用する代わりに、独自の<Button>コンポーネントを作成することをお勧めします。 <AcceptButton>と<RejectButton>の両方がレンダリングできる (ただし継承はできない) .Buttonスタイル。
このルールに従うと、ミックスインやネストなどの機能がコンポーネントの合成に置き換えられるため、CSS プリプロセッサーの有用性が低下することがよくあります。ただし、このチュートリアルでは CSS プリプロセッサーを使用しますが、統合することもできます。 Less または別の代替手段を使用することもできます。
まず、Sass のコマンドライン インターフェイスをインストールしましょう。
npm install --save node-sass-chokidarあるいは、 yarn使用することもできます。
yarn add node-sass-chokidar次に、 package.jsonで次の行をscriptsに追加します。
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",注: 別のプリプロセッサを使用するには、プリプロセッサのドキュメントに従って
build-cssおよびwatch-cssコマンドを置き換えます。
ここで、 src/App.css名前をsrc/App.scssに変更し、 npm run watch-css実行すると、ウォッチャーはsrcサブディレクトリ内のすべての Sass ファイルを検索し、その隣に対応する CSS ファイルを作成します (この例ではsrc/App.css上書きします)。 src/App.css : src/App.js引き続きsrc/App.cssをインポートするため、スタイルはアプリケーションの一部として編集できるようになります。 src/App.scss 、およびsrc/App.cssが再生成されます。
Sass ファイル間で変数を共有するには、Sass インポートを使用できます。たとえば、 src/App.scssおよび他のコンポーネント スタイル ファイルに変数定義を含む@import "./shared.scss";を含めることができます。
相対パスを使用せずにファイルをインポートできるようにするには、 package.jsonのコマンドに--include-pathオプションを追加します。
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
これにより、次のようなインポートが可能になります
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node moduleこの時点で、ソース管理からすべての CSS ファイルを削除し、 src/**/*.css .gitignoreファイルに追加することをお勧めします。一般に、ビルド製品をソース管理の外に置いておくことをお勧めします。
最後のステップとして、 npm startを使用してwatch-css自動的に実行し、 npm run buildの一部としてbuild-css実行すると便利です。ただし、 &&演算子を使用して 2 つのスクリプトを連続して実行することはできません。 2 つのスクリプトを並行して実行するクロスプラットフォームの方法なので、そのためのパッケージをインストールします。
npm install --save npm-run-allあるいは、 yarn使用することもできます。
yarn add npm-run-all次に、 startスクリプトとbuildスクリプトを変更して、CSS プリプロセッサ コマンドを含めることができます。
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} npm startとnpm run build実行すると、Sass ファイルもビルドされます。
なぜnode-sass-chokidarのか?
node-sass次の問題があることが報告されています。
node-sass --watch仮想マシンまたは Docker で使用すると、特定の状況でパフォーマンスの問題が発生することが報告されています。
無限スタイルのコンパイル #1939
node-sassディレクトリ #1891 内の新しいファイルの検出に問題があることが報告されています。
ここでは、これらの問題に対処するため、 node-sass-chokidar使用します。
Webpack では、画像やフォントなどの静的アセットの使用が CSS と同様に機能します。
ファイルを JavaScript モジュールに直接importできます。これにより、CSS インポートとは異なり、ファイルをインポートすると、コード内で参照できる最終パスが得られます。画像のsrc属性または PDF へのリンクのhref 。
サーバーへのリクエストの数を減らすために、10,000 バイト未満の画像をインポートすると、パスの代わりにデータ URI が返されます。bmp、gif、jpg、jpeg、および SVG ファイルは除外されます。 #1153のせいです。
以下に例を示します。
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;これにより、プロジェクトのビルド時に Webpack がイメージをビルド フォルダーに正しく移動し、正しいパスが提供されるようになります。
これはCSSでも機能します:
. Logo {
background-image : url (. / logo.png);
} Webpack は、CSS 内のすべての相対モジュール参照 ( ./で始まる) を検索し、コンパイルされたバンドルの最終パスに置き換えます。タイプミスをしたり、重要なファイルを誤って削除したりすると、コンパイル エラーが表示されます。存在しない JavaScript モジュールをインポートします。コンパイルされたバンドルの最終的なファイル名は、Webpack によってコンテンツ ハッシュから生成されるため、運用環境では Webpack によって別の名前が付けられます。長期キャッシュ資産。
これも Webpack のカスタム機能であることに注意してください。
React には必須ではありませんが、多くの人が楽しんでいます (React Native は画像に同様のメカニズムを使用しています)。
静的アセットを処理する別の方法については、次のセクションで説明します。
publicフォルダーの使用注: この機能は、
[email protected]以降で利用できます。
publicフォルダーには HTML ファイルが含まれているため、ビルド プロセス中に、コンパイルされたコードを含む<script>タグが自動的に追加され、ページ タイトルを設定するなどの調整が可能です。
他のアセットをpublicフォルダーに追加することもできます。
通常は、代わりに JavaScript ファイルでアセットをimportことをお勧めします。たとえば、スタイルシートの追加と画像とフォントの追加に関するセクションを参照してください。このメカニズムには多くの利点があります。
ただし、モジュール システムの外部にアセットを追加するために使用できるエスケープ ハッチがあります。
ファイルをpublicフォルダーに置いた場合、そのファイルは Webpack によって処理されず、そのままビルド フォルダーにコピーされます。 publicフォルダー内のアセットを参照するには、 PUBLIC_URLという特別な変数を使用する必要があります。
index.html内では、次のように使用できます。
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > %PUBLIC_URL%プレフィックスによってアクセスできるのは、 publicフォルダー内のファイルのみです。 srcまたはnode_modulesのファイルを使用する必要がある場合は、そのファイルをそこにコピーして、このファイルをビルドの一部にする意図を明示的に指定する必要があります。
npm run build実行すると、Create React App は%PUBLIC_URL%正しい絶対パスに置き換えるため、クライアント側のルーティングを使用したり、ルート以外の URL でホストしたりしてもプロジェクトが機能します。
JavaScript コードでは、同様の目的でprocess.env.PUBLIC_URL使用できます。
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}このアプローチの欠点に留意してください。
publicフォルダー内のファイルは後処理または縮小されません。publicフォルダーを使用する場合通常は、スタイルシート、画像、フォントを JavaScript からインポートすることをお勧めします。 publicフォルダーは、一般的ではないいくつかのケースの回避策として役立ちます。
manifest.webmanifestなどの特定の名前を持つファイルが必要です。pace.jsのような小さなスクリプトを含めたいと考えています。<script>タグとして含める以外に選択肢がありません。グローバル変数を宣言する<script>を追加する場合は、その使用方法に関する次のセクションも読む必要があることに注意してください。
グローバル変数を定義するスクリプトを HTML ファイルに含めて、コード内でこれらの変数の 1 つを使用しようとすると、リンターは変数の定義を認識できないためエラーを出します。
これを回避するには、次のようにwindowオブジェクトからグローバル変数を明示的に読み取ります。
const $ = window . $ ;これにより、タイプミスによるものではなく、意図的にグローバル変数を使用していることが明らかになります。
あるいは、 // eslint-disable-line後ろに追加することで、リンターに任意の行を強制的に無視させることもできます。
React Bootstrap を React と一緒に使用する必要はありませんが、Bootstrap を React アプリと統合するための一般的なライブラリです。必要な場合は、次の手順に従って Create React App と統合できます。
React Bootstrap と npm からの Bootstrap をインストールします。React Bootstrap には Bootstrap CSS が含まれていないため、これもインストールする必要があります。
npm install --save react-bootstrap bootstrap@3あるいは、 yarn使用することもできます。
yarn add react-bootstrap bootstrap@3 Bootstrap CSS と、オプションで Bootstrap テーマ CSS をsrc/index.jsファイルの先頭にインポートします。
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. src/App.jsファイルまたはカスタム コンポーネント ファイル内の必要な React Bootstrap コンポーネントをインポートします。
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ;これで、render メソッドで定義されたコンポーネント階層内でインポートされた React Bootstrap コンポーネントを使用する準備が整いました。React Bootstrap を使用してやり直したApp.js例を次に示します。
場合によっては、Bootstrap (または同等のパッケージ) の視覚スタイルを微調整する必要があるかもしれません。
次のアプローチをお勧めします。
以下は、次の手順に従ってカスタマイズされたブートストラップを追加する例です。
Flow は、バグの少ないコードを作成するのに役立つ静的型チェッカーです。この概念を初めて使用する場合は、JavaScript での静的型の使用に関するこの概要を確認してください。
Flow の最新バージョンは、すぐに Create React App プロジェクトで動作します。
Create React App プロジェクトにフローを追加するには、次の手順に従います。
npm install --save flow-bin (またはyarn add flow-bin )を実行します。package.jsonのscriptsセクションに"flow": "flow"を追加します。npm run flow init (またはyarn flow init ) を実行して、ルート ディレクトリに.flowconfigファイルを作成します。// @flow入力チェックするファイル (たとえば、 src/App.js ) に追加します。 npm run flow (またはyarn flow ) を実行して、ファイルの型エラーをチェックできるようになりました。オプションで、統合エクスペリエンスを向上させるために Nuclide などの IDE を使用することもできます。将来的には、Create React App にさらに緊密に統合する予定です。
Flow について詳しくは、そのドキュメントを参照してください。
「Create React App」では特定のルーティング ソリューションは規定していませんが、React Router が最も人気があります。
追加するには、次を実行します。
npm install --save react-router-domあるいは、 yarn使用することもできます。
yarn add react-router-dom試してみるには、 src/App.js内のコードをすべて削除し、その Web サイトにあるサンプルのいずれかに置き換えてください。まず、「Basic Example」を参照してください。
アプリをデプロイする前に、クライアント側のルーティングをサポートするように運用サーバーを構成する必要がある場合があることに注意してください。
注: この機能は、
[email protected]以降で利用できます。
プロジェクトは、環境内で宣言された変数を、JS ファイル内でローカルに宣言されているかのように使用できます。デフォルトでは、 NODE_ENVが定義されており、 REACT_APP_で始まるその他の環境変数も使用できます。
環境変数はビルド時に埋め込まれます。Create React App は静的な HTML/CSS/JS バンドルを生成するため、実行時にそれらを読み取ることはできず、HTML をメモリにロードする必要があります。ここで説明したように、プレースホルダーをサーバーに追加し、実行時にプレースホルダーを置き換えることもできます。また、変更するたびにサーバー上でアプリを再構築することもできます。
注:
REACT_APP_で始まるカスタム環境変数を作成する必要があります。環境変数を変更すると、同じ名前を持つ可能性のある秘密キーが誤って公開されることを避けるために、NODE_ENV以外の他の変数は無視されます。それは実行中です。
これらの環境変数はprocess.envで定義されます。たとえば、 REACT_APP_SECRET_CODEという名前の環境変数は JS 内でprocess.env.REACT_APP_SECRET_CODEとして公開されます。
NODE_ENVという特別な組み込み環境変数もあります。 process.env.NODE_ENVから読み取ることができます。 npm start実行すると、常に'development'と等しくなります。 npm test実行すると、常に'test'と等しくなります。 'test'実行し、 npm run buildバンドルを作成する場合、それは常に'production'と等しくなります。これにより、開発者が低速な開発ビルドを誤ってデプロイすることを防ぐNODE_ENVができます。生産。
これらの環境変数は、プロジェクトがデプロイされている場所に基づいて条件付きで情報を表示したり、バージョン管理外にある機密データを使用したりする場合に役立ちます。
まず、環境変数を定義する必要があります。たとえば、 <form>内の環境で定義されたシークレットを使用したいとします。
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
}ビルド中に、 process.env.REACT_APP_SECRET_CODE REACT_APP_SECRET_CODE環境変数の現在の値に置き換えられます。NODE_ENV NODE_ENVが自動的に設定されることに注意してください。
ブラウザーにアプリをロードして<input>を調べると、その値がabcdefに設定されていることがわかります。また、太字のテキストはnpm start使用するときに提供される環境を示しています。
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div >上記のフォームは、環境からREACT_APP_SECRET_CODEという変数を探しています。この値を使用するには、シェルまたは.envファイルの 2 つの方法を使用してこれを行うことができます。これらの両方の方法については、次のいくつかのセクションで説明します。
NODE_ENVにアクセスできると、条件付きでアクションを実行する場合にも役立ちます。
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} npm run buildを使用してアプリをコンパイルすると、縮小ステップによってこの条件が取り除かれ、結果として得られるバンドルは小さくなります。
注: この機能は、
[email protected]以降で利用できます。
public/index.htmlのREACT_APP_で始まる環境変数にアクセスすることもできます。
< title > %REACT_APP_WEBSITE_NAME% </ title >上記のセクションの注意事項が適用されることに注意してください。
NODE_ENVおよびPUBLIC_URL ) を除いて、変数名が機能するにはREACT_APP_で始まる必要があります。環境変数の定義は OS によって異なる場合があります。また、この方法はシェル セッションの存続期間中は一時的なものであることを知っておくことも重要です。
set " REACT_APP_SECRET_CODE = abcdef " && npm start(注: 末尾の空白を避けるために、変数割り当てを引用符で囲む必要があります。)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envへの開発環境変数の追加注: この機能は、
[email protected]以降で利用できます。
永続的な環境変数を定義するには、プロジェクトのルートに.envというファイルを作成します。
REACT_APP_SECRET_CODE=abcdef
注:
REACT_APP_で始まるカスタム環境変数を作成する必要があります。環境変数を変更すると、同じ名前を持つ可能性のある秘密キーが誤って公開されることを避けるために、NODE_ENV以外の他の変数は無視されます。それは実行中です。
.envファイルはソース管理にチェックインする必要があります( .env*.localを除く)。
.envファイルを使用できますか?注: この機能は、
[email protected]以降で利用できます。
.env : デフォルト。.env.local : ローカル オーバーライド。このファイルはテストを除くすべての環境にロードされます。.env.development 、 .env.test 、 .env.production : 環境固有の設定。.env.development.local 、 .env.test.local 、 .env.production.local : 環境固有の設定のローカル オーバーライド。左側のファイルは右側のファイルよりも優先されます。
npm start : .env.development.local 、 .env.development 、 .env.local 、 .envnpm run build : .env.production.local 、 .env.production 、 .env.local 、 .envnpm test : .env.test.local 、 .env.test 、 .env ( .env.localが欠落していることに注意してください)これらの変数は、マシンが明示的に設定しない場合、デフォルトとして機能します。
詳細については、dotenv のドキュメントを参照してください。
注: 開発用に環境変数を定義している場合は、CI やホスティング プラットフォームでもこれらを定義する必要がある可能性があります。その方法については、Travis CI または Heroku のドキュメントを参照してください。
.envでの環境変数の展開注: この機能は、
[email protected]以降で利用できます。
.envファイル（DotenV-Expandを使用）で使用するために、マシン上に既に変数を展開します。
たとえば、環境変数npm_package_version取得するには：
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
または、現在の.envファイルにローカル変数を展開します。
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
多くの人気のあるライブラリは、ドキュメントでデコレーターを使用しています。
Reactアプリの作成現時点では、Decoratorの構文をサポートしていません。
ただし、多くの場合、デコレータを使用せずにデコレーターベースのコードを簡単に書き換えることができます。
参照については、これら2つのスレッドを参照してください。
Create Reactアプリは、仕様が安定したステージに進むと、デコレーターサポートが追加されます。
Reactは、データフェッチの特定のアプローチを処方しませんが、一般に、AxiosまたはBrowserのCreate APIのようなライブラリを使用して、 fetch() fetch() PolyFillが含まれています。ブラウザのサポートを心配しています。
グローバルなfetch機能により、Ajax Promiseを入力fetch 、 Response Objectの詳細を確認できます。
このプロジェクトには、約束/A+の完全な実装を提供するPromise fetch()も含まれていますasync / await
React WebサイトのFAQエントリのReactコンポーネントからのAjaxリクエストの作成について詳しく知ることができます。
これらのチュートリアルは、 fetch()使用してアクセスするために別のポートで実行されているAPIバックエンドとアプリを統合するのに役立ちます。
このチュートリアルをご覧ください。
このチュートリアルをご覧ください。
注：この機能は、
[email protected]以上で利用できます。
多くの場合、人々はバックエンドの実装と同じホストからフロントエンドのReactアプリとポートを提供します。
たとえば、アプリが展開された後、制作セットアップは次のようになる場合があります。
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
このようなセットアップは必要ありませんが、このようなセットアップがある場合は、開発中に別のホストやポートにリダイレクトすることを心配することなく、 fetch('/api/todos')のようなリクエストを書くのが便利です。
開発サーバーに、開発中のAPIサーバーへの不明なリクエストをプロキシに伝えるには、 package.jsonにproxyフィールドを追加します。たとえば
"proxy" : "http://localhost:4000" ,このように、開発中にfetch('/api/todos')と、開発サーバーは静的資産ではないことを認識し、 http://localhost:4000/api/todosへのリクエストをフォールバックとしてプロキシにします。開発サーバーは、 text/htmlがプロキシにヘッダーをAcceptことなくリクエストを送信しようとします。
便利なことに、これにより、CORSの問題や開発中のこのようなエラーメッセージが回避されます。
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
proxy開発にのみ効果があり（ npm start ）、 /api/todosのようなURLが/apiプレフィックスを使用する必要がないことを確認するのはあなた次第ですtext/html proxy
proxyオプションは、HTTP、HTTPS、およびWebSocket接続をサポートしています。
proxyオプションが十分に柔軟性がない場合は、次のことができます。
proxyオプションを有効にすると、バックエンドを開いたままにしておくと、この問題とこの問題でコンピューターが脆弱になるため、これは必要です。
これはlocalhostで開発するときに影響を与えるものではありませんが、ここに記載されているようにリモートで開発すると、 proxyオプションを有効にした後、ブラウザにこのエラーが表示されます。
無効なホストヘッダー
それを回避するために、プロジェクトのルートで.env.developmentというファイルでパブリック開発ホストを指定できます。
HOST=mypublicdevhost.com
今すぐ開発サーバーを再起動し、指定されたホストからアプリをロードすると、動作するはずです。
まだ問題がある場合、またはクラウドエディターのようなエキゾチックな環境を使用している場合は、 .env.development.localにラインを追加して、ホストチェックを完全にバイパスできます。悪意のあるWebサイトからのリモートコード実行：
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
このアプローチはお勧めしません。
注：この機能は、
[email protected]以上で利用できます。
proxyオプションが十分に柔軟でない場合は、次の形式（ package.json ）でオブジェクトを指定できます。
また、構成値http-proxy-middlewareまたはhttp-proxyサポートを指定することもできます。
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
}このパスに一致するすべてのリクエストは、プロキシであり、これにはtext/html proxyリクエストが含まれます。
複数のプロキシを指定する必要がある場合は、追加のエントリを指定することで、複数のパスを一致させることができます。
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}Websocketプロキシをセットアップするとき、注意すべきいくつかの特別な考慮事項があります。
Socket.ioのようなWebSocket Engineを使用している場合、socket.ioは標準のWebsocketサーバーで動作しないようにしています.ioはwebsocket.orgエコーテストで動作します。
socket.ioサーバーのセットアップに利用できる優れたドキュメントがいくつかあります。
標準のWebSocketsは、標準のWebsocketサーバーとWebsocket.orgエコーテストで動作します。
いずれにせよ、 package.jsonで手動でWebSocketリクエストをプロキシできます：
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} 注：この機能は、
[email protected]以上で利用できます。
DEVサーバーは、HTTPSを介してページを提供する必要があります。
これを行うには、 HTTPS環境変数をtrueに設定し、 npm startて通常どおり開発サーバーを起動します。
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)（注：空白の欠如は意図的です。）
HTTPS=true npm startサーバーはセルフ署名証明書を使用するため、Webブラウザーはページにアクセスすると警告をほぼ間違いなく表示することに注意してください。
<meta>タグを生成しますCreate React Appはサーバーのレンダリングをサポートしていないため、 <meta>タグを動的にして、これを解決するために、このようなHTMLにプレースホルダーを追加することをお勧めします。
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " >次に、使用するバックエンドに関係なく、 index.htmlメモリに読み取り、 __OG_DESCRIPTION__ __OG_TITLE__ 、および他のプレースホルダーを現在のURLに応じて値で置き換えることができますhtmlに埋め込まれても安全であるように値！
ノードサーバーを使用すると、クライアントとサーバーの間でルートマッチングロジックを共有することもできます。
静的なホスティングプロバイダーでbuildをホストする場合は、React-SnapshotまたはReact-Snapを使用して、各ルートのHTMLページ、またはこれらのページでシームレスにアクティブになります。 、JavaScriptバンドルがロードされたとき。
また、これを静的ホスティング以外で使用し、ルートを生成してキャッシュするときにサーバーから圧力をかける機会もあります。
プリレンダリングの主な利点は、HTMLペイロードを使用して各ページのコアコンテンツを取得することです。JavaScriptバンドルは、アプリケーションの各ルートが検索でピックアップされる可能性を正常に増やすかどうかです。エンジン。
ゼロコンフィ分の事前レンダリング（スナップショットとも呼ばれます）の詳細については、こちらをご覧ください。
前のセクションと同様に、グローバル変数を注入するHTMLにプレースホルダーを残すことができます。
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script >次に、サーバーでは、クライアントコードを送信する前に、 __SERVER_DATA__ window.SERVER_DATAのデータのJSONに置き換えます。アプリはXSS攻撃に対して脆弱です。
注：この機能は、
[email protected]以上で利用できます。
移行ガイドを読んで、古いプロジェクトで有効にする方法を学びましょう！
Create React AppはJestをテストランナーとして使用します。この統合を準備するために、Jestの大きな刷新を行いました。
Jestは、ノードベースのランナーです。これは、常にノード環境で実行されることを意味します。
JSDOMのおかげでwindowなどのブラウザのグローバルは、実際のブラウザの動作の近似のみです。
ブラウザのエンドツーエンドテストには、Create Reactアプリの範囲を超えている場合は、個別のツールを使用することをお勧めします。
Jestは、次の人気のある命名規則のいずれかを含むテストファイルを探します。
__tests__フォルダーに.js接尾辞を備えたファイル。.test.js接尾辞を備えたファイル。.spec.js接尾辞を備えたファイル。 .test.js / .spec.jsファイル（または__tests__フォルダー）は、 srcトップレベルフォルダーの下の任意の深さに配置できます。
App.jsファイル（または__tests__フォルダーApp.test.jsをテストしているコードの横に配置することをお勧めします。長い相対パスの代わりにimport App from './App' 。
npm test実行するとnpm start JestはWatchモードで発売されます。
ウォッチャーには、すべてのテストを実行する機能を備えたインタラクティブなコマンドラインインターフェースが含まれています「時計の使用」は、走るたびにウォッチャーが印刷することに注意してください。
デフォルトでは、 npm test実行すると、Jestは最後のコミット以降に変更されたファイルに関連して実行されます。 Tは、テストに合格しないコードを多くすることがよくあります。
Jestは、最後のコミット以降に変更されたファイルに関連aテストのみを実行したことを常に明示的に述べます。
JESTは、常に継続的な統合サーバーですべてのテストを実行します。または、プロジェクトがGitまたはMercurialリポジトリ内にない場合。
テストを作成するには、テストの名前とそのコードの名前を付けてit()またはtest() describe()ブロックを追加します。
JESTは、基本的なテストを行うためのビルトインexpect()を提供します。
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; JESTでサポートされているすべてのexpect()マッチャーは、ここで広範囲に文書化されています。
jest.fn()使用してexpect(fn).toBeCalled() 「スパイ」または模擬関数を作成することもできます。
コンポーネントのテスト手法は、「煙検査」から、出力の一部を投げかけてテストすること、完全なレンダリングとテストコンポーネントのライフサイクルと状態の変更に至るまで、幅広いコンポーネントテスト手法があります。
さまざまなプロジェクトは、コンポーネントがどのくらいの頻度で変化するか、およびテスト戦略をまだ決定していない場合、コンポーネントの簡単な煙検査を作成することをお勧めします。
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ;このテストはコンポーネントをマウントしsrc/App.test.jsこのようなテスト中にスローしなかったことを確認します。 src/App.test.js 。
コンポーネントの変更によって引き起こされるバグに遭遇すると、それらの部分がアプリケーションでテストする価値があることについて、より深い洞察を得ることができます。
レンダリングする子コンポーネントからコンポーネントを単独でテストしたい場合は、 shallow()使用することをお勧めします。
npm install --save enzyme enzyme-adapter-react-16 react-test-rendererまたは、 yarnを使用することもできます。
yarn add enzyme enzyme-adapter-react-16 react-test-renderer酵素3の時点では、酵素を使用しているアダプターに対応するアダプターとともにインストールする必要があります（上記の例は、React 16にアダプターを使用します。
また、アダプターはグローバルセットアップファイルで構成する必要があります。
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;注：
src/setupTests.js作成する前に「排出」することにした場合、package.jsonファイルは排出後に追加する方法を学ぶためにここに参照しないことに留意してください。
これで、煙検査を書くことができます。
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; Reactdom.render <App> ReactDOM.render()を<Button>した以前の煙テストとは異なり、このテストは<App>をレンダリングします孤立した単体テストには最適ですが、コンポーネントがmount()で完全なレンダリングをサポートするために、いくつかの完全なレンダリングテストを作成することもできます。
より多くexpect()テスト手法については、酵素jest.fn()ドキュメントを読むことができます。
以下は、特定の出力を主張する酵素文書の例を示します。
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ;すべてのJestマッチャーは、ここで広範囲に文書化されています。
それにもかかわらず、以下に説明するように、必要に応じてチャイのようなサードパーティのアサーションライブラリを使用できます。
さらに、上記のマッチャーを含むテストを簡素化するのに役立つJest-Enzyme contains 、Jest-Enzymeでより簡単に記述できます。
expect ( wrapper ) . toContainReact ( welcome )これを有効にするには、 jest-enzymeをインストールします。
npm install --save jest-enzymeまたは、 yarnを使用することもできます。
yarn add jest-enzyme src/setupTests.jsでインポートして、すべてのテストでマッチャーを使用できるようにします。
import 'jest-enzyme' ;expect() for jest.fn()を使用することをお勧めします。 、たとえば、JSXとしてのかなり印刷反応要素。
ただし、ChaiやSinonなどの他のライブラリに慣れている場合、またはポートしたい既存のコードを使用している場合は、次のように通常インポートできます。
import sinon from 'sinon' ;
import { expect } from 'chai' ;そして、あなたが通常するようにあなたのテストでそれらを使用します。
注：この機能は、
[email protected]以上で利用できます。
アプリがテストでモックする必要があるブラウザAPIを使用している場合、またはテストを実行する前にグローバルsrc/setupTests.jsセットアップが必要な場合は、テストを実行する前に自動的に実行されます。
例えば：
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMock注：
src/setupTests.js作成する前に「排出」することにした場合、結果のpackage.jsonファイルはそれを参照しないため、Jestの構成でプロパティsetupTestFrameworkScriptFile手動で作成する必要があることに注意してください。次のようなもの：
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
it() xit()に置き換えて、実行中からテストを一時的に除外できます。
同様に、 fit()使用すると、他のテストを実行せずに特定のテストに集中できます。
Jestには、ES6でうまく機能する統合されたカバレッジレポーターがあり、構成は必要ありません。
npm test -- --coverage （中央に注意--するために、このようなカバレッジレポートを含める：
テストはカバレッジではるかに遅く実行されるため、通常のワークフローとは別に実行することをお勧めします。
デフォルトのJestカバレッジ構成は、Package.jsonのJest構成に次のサポートされているキーを追加することにより、オーバーライデンにすることができます。
サポートされているオーバーライド：
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializers例package.json：
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
}デフォルトでは、 npm test WatcherをインタラクティブCLIでCIします。
npm run build使用してアプリケーションのビルドCI作成するとnpm testと同様に、ビルドを強制的に実行することができます。
人気のあるCIサーバーは、既に環境変数CIデフォルトで設定していますが、これを自分で行うこともできます。
.travis.ymlファイルをgitリポジトリに追加します。 language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
この記事に従って、Create React AppプロジェクトでCircleciをセットアップします。
set CI = true && npm test set CI = true && npm run build（注：空白の欠如は意図的です。）
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildテストコマンドは、ウォッチャーを起動する代わりに、Jestにテストを1回実行するように強制されます。
開発中にこれを頻繁に行っている場合は、Watcherを最高の体験にし、より多くのワークフローに対応するために機能する方法を変えることにオープンにしたいので、ユースケースについてお知らせしてください。
ビルドコマンドは、リナー警告をチェックし、見つかった場合に失敗します。
デフォルトでは、生成されたプロジェクトのpackage.jsonは次のようになります。
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom"テストがJSDOMに依存しないことがわかっている場合、安全に削除できます--env=jsdom 、およびテストはより速く実行されます。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"あなたがあなたの決心をするのを助けるために、ここにJSDOMが必要なAPIのリストがあります：
windowやdocumentなどのブラウザグローバルReactDOM.render()TestUtils.renderIntoDocument() （上記のショートカット）mount()対照的に、次のAPIではJSDOMは必要ありません。
TestUtils.createRenderer() （浅いレンダリング）shallow()最後に、JSDOMはスナップショットテストにも必要ありません。
スナップショットテストは、コンポーネントのテキストスナップショットを自動的に生成し、ディスクに保存するJestの機能であるため、UI出力が変更された場合、コンポーネントの出力に関するアサーションを手動で書くことなく通知されます。
Visual Studioコードを使用すると、Create Reactアプリで動作するJEST拡張機能があります。 、ウォッチャーを自動的に開始および停止し、ワンクリックスナップショットの更新を提供します。
JESTテスト用のデバッガーをセットアップする方法はさまざまです。
注：デバッグテストには、ノード8以降が必要です。
プロジェクトのpackage.jsonのscriptsセクションに以下を追加します
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} debugger;配置してください。
$ npm run test:debugこれにより、JESTテストの実行が開始されますが、デバッガーがプロセスに添付できるように実行する前に一時停止します。
Chromeで以下を開きます
about:inspect
そのリンクを開いた後、Chrome Developer Toolsが[ inspect ]を選択します。これは、Reactスクリプトの最初の行に設定されます（これは単に開発者ツールを開き、JESTを防ぐために行われます。それを行う前に実行することから）。現在の範囲を調べて呼び出すことができますスタック。
注：-runinband CLIオプションにより、JESTは個々のテストのプロセスを産卵するのではなく、同じプロセスでテストを実行することを確認しますが、同時に多くのプロセスをデバッグすることは困難です。
Jestテストのデバッグは、Visual Studioコードのために箱から出してサポートされています。
次のlaunch.json構成ファイルを使用してください。
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
通常、アプリには多くのUIコンポーネントがあり、それぞれが多くの異なる状態を持っています。
通常、サンプルアプリやいくつかの例を実行することなく、これらの状態を見るのは困難です。
Create Reactアプリはデフォルトでこれのツールを含めませんが、React（ソース）またはReact StyleGuidist（ソース）のストーリーブックを簡単に追加できます。アプリから単独で述べています。
この方法でストーリーブックまたはスタイルガイドを展開することもできます。チームの全員が、バックエンドサーバーを起動したり、アプリでアカウントを作成したりせずに、UIコンポーネントのさまざまな状態を表示できます。
ストーリーブックは、React UIコンポーネントの開発環境です。コンポーネントライブラリを閲覧し、各コンポーネントのさまざまな状態を表示し、コンポーネントをインタラクティブに開発およびテストすることができます。
まず、次のNPMパッケージをグローバルにインストールします。
npm install -g @storybook/cli次に、アプリのディレクトリ内で次のコマンドを実行します。
getstorybookその後、画面の指示に従ってください。
React Storybookの詳細をご覧ください：
StyleGuidistは、すべてのコンポーネントが単一のページで提示されたドキュメントと使用の例を組み合わせており、StoryGuidistの例を作成します。ライブ編集可能な遊び場としてレンダリングされます。
まず、StyleGuidistをインストールしてください：
npm install --save react-styleguidistまたは、 yarnを使用することもできます。
yarn add react-styleguidist次に、これらのスクリプトをpackage.jsonに追加します：
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",次に、アプリのディレクトリ内で次のコマンドを実行します。
npm run styleguideその後、画面の指示に従ってください。
React StyleGuidistの詳細については、
Create Reactアプリは、コンポーネントをNPMに公開するための組み込み機能を提供しません。そして、NWBのようなツールを使用して公開のために準備します。
デフォルトでは、プロダクションビルドは、完全に機能的でオフラインファーストプログレッシブWebアプリです。
プログレッシブWebアプリは、従来のWebページよりも高速で信頼性が高く、魅力的なモバイルエクスペリエンスを提供します。
sw-precache-webpack-plugin 、生産構成に統合されており、すべての地元の資産を自動的に処理し、サービスワーカーが最新の状態に保つサービスワーカーファイルを生成します最初のHTMLを含むローカルアセットのすべての要求を処理するためのキャッシュファースト戦略は、遅いまたは信頼できないネットワークであっても、Webアプリが確実に高速であることを保証します。
最初の生産展開の前にサービスワーカーを有効にしたくない場合は、 src/index.jsからregisterServiceWorker()への呼び出しを削除します。
以前に本番展開でサービスワーカーを有効にしていた場合、既存のすべてのユーザーに対してそれらを無効にすることを決定した場合、サービスワーカーのインポートを変更することにより、最初にsrc/index.jsのregisterServiceWorker()に通話を交換できます:
import { unregister } from './registerServiceWorker' ;代わりにunregister() /service-worker.js unregister()電話してください。無効になるキャッシュ。
サービスワーカーにはHTTPが必要ですが、ローカルテストを容易にするために、そのポリシーはlocalhostに適用されません。
サービスワーカーは現在、すべてのWebブラウザでサポートされていません。
サービスワーカーは、生産環境でのみ有効になっています。たとえば、 npm run buildの出力は、以前のキャッシュされた資産が使用されている場合にフラストレーションをもたらす可能性があるため、開発環境でオフラインファーストサービスワーカーを有効にしないことをお勧めします。ローカルで行った最新の変更を含めないでください。
オフラインファーストサービスワーカーをローカルにテストする必要がある場合は、 npm run buildディレクトリを実行した後、アプリケーションcreate-react-appて簡単なHTTPサーバーを実行します。生産をローカルにテストするには、展開手順には、他の方法を使用するための指示があります。
可能であれば、生成されたservice-worker.js環境を構成して、HTTPキャッシングが不可能な場合は、たとえば、デフォルトの10分間のHTTPキャッシュライフタイムを変更することはできません。生産サイトにアクセスしてから、 service-worker.js HTTPキャッシュから満了する前に再び再訪すると、サービスワーカーから以前にキャッシュされた資産を取得し続けます。展開、 Shift-Refreshを実行すると、サービスワーカーが一時的に無効になり、ネットワークからすべての資産を取得します。
ユーザーは常にオフラインファーストWebアプリに精通しているわけではありません。サービスワーカーは、次回ページをロードするときに利用可能になる最新の更新を取得しました（「新しいコンテンツが利用可能です。更新してください」と表示されますが、現在はデベロッパーに去ります。出発点、あなたはそれを利用することができますsrc/registerServiceWorker.jsに含まれるロジック。これは、各シナリオを検出するために耳を傾けるサービスワーカーのライフサイクルイベントと、デフォルトとして、JavaScriptコンソールに適切なメッセージを記録するだけです。
デフォルトでは、生成されたサービスワーカーファイルは、HTTP APIリクエスト、画像、または異なるドメインにロードされた埋め込みなど、クロスオリジントラフィックをインターセプトまたはキャッシュしません。 ejectのSWPrecacheWebpackPluginセクションでruntimeCaching webpack.config.prod.jsを構成します。
デフォルトの構成には、 public/manifest.jsonにあるWebアプリマニフェストが含まれており、Webアプリケーションに固有の詳細を使用してカスタマイズできます。
ユーザーがAndroidでChromeまたはFirefoxを使用してホーム画面にWebアプリを追加すると、 manifest.jsonは、Webアプリのマニフェストガイドがより多くのコンテキストを提供するときに使用するアイコン、名前、ブランドの色を決定します各フィールドの意味、およびカスタマイズがユーザーのエクスペリエンスにどのように影響するか。
ソースマップエクスプローラーJavaScriptは、ソースマップを使用してバンドルを使用します。
Source Map ExplorerをCreate Reactアプリプロジェクトに追加するには、次の手順に従ってください。
npm install --save source-map-explorerまたは、 yarnを使用することもできます。
yarn add source-map-explorer次に、 package.jsonで、次の行をscriptsに追加します。
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",次に、バンドルを分析するには、生産ビルドを実行し、分析スクリプトを実行します。
npm run build
npm run analyze
npm run buildお気に入りのhttpサーバーをセットアップして、 index.html提供し、 /static/js/main.<hash>.js build /static/js/main.<hash>.jsは、 /static/js/main.<hash>.js .<hash>.jsファイルの内容が付いています。
ノードを使用する環境の場合、これを処理する最も簡単な方法は、サーブをインストールして残りを処理させることです。
npm install -g serve
serve -s build上記の最後のコマンドは、ポート5000の静的サイトを提供します。SERVEの多くの内部設定と同様に、 -pまたは--portフラグを使用してポートを調整できます。
このコマンドを実行して、利用可能なオプションの完全なリストを取得します。
serve -h既存のダイナミックなものに統合されたように機能するように、Create Reactアプリプロジェクトを実行するために、必ずしも静的サーバーが必要です。
これがノードとエクスプレスを使用したプログラムの例です。
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;サーバーソフトウェアの選択も重要ではありません。Reactアプリは完全にプラットフォームに依存しているため、ノードを明示的に使用する必要はありません。
静的資産を備えたbuildフォルダーは、Create Reactアプリによって生成される唯一の出力です。
ただし、クライアント側のルーティングを使用する場合は/todos/42これは十分ではありません。
HTML5 pushState History APIをフードの下に使用するルーター（たとえば、 browserHistoryを使用してルーター）を使用すると、多くの静的ファイルサーバーが/todos/42します。サーバーはlocalhost:3000/todos/42に適切に応答しますが、上記のように生産ビルドを提供するExpressはそうではありません。
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
例えば：
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ). Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| 変数 | 発達 | 生産 | 使用法 |
|---|---|---|---|
| ブラウザ | ✅ | By Default, Create React App will open the default system <System Browser, Favoring Chrome on Macos. Specify a <<Browser to Override This Behavior, or Set it to none to disab. Le it Completely. If you need to customize the way the browser is launchd, you can Specify A Node Script Instead. Any Arguments Passed to npm start Will Also be passed to this script, and the url where your app is server be the last ARG ument. Your Script's File name must have the .js extension 。 | |
| ホスト | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| ポート | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| CI | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clicking trace. When you click on it, Create React App will to derymine the edi. TOR You are using Based on CurrenTly Running Processses, and Open The Relevant Source File. You . You. Can Send A PULL Request to Detect Your Editor of Choice. Setting this environment variable overrides the automatic detection. If you do it, make six systems PATH Environment Variable Points to your Editor's Bin Folder. You can also set it to none it完全に。 | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
例えば：
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build縮小に失敗するSome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
