Блог

Главная - Вопросы по программированию - Конфигурация трафарета, генерирующая файлы в dist, которые не работают автономно

Конфигурация трафарета, генерирующая файлы в dist, которые не работают автономно

#web-component #stenciljs

#веб-компонент #stenciljs

Вопрос:

Я начал разработку трафарета и попытался создать из него hello world, но при попытке собрать, развернуть и использовать его отдельно, файл dist генерирует несколько случайных файлов, которые, похоже, не работают автономно.

Я опубликовал файлы в npm и пытаюсь запустить его автономно в HTML-файле. Использование unpkg https://unpkg.com/browse/rahulrsingh09-stenciltest2@0.0.2/dist / 

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <my-component first="FF" last="'Don't call me a framework' JS"></my-component>
<script src='https://unpkg.com/rahulrsingh09-stenciltest2@0.0.2/dist/index.js'></script>
</body>
</html>

и это тест из другого пакета, который я нашел в npm, и, похоже, это работает .

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
</head>

<body>

 <my-component first="FF" last="'Don't call me a framework' JS"></my-component>

<script src='https://unpkg.com/web-component-stencil-test@0.0.1/dist/test.js'></script>
</body>

</html>

Единственное различие, которое я обнаружил, это https://unpkg.com/browse/web-component-stencil-test@0.0.1/dist /

dist содержит корневой файл для основного проекта, который выполняется автономно, но он не создается в новой сборке конфигурации stencil. документация по этому вопросу очень скудная, может кто-нибудь указать мне, что я делаю не так.. здесь или что-то отсутствует в stencil.

package.json

 "name": "stenciltest2",
  "version": "0.0.2",
  "description": "Stencil Component Starter",
  "main": "dist/index.cjs.js",
  "module": "dist/custom-elements/index.js",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/custom-elements/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/test/test.js",
  "files": [
    "dist/",
    "loader/"
  ],

конфигурация трафарета

 import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'test',
  buildEs5: true,
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ]
};

Ответ №1:

Вы имеете в виду «автономный», как в, без http-сервера?

Если это так, то это то, что команда Ionic называет «предварительной загрузкой».

 stencil build --prerender

Вам нужно будет установить baseUrl stencil.config.ts .

 import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      baseUrl: 'https://somedomain.com/somepath',
    }
  ]
};

См .:

Комментарии:

1. Я думаю, что он спросил не о предварительной загрузке, а о том, как загрузить пользовательский компонент, созданный из трафарета, непосредственно в браузере. Который некорректно работает с stencil starter.

Ответ №2:

Определяя esmLoaderPath в stencil.config, вы просите stencil создать отдельный пакет загрузчика в папку загрузчика.

Это приводит к двум разным пакетам!

Используя содержимое в пакете загрузчика, вы можете запускать defineCustomElements в window.

после выполнения этого вызова ваши пользовательские веб-компоненты отображаются / интерпретируются браузером.