MagentoPWAStudio拡張機能を作成する方法
公開: 2021-01-06目次
通常、 pwa-studioプロジェクトに直接変更を加えたいと思うでしょうが、拡張機能を構築したい場合、このアプローチは理想からはほど遠いものです。 拡張機能の場合、それらを簡単に無効にできるようにするか、複数の拡張機能をプロジェクトに簡単にインポートできるようにする必要があります。
これを行うには、作成したプロジェクト内にパッケージを作成し、 JSONファイルからインポートして戻します。 幸い、このプロセスは、MagentoのメンテナであるLars Roettigによってリリースされたnpmパッケージの助けを借りて簡素化されました：https：//www.npmjs.com/package/@larsroettig/create-pwa-extension
このチュートリアルでは、このパッケージを使用してPWAStudio拡張機能を作成してみます。
1. MagentoPWAStudioをインストールします
まず、PWAStudioプロジェクトをインストールする必要があります。 こちらのガイドに従えば、これはかなり簡単です：Magento 2PWAStudioのセットアップ方法
*注：質問のステップで、この質問「プロジェクトの作成後にyarnを使用してパッケージの依存関係をインストールする」では、セットアップチュートリアルのように、[はい]ではなく[いいえ]を選択する必要があります。
2.新しいルートを作成します
プロジェクトディレクトリにcdします。
次のコマンドを実行します。
糸は@larsroettig/pwa-extensionを作成します
拡張機能に関する詳細情報を求められます。
繰り返しになりますが、「プロジェクトの作成後に、yarnを使用してパッケージの依存関係をインストールする」という質問で「いいえ」を選択することを忘れないでください。
作成したディレクトリを開きます。
これで、 intercept.jsファイルが作成され、 overridemappingすでに含まれていることがわかります。
それでは、 testextension/src/intercept.jsに新しいルートを作成してみましょう。
/ **
*拡張子のカスタムインターセプトファイル
*デフォルトでは、@ magento/pwa-buildpackのターゲットのみを使用できます。
*
* @ magento/peregrineまたは@magento/venia-uiを拡張したい場合
*それらをpackage.jsonのpeerDependenciesに追加する必要があります
*
* @ magento / venia-uiコンポーネントの上書きを追加する場合は、次を使用できます
*moduleOverrideWebpackPluginおよびcomponentOverrideMapping
** /
module.exports=ターゲット=>{
target.of（'@ magento / pwa-buildpack'）。specialFeatures.tap（flags => {
/ **
*ビルドパックが拡張機能をロードできるようにするには、esModulesとcssModulesをアクティブ化する必要があります
*{@linkhttps://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}。
* /
flags [targets.name] = {esModules：true、cssModules：true};
}）;
target.of（'@ magento / venia-ui'）。routes.tap（
ルート配列=>{
routersArray.push（{
名前：'SimiCartページ'、
パターン：'/ simicart'、
パス：'@ simicart / testextension / src / components / page1'
}）;
戻り値routesArray;
}）;
}; testextension/src/components/page1/index.jsに新しいルートのコンポーネントを作成します。
'react'からReactをインポートします。
'@ magento / venia-ui / lib/classify'から{mergeClasses}をインポートします。
import {shape、string} from'prop-types';
'./index.css'からdefaultClassesをインポートします。
constPage1=小道具=>{
const classes = mergeClasses（defaultClasses、props.classes）;
return（<div className = {classes.root}> Simicart </ div>）;
}
Page1.propTypes = {
クラス：shape（{root：string}）
};
Page1.defaultProps = {};
デフォルトのPage1をエクスポートします。package.jsonを変更してパッケージをインポートします。
「依存関係」：{
"@ magento / pwa-buildpack"： "〜7.0.0"、
"@ simicart / testextension"： "リンク：./@ simicart / testextension"
}、その後、インストールして監視し、新しいルートが機能しているかどうかを確認します。
ヤーンインストール ヤーンウォッチ
3.コンポーネントのオーバーライド
前のパートに続いて、このパートでは、プロジェクトの既存のビューをオーバーライドする方法について説明します。
前のステップで作成したプロジェクトから、 testextension/src/componentOverrideMapping.jsにオーバーライドを追加します。
/ **
*上書きのマッピング
*例：[`@magento/venia-ui/lib/components/Main/main.js`]：'./lib/components/Main/main.js'
* /
module.exports = componentOverride = {
[`@magento/venia-ui/lib/components/Header/header.js`]：'@ simicart / testextension / src / override / header.js'
}; 次に、このオーバーライドコードをtestextension/src/intercept.jsにrequireします。
/ **
*拡張子のカスタムインターセプトファイル
*デフォルトでは、@ magento/pwa-buildpackのターゲットのみを使用できます。
*
* @ magento/peregrineまたは@magento/venia-uiを拡張したい場合
*それらをpackage.jsonのpeerDependenciesに追加する必要があります
*
* @ magento / venia-uiコンポーネントの上書きを追加する場合は、次を使用できます
*moduleOverrideWebpackPluginおよびcomponentOverrideMapping
* /
const moduleOverrideWebpackPlugin = require（'./ moduleOverrideWebpackPlugin'）;
const componentOverrideMapping = require（'./ componentOverrideMapping'）
module.exports=ターゲット=>{
target.of（'@ magento / pwa-buildpack'）。specialFeatures.tap（flags => {
/ **
*ビルドパックが拡張機能をロードできるようにするには、esModulesとcssModulesをアクティブ化する必要があります
*{@linkhttps://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}。
* /
flags [targets.name] = {esModules：true、cssModules：true};
}）;
console.log（targets.of（'@ magento / pwa-buildpack'））;
target.of（'@ magento / venia-ui'）。routes.tap（
ルート配列=>{
routersArray.push（{
名前：'SimiCartPage'、
パターン：'/ simicart'、
パス：'@ simicart / testextension / src / components / page1'
}）;
戻り値routesArray;
}）;
target.of（'@ magento / pwa-buildpack'）。webpackCompiler.tap（compiler => {
new moduleOverrideWebpackPlugin（componentOverrideMapping）.apply（compiler）;
}）
};次に、 venia-uiフォルダーから、ヘッダーコンポーネントをオーバーライドする新しいコンポーネントにコピーします。 次に、コピーしたヘッダーにもう1つのビューを追加します。
'./simicartIcon'からSimiCartIconをインポートします。 。 。 。 <SimiCartIcon />
testextension/src/override/header.jsの完全なコード：
import React、{Suspense} from'react';
import {shape、string} from'prop-types';
'@ magento / venia-ui / lib / components/Logo'からロゴをインポートします。
'@ magento / peregrine / lib / util/makeUrl'からresourceUrlをインポートします。
import {Link、Route} from'react-router-dom';
'@ magento / venia-ui / lib / components / Header/accountTrigger'からAccountTriggerをインポートします。
CartTriggerを「@magento/ venia-ui / lib / components / Header/cartTrigger」からインポートします。
'@ magento / venia-ui / lib / components / Header/navTrigger'からNavTriggerをインポートします。
SearchTriggerを「@magento/ venia-ui / lib / components / Header/searchTrigger」からインポートします。
'@ magento / venia-ui / lib / components / Header/onlineIndicator'からOnlineIndicatorをインポートします。
import {useHeader} from'@ magento / peregrine / lib / talons / Header / useHeader';
import {mergeClasses} from'@ magento / venia-ui / lib / classify';
'@ magento / venia-ui / lib / components / Header/header.css'からdefaultClassesをインポートします。
'@ magento / venia-ui / lib / components/PageLoadingIndicator'からPageLoadingIndicatorをインポートします。
'./simicartIcon'からSimiCartIconをインポートします。
const SearchBar = React.lazy（（）=> import（'@ magento / venia-ui / lib / components / SearchBar'））;
constヘッダー=小道具=>{
const {
handleSearchTriggerClick、
hasBeenOffline、
オンラインです、
searchOpen、
isPageLoading
} = useHeader（）;
const classes = mergeClasses（defaultClasses、props.classes）;
const rootClass = searchOpen？ classes.open：classes.closed;
const searchBarFallback =（
<div className = {classes.searchFallback}>
<div className = {classes.input}>
<div className = {classes.loader} />
</ div>
</ div>
）;
const searchBar = searchOpen？ （（
<サスペンスフォールバック={searchBarFallback}>
<ルート>
<SearchBar isOpen = {searchOpen} />
</ルート>
</サスペンス>
） ： ヌル;
const pageLoadingIndicator = isPageLoading？ （（
<PageLoadingIndicator />
） ： ヌル;
戻る （
<header className = {rootClass}>
<div className = {classes.toolbar}>
<div className = {classes.primaryActions}>
<NavTrigger />
</ div>
{pageLoadingIndicator}
<OnlineIndicator
hasBeenOffline = {hasBeenOffline}
isOnline = {isOnline}
/>
<Link to = {resourceUrl（'/'）}>
<ロゴクラス={{ロゴ：classes.logo}} />
</リンク>
<div className = {classes.secondaryActions}>
<SearchTrigger
active = {searchOpen}
onClick = {handleSearchTriggerClick}
/>
<AccountTrigger />
<SimiCartIcon />
<CartTrigger />
</ div>
</ div>
{検索バー}
</ header>
）;
};
Header.propTypes = {
クラス：shape（{
閉じた：文字列、
ロゴ：文字列、
開く：文字列、
primaryActions：文字列、
二次アクション：文字列、
ツールバー：文字列
}）
};
デフォルトのヘッダーをエクスポートします。 testextension/src/override/SimiCartIcon.jsでこのビューを作成しましょう：
'react'からReactをインポートします。
'@ magento / venia-ui / lib / components/Icon'からアイコンをインポートします。
import {FastForward} from'react-feather';
'@ magento / peregrine / lib / util/makeUrl'からresourceUrlをインポートします。
import {useHistory} from'react-router-dom';
import {shape、string} from'prop-types';
'./SimiCartIcon.css'からdefaultClassesをインポートします。
import {FormattedMessage、useIntl} from'react-intl';
constSimiCartIcon=小道具=>{
const classes = defaultClasses;
const {formatMessage} = useIntl（）;
const history = useHistory（）;
戻る （
<ボタン
aria-label = {formatMessage（{
id： `blog.bloglabel`、
defaultMessage：'ブログ'
}）}
className = {classes.root}
onClick = {（）=> history.push（resourceUrl（'/ simicart'））}
>>
<アイコンsrc={FastForward} />
<span className = {classes.label}>
<FormattedMessage id = {`Blog`} />
</ span>
</ button>
）;
}
SimiCartIcon.propTypes = {
クラス：shape（{ルート：文字列}）
};
SimiCartIcon.defaultProps = {};
デフォルトのSimiCartIconをエクスポートします。次に、スタイルを設定します。
。根 {
align-items：center;
カーソル：ポインタ;
ディスプレイ：インラインフレックス;
justify-content：center;
行の高さ：1;
ポインタイベント：自動;
text-align：center;
空白：nowrap;
遷移プロパティ：色;
遷移時間：224ms;
遷移タイミング関数：cubic-bezier（0、0、0.2、1）;
高さ：3rem;
幅：3レム;
}
.label {
表示：なし;;
}
@media（min-width：641px）{
。根 {
幅：自動;
}
.label {
表示：初期;
margin-inline-start：0.25rem;
}
}結果：
これでチュートリアルは終わりです。 紛らわしい部分がある場合は、遠慮なく質問してください。このチュートリアルが役立つと思われる場合は、役立つと評価することを忘れないでください。
さらに、Magento PWA Studio拡張機能を試してみたい場合は、Magento PWAStudioWebサイトの上にインストールできる無料のオープンソースアドオンモジュールがあります。
続きを読む：
Magento PWA Studio：便利なリンクとリソース