模板配置在 dist 中生成的文件不能独立工作答案

【问题标题】：Stencil config generating files in dist that doesn't work standalone模板配置在 dist 中生成的文件不能独立工作
【发布时间】：2020-10-04 06:39:43
【问题描述】：

我已经开始进行模板开发并尝试从中创建 hello world，但是在尝试单独构建和部署和使用它时，dist 文件正在生成一些随机文件，这些文件似乎无法独立工作。

我已将文件发布到 npm 并尝试在 html 文件中独立运行。使用解包 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 包含一个独立运行的项目主体的根文件，但这不是在新的模板配置构建中生成的。这方面的文档非常稀少，有人能指出我在做什么错吗..这里或模板缺少的东西。

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
    },
  ]
};

【问题讨论】：

标签： web-component stenciljs

【解决方案1】：

你的意思是“独立”，没有 http 服务器吗？

如果是这样，这就是 Ionic 团队所说的“预渲染”。

stencil build --prerender

您需要在stencil.config.ts 中设置baseUrl。

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

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

见：

【讨论】：

我认为他问的不是预渲染，而是如何在浏览器中直接加载从模板生成的自定义组件。模板启动器无法正常工作。

【解决方案2】：

通过在 stencil.config 中定义 esmLoaderPath，您可以要求 stencil 在加载程序文件夹中构建一个单独的加载程序包。

这会产生两个不同的包！

使用加载程序包中的内容，您可以在窗口上运行defineCustomElements。

进行此调用后，您的自定义 Web 组件将由浏览器映射/解释。

【讨论】：