дозволяє вам отримувати вигоду від блогу на багатофункціональній вітрині PWA.
У цій статті ви дізнаєтеся, як встановити PWA Blog на PWA Studio.
Примітка: Ваш код може дещо відрізнятися від наданих прикладів через різні версії PWA Studio.
Виконайте такі кроки, щоб встановити доповнення Magento 2 PWA для блогу:
1. Переконайтеся, що ви встановили останню версію (База, ) та розширення GraphQL для блогу Magefan .
2. Завантажте джерело папку з архіву до вашого Кореневий каталог PWA Studio.
3. Перейдіть до свого Кореневий каталог PWA Studio.
4. Додайте статичний маршрут блогу.
- Оновіть local-intercept.js. Замініть цей рядок
function localIntercept() {}
з
function localIntercept(targets) {
targets.of("@magento/venia-ui").routes.tap(routes => {
routes.push({
name: "Blog",
pattern: "/blog",
path: require.resolve("./src/lib/magefan/pwa-studio-blog-ui/src/components/Routes")
});
return routes;
});
}
Див. приклад файлу (зразки/локальний-інтерцепт.js).
5. Створити каталоги компонентів.
mkdir -p src/components
mkdir -p src/components/App
mkdir -p src/components/Main
mkdir -p src/components/Adapter
6. Скопіюйте наступне компоненти.
cp node_modules/@magento/venia-ui/lib/components/App/app.js src/components/App
cp node_modules/@magento/venia-ui/lib/components/App/container.js src/components/App
cp node_modules/@magento/venia-ui/lib/components/Main/main.js src/components/Main
cp node_modules/@magento/venia-ui/lib/components/Adapter/adapter.js src/components/Adapter
7. Додати основні стилі блогу.
- Оновіть components/Main/main.js. Додайте цей рядок в кінці імпорту:
import blogPageClasses from './../../lib/magefan/pwa-studio-blog-ui/src/index.module.css';
і замініть цей рядок
<div className={pageClass}>{children}</div>
з
<div className={`${pageClass} ${blogPageClasses.blogPage}`}>{children}</div>
Див. приклад файлу (зразки/компоненти/Main/main.js).
8. Оновлення оператори імпорту.
- Оновіть відносний імпорт у components/Main/main.js.
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import Footer from '@magento/venia-ui/lib/components/Footer';
import Header from '@magento/venia-ui/lib/components/Header';
import defaultClasses from '@magento/venia-ui/lib/components/Main/main.css';
Див. приклад файлу (зразки/компоненти/Main/main.js).
- Оновіть відносний імпорт у components/App/app.js.
import globalCSS from '@magento/venia-ui/lib/index.css';
import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
import Main from '../Main';
import Mask from '@magento/venia-ui/lib/components/Mask';
import Navigation from '@magento/venia-ui/lib/components/Navigation';
import Routes from '@magento/venia-ui/lib/components/Routes';
import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
import Icon from '@magento/venia-ui/lib/components/Icon';
Див. приклад файлу (зразки/компоненти/App/app.js).
- Оновіть відносний імпорт у components/App/container.js.
import { useErrorBoundary } from '@magento/venia-ui/lib/components/App/useErrorBoundary';
Див. приклад файлу (зразки/компоненти/App/container.js).
- Оновіть відносний імпорт у components/Adapter/adapter.js.
import { AppContextProvider } from '@magento/venia-ui/lib/components/App';
import App from '../App';
Див. приклад файлу (зразки/компоненти/Адаптер/adapter.js).
- Відкрийте файл src/index.js вашого проєкту та оновіть імпорт для компонента Adapter, щоб використовувати ваш власний компонент Adapter.
import Adapter from './components/Adapter';
Див. приклад файлу (зразки/вихідь/index.js).
9. Експорт компонентів
- Створіть файл src/components/App/index.js з наступним вмістом
export { default } from './container'
- Створіть файл src/components/Main/index.js з наступним вмістом
export { default } from './main'
- Створіть файл src/components/Adapter/index.js з наступним вмістом
export { default } from './adapter'
10. Перезапис/Розширення основного компонента
- У кореневому каталозі PWA Studio створіть модуль OverrideWebpackPlugin.js для перезапису плагіна webpack з наступним кодом:
const path = require('path');
const glob = require('glob');
module.exports = class NormalModuleOverridePlugin {
constructor(moduleOverrideMap) {
this.name = 'NormalModuleOverridePlugin';
this.moduleOverrideMap = moduleOverrideMap;
}
requireResolveIfCan(id, options = undefined) {
try {
return require.resolve(id, options);
} catch (e) {
return undefined;
}
}
resolveModulePath(context, request) {
const filePathWithoutExtension = path.resolve(context, request);
const files = glob.sync(`${filePathWithoutExtension}@(|.*)`);
if (files.length === 0) {
throw new Error(`There is no file '${filePathWithoutExtension}'`);
}
if (files.length > 1) {
throw new Error(
`There is more than one file '${filePathWithoutExtension}'`
);
}
return require.resolve(files[0]);
}
resolveModuleOverrideMap(context, map) {
return Object.keys(map).reduce(
(result, x) => ({
...result,
[require.resolve(x)]:
this.requireResolveIfCan(map[x]) ||
this.resolveModulePath(context, map[x]),
}),
{}
);
}
apply(compiler) {
if (Object.keys(this.moduleOverrideMap).length === 0) {
return;
}
const moduleMap = this.resolveModuleOverrideMap(
compiler.context,
this.moduleOverrideMap
);
compiler.hooks.normalModuleFactory.tap(this.name, (nmf) => {
nmf.hooks.beforeResolve.tap(this.name, (resolve) => {
if (!resolve) {
return;
}
const moduleToReplace = this.requireResolveIfCan(resolve.request, {
paths: [resolve.context],
});
if (moduleToReplace && moduleMap[moduleToReplace]) {
resolve.request = moduleMap[moduleToReplace];
}
return resolve;
});
});
}
};
- У кореневому каталозі PWA Studio створіть файл перезапису зіставлення componentOverrideMapping.js з наступним кодом:
module.exports = componentOverride = {
[`@magento/venia-ui/lib/components/Main`]: 'src/components/Main',
};
11. Перейдіть до src/lib/magefan/pwa-studio-blog-ui/папку та виконайте таку команду за допомогою CLI:
npm install
12. Перейдіть до кореневого каталогу PWA Studio, потім створіть робочу збірку та запустіть сервер.
npm run build
npm start
Після встановлення блогу PWA ви можете перевірити Посібник користувача розширення блогу , щоб розпочати налаштування свого блогу.
Підтримайте