如何在根级别设置故事书 lerna monorepo

Question

我正在开发一个使用 lerna mono repo 设置的项目，我们有多个 stencilJS 项目，用于 monorepo 包中的单个组件。

我的项目结构是：

我是故事书的新手，现在我必须在所有包故事书的根级别设置故事书。

我在互联网上关注了一篇文章，并且由于当前的设置方式，我设置了一些仅适用于单个包组件的内容。

由于preview.js 中的defineCUstomElements 它正在加载第一个项目包加载器，我只能看到第一个项目故事。没有为第二个项目故事加载 CSS。

有人可以帮我在根级别设置适用于所有包的故事书吗？

我的例子

故事书/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../packages/plugin-*/src/components/plugin-*/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-viewport',
    '@storybook/addon-notes',
    '@storybook/addon-docs'
  ]
}

故事书/preview.js

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

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

package/stencilProj1/component1.stories.ts

import readme from './readme.md'
import React from 'react';
import ComponentButton from '../../../dist/collection/components/ComponentButton /ComponentButton';
export default {
  title: 'Button',
  component: ComponentButton,
  argTypes: {
    label: { control: 'text' },
    type: { type: 'select', options: ['primary'] },
    disabled: { control: 'boolean' }
  },
  parameters: {
    markdown: readme
  },
};

const Template = ({ label, type, disabled = false }) => {
  return <component-button type={type} disabled={disabled}>{label}</component-button>;
};

export const Primary = Template.bind({});
Primary.args = {
  type: 'primary',
  label: 'Primary Button',
};

Answer 1

您是否尝试过使用“as”导入项目 2 的 defineCustomElement 来重命名它并使用它？ （在 preview.js 中遵循以下内容）

import { defineCustomElements } from '../packages/stencilProj1/loader';
import { defineCustomElements as defineSecondProject } from '../packages/stencilProj2/loader';

defineCustomElements();
defineSecondProject();

这是非常手动的，即使这样可行，如果你有很多 repo 可能不是一个好的解决方案，但我已经做了类似加载多个组件加载器的事情，这对于我过去的用例来说似乎工作正常。

Answer 2

经过几个月的尝试，我终于解决了这个难题 :) 并希望与社区分享我的解决方案

我有一个 lerna v4 monorepo，用于 react v17 + mui v5 组件，用 typescript 编写，并使用 storybook v6 和 webpack v5 进行调整

mui 在 preview.js 中有它的包装器，这就是为什么我在 babel-loader 中添加了 .storybook 的路径

module.exports = {
  core: {
    builder: "webpack5",
  },
  framework: "@storybook/react",
  stories: ["../components/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/preset-create-react-app",
      options: {
        craOverrides: {
          fileLoaderExcludes: ["less"],
        },
      },
    },
  ],
  webpackFinal: config => {
    const {
      module: {
        rules: [, , , , , { oneOf }],
      },
    } = config;
    const babelLoader = oneOf.find(({ test }) => new RegExp(test).test(".ts"));
    babelLoader.include = [/components\/(.*)\/src/, /.storybook/];
    babelLoader.options.sourceType = "unambiguous";
    return config;
  },
};

值得一提的是我的 tsconfig 有这些行

    "rootDirs": [
      "./src",
    ],