Настройка webpack index.js simple-wc-router - PullRequest
Новая
       91

Настройка webpack index.js simple-wc-router

0 голосов
/ 09 октября 2019

Лучший способ настроить SPA-маршрутизатор с lit-element и simple-wc-router с помощью веб-пакета.

В настоящее время у меня это работает, но мне интересно, есть ли лучший способ собрать все это вместе.

webpack-config.js: 

module.exports = ({ mode, presets }) => {
  return webpackMerge(
  {
    entry: {
    app: './src/index.js'
  },

index.js 

import './app-router.js';
window.addEventListener('load', () => {
    initRouter();
});

function initRouter() {
  var approuter = document.createElement("app-router");
  document.getElementsByTagName("BODY")[0].append(approuter);
}

app-router.js 

import { LitElement, html } from 'lit-element';
import { Router } from 'simple-wc-router';
import './ui/side-panel.js';
import './admin/admin-home.js';

class AppRouter extends Router(LitElement) {
    static get routes() {
        return [
        {
            path: "/admin",
            component: 'admin-home',
            import: () => {
              console.log('path /admin...');
              import(/* webpackChunkName: "adminutils" */ './admin/admin-home');
            }

        },
        {
          path: '/admin/billing',
          component: 'admin-billing',
          import: () => import(/* webpackChunkName: "adminutils" */ './admin/admin-billing')
        },

        {
          path: "*",
          component: 'not-found-view',
          import: () => import(/* webpackChunkName: "not-found-view" */ './views/not-found-view')
        }
    ];
}

В настоящее время это работает,Но чтобы использовать элемент app-router, который имеет логику маршрутизации, я должен добавить элемент HTML.

Для документов LitElement: https://lit -element.polymer-project.org / guide / use способ использования компонента после импорта будет 

<app-router></app-router>

Я не смог найти способ использовать веб-компонент без html-части, поэтому: document.getElementsByTagName ("BODY") [0] .append (approuter);

Есть ли более элегантный способ использованияВеб-компонент app-router?

Есть ли лучший способ настроить компонент маршрутизации, если мы используем веб-пакет?

1 Ответ

0 голосов
/ 10 октября 2019

Полагаю, лучшим решением может быть импортирование app-router только в index.js, например так: 

import './app-router.js';

Без функций прослушивателя событий и initRouter ().

Тогда, так какindex.js уже импортировал модуль, просто добавьте: 

<app-router></app-router>

в index.html. Это дает вам гибкость в указании того, где вы хотите, чтобы выполнялась маршрутизация, что может быть или не быть вверху страницы.

...