新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、選択、実行、起動という3つのノードを主に記録します。 プロジェクトの選択React のスキャフォールディングの初期化では、コミュニティでより人気があるのは cra (create-react-app) と umi です。以下の点を比較した後、最終的にプロジェクトにより適した umi を選択しました。
最終的に、プロジェクトを迅速に構築する必要があり、多くの成熟したプラグインのサポートが必要であることを考慮して、umi が採用されました。 antdはとても良いです! ! ! @umijs/plugin-model、このプラグインをお勧めします。内部のプラクティスを理解すれば、基本的にデータ管理をマスターできます。 ランタイムUmi は、ランタイムの機能を拡張できるランタイム構成ファイルである app.ts を提供します。簡単に言えば、ページをレンダリングするためのすべての事前操作をここに配置できます。この概念は次のように分類できる。 storybook (preview.js) と比較すると、自分で実装したい場合は、対応する HTML にスクリプトを挿入することができます。ここにはプロジェクト関連のコンテンツがいくつか含まれます。プロジェクトは既存のプロジェクトに埋め込む必要があるため、iframe アプローチを採用します。必然的に、コミュニケーションと iframe サイズの調整が必要になります。 iframe 通信の場合、ドメインが異なるため、window.postmessage が使用されます。データの可読性を維持するために、後のメンテナンスの難易度が増すことを避けるために、対応するイベント送信コンテンツを定義することをお勧めします。頻繁な通信が必要な場合は、マイクロフロントエンドソリューションを採用することをお勧めします。 iframe の適応については、iframe-resizer プラグインが解決に役立ちます。埋め込みと埋め込みの両方をインストールする必要があることに注意してください。そうしないと、通信と適応ができなくなります。ここで問題があります。ページが埋め込まれている場合、bodyノードを内部から展開することはできないため、iframe-resizerが提供するカスタム計算方法を使用して、子ページに該当する方法を提供する必要があります。コードは次のとおりです。 サブシステム 'iframe-resizer/js/iframeResizer.contentWindow.js' をインポートします。 // 埋め込まれている場合は、実行時にリスナーを開きます const iframeInit = () => { if (親 !== ウィンドウ) { (ウィンドウは任意)iFrameResizer = { 高さ計算方法: () => { document.body.children[0].clientHeightを返します。 }, }; window.onmessage = (イベント: 任意) => { Array.isArray(event.data) の場合 { if (event.data[0] === 'イベント名') { console.log(event.data[1]) // イベントパラメータ} } }; parent.postMessage({ msg: 'MessageFromIframePage' }, '*'); } }; iframeInit(); ライブ配信梱包作業を経て、ようやく発売されます。ここでは主に、リクエストを転送するように nginx を構成する方法について説明します。 開発中に、複数の異なるドメインへのインターフェースが必要な場合、フロントエンドの最初の反応はプロキシを構成することです。オンラインになったとき、少し混乱しました。 プロキシ: { '/api': { ターゲット: 'http://aaa.com', 変更元: true、 パス書き換え: { '^/api': '' }, }, '/b-api': { ターゲット: 'http://bbb.com/', 変更元: true、 パス書き換え: { '^/b-api': '' }, }, }, nginxの設定は次のとおりです サーバー{ 聞く 80; server_name アクセス アドレス; $rooturi を "xxxx/dist" に設定します。 場所 ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ { 有効期限は365日です。 ルート $rooturi; } 場所 ^~/api/ { ^/api/(.*)$ /$1 を書き換えて、break; proxy_pass http://aaa.com; } 場所 ^~/b-api/ { ^/b-api/(.*)$ /$1 を書き換えて、break; proxy_pass http://bbb.com; } 位置 / { ルート $rooturi; try_files $uri $uri/ /index.html =404; add_header Cache-Control "no-cache"; アクセス制御許可オリジン * のヘッダーを追加します。 } } これで、React プロジェクトの作成からデプロイまでの実装例に関するこの記事は終了です。React プロジェクトの作成からデプロイまでのより関連性の高い記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法
>>: MySQL データベースの Binlog 使用法の概要 (必読)
Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...
Nginx は、わずか数年で Web サーバー市場の大部分を占めるようになりました。周知のとおり、N...
データベース内のトランザクションとロックを表示するための一般的なステートメントトランザクションの待機...
私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...
以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...
目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...
*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...
この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...
以前、https://www.jb51.net/article/205922.htm で、Docke...
1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...
まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...
この記事の例では、カスタムスクロールバーコンポーネントを実装するためのjsの具体的なコードを参考まで...
序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...
目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...
目次序文関連資料成果を達成する実装手順序文Openlayer には独自の拡張プラグイン ol-ext...