将故事书与模板集成（应用程序启动器）

Question

我正在尝试将故事书与模板集成，但是，模板项目是通过

npm init stencil

中的应用程序启动器初始化的。 看起来像这样

我已经用故事书对模板做了一些研究，但他们似乎都用组件启动器初始化了他们的项目。在像这些https://ionic.io/blog/how-to-use-storybook-with-stencil这样的帖子中，我被告知要在

import {defineCustomElements} from '../loader'; defineCustomElements();

中添加

preview.js

。但是，由于应用程序模板启动器没有可用的加载程序，因此它实际上不起作用。

这就是我的

stencil.config.ts

的样子。

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

// https://stenciljs.com/docs/config

const prod: boolean = process.argv && process.argv.indexOf('--prod') > -1;
const apiEnv: string = prod ? 'prod' : 'dev';

export const config: Config = {
  env: {
    apiEnv: apiEnv
  },
  globalStyle: 'src/global/app.css',
  globalScript: 'src/global/app.ts',
  taskQueue: 'async',
  outputTargets: [
    {
      type: 'www',
      // comment the following line to disable service workers in production
      serviceWorker: null
    }
  ],
  plugins: [
    sass({
      injectGlobalPaths: ['src/global/scss/app.scss']
    })
  ]
};

Answer 1

应用程序和组件启动器之间的主要区别是

stencil.config.ts

中预配置的输出目标。所以你应该能够简单地从组件启动器复制它们：

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

Answer 2

defineCustomElements 在构建期间不再起作用，必须使用

www-workaround 绕过。因此，我创建了一个更新的 stencil-storybook-boilerplate。